W3docs
ru
Войти

SVG в HTML5

On this page, you can learn about embedding SVG directly into HTML pages, see an example with its explanation, which will help you to create your own.

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

danger

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

Элементы фигур в SVG

В SVG есть несколько предопределённых элементов для создания фигур. Вот они:

Пример встраивания SVG в HTML-страницу:

Пример встраивания SVG в HTML-страницу

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <svg width="300" height="200">
      <circle cx="150" cy="100" r="50" stroke="purple" stroke-width="5" fill="pink" />
    </svg>
  </body>
</html>
Попробуйте сами »

Теперь разберём этот код:

  • Изображение SVG всегда начинается с тега <svg>.
  • Ширина и высота изображения SVG задаются атрибутами width и height элемента <svg>.
  • Элемент <circle> рисует круг.
  • Атрибуты cx и cy задают координаты x и y центра круга. Если cx и cy отсутствуют, центр круга устанавливается в (0, 0).
  • Атрибут r используется для задания радиуса круга.
  • Атрибуты stroke и stroke-width управляют внешним видом контура фигуры. В нашем примере кода мы установили для контура круга фиолетовую «границу» толщиной 5 пикселей.
  • Атрибут fill задаёт цвет внутри круга. Мы установили для него розовый цвет.
  • Изображение SVG закрывается закрывающим тегом </svg>.

Практика

Практика

Какие основные особенности имеет формат SVG в HTML5?