SVG в HTML
Вы можете вставлять элементы SVG непосредственно в свои HTML-страницы.
Встраивайте SVG непосредственно в HTML-страницы
Вот пример простой SVG-графики:
и вот HTML-код:
Пример
<!DOCTYPE html>
<html>
<body>
<h1>My first SVG</h1>
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>
</body>
</html>
Объяснение кода SVG:
- Изображение SVG начинается с элемента <svg>
- Атрибуты ширины и высоты элемента <svg> определяют ширину и высоту изображения SVG.
- Элемент <circle> используется для рисования круга.
- Атрибуты cx и cy определяют координаты x и y центра круга. Если cx и cy не установлены, центр окружности устанавливается в (0, 0)
- Атрибут r определяет радиус круга
- Атрибуты stroke и stroke-width управляют тем, как выглядит контур фигуры. Мы устанавливаем контур круга на зеленую «рамку» размером 4 пикселя.
- Атрибут fill относится к цвету внутри круга. Устанавливаем желтый цвет заливки
- Закрывающий тег </svg> закрывает изображение SVG.
Примечание. Поскольку SVG написан в формате XML, все элементы должны быть правильно закрыты!