Внутренний SVG HTML5

HTML5 поддерживает встроенный SVG.

Что такое SVG?

  • SVG - это расширяемые векторные графические изображения (Scalable Vector Graphics)
  • SVG используется для определения векторных графиков, предназначенных для работы в сети
  • SVG использует формат XML для определения графики
  • Качество графики SVG не теряется при увеличении или изменении размера изображения
  • SVG является стандартом Всемирной веб-ассоциации

Преимущества SVG

Преимущества использования SVG по сравнению с другими форматами изображений (например, JPEG и GIF):

  • SVG-изображения можно создавать и изменять с помощью текстовых редакторов
  • SVG-изображения можно индексировать, скриптовать, сжимать или искать
  • SVG является масштабируемым
  • SVG-изображения можно высококачественно распечатать в любом разрешении
  • SVG можно увеличивать без потери качества изображения

Поддержка браузерами

Internet Explorer 9, Firefox, Opera, Chrome и Safari поддерживают втягиваемый SVG.

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

В HTML5 вы можете напрямую嵌入 элементы SVG в страницу HTML:

Пример

<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

</body>
</html>

Попробуйте сами

Результат:

Учебник SVG

Чтобы узнать больше о SVG, посетите наш Учебник SVG.