SVG в HTML

Вы можете внедрить элемент SVG direkt в HTML-страницу.

Внедрение SVG в HTML-страницу

Вот пример простого SVG-графика:

Извините, ваш браузер не поддерживает встроенный 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 контролируют способ отображения контура формы. Мы устанавливаем контур круга 4-пиксельным зеленым «окраем»
  • fill свойство устанавливает цвет внутри круга. Мы устанавливаем цвет наполнения желтым
  • Закрытие SVG изображения с помощью тега </svg>

Внимание: поскольку SVG написан на XML, все элементы должны быть правильно закрыты!