SVG в HTML5

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

DANGER

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

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

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

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

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

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>

Try it Yourself »

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

Изображение 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?

SVG-изображения не зависят от разрешения.SVG-изображения используют преимущества концепции модели документа (DOM).SVG-изображения не поддерживают интерактивность.SVG-изображения не могут быть проиндексированы или найдены через поиск.SVG-изображения существуют только в пикселях.

SVG в HTML5 ​

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

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

Практика ​

SVG в HTML5

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

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

Практика