SVG в HTML

В HTML5 вы можете включать элемент SVG непосредственно в HTML код веб-документа.

Включайте SVG непосредственно в HTML код страницы

Ниже приводится пример простой SVG графики:

Ваш браузер не поддерживает HTML тег SVG.

Вот HTML код, реализующий ее:


<!DOCTYPE html>
<html>
<body>

<h1>Моя первая 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>
  • Атрибуты width и height элемента <svg> определяют ширину и высоту SVG изображения
  • Элемент <circle> используется для рисования круга
  • Атрибуты cx и cy определяют координаты X и Y центра круга. Если атрибуты cx и cy не определяются, то координаты центра круга устанавливаются в значения (0, 0)
  • Атрибут r определяет радиус круга
  • Атрибуты stroke и stroke-width отвечают за то, как будет выводиться фигура. В данном примере устанавливается, что круг должен отображаться линией зеленого цвета толщиной 4px
  • Атрибут fill определяет цвет заливки круга. В данном примере задан желтый цвет
  • Закрывающий тег </svg> завершает описание SVG изображения

Примечание: Так как SVG декларация использует формат XML, все элементы должны быть закрыты в соответствии со спецификацией XML!