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

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

Что такое SVG?

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

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

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

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

Поддержка браузеров

Internet Explorer 9, Firefox, Opera, Chrome и Safari поддерживают вlined 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.