HTML5 SVG

SVG определяется как масштабируемая векторная графика.

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

HTML <svg>Элемент является контейнером для графики SVG.

SVG имеет несколько методов для рисования путей, прямоугольников, кругов, текста и графических изображений.

SVG Sorry, your browser does not support inline SVG.

Что такое SVG?

  • SVG расшифровывается как Scalable Vector Graphics
  • SVG используется для определения векторной графики для веба
  • SVG использует формат XML для определения графики
  • Изображения SVG не теряют качество графики при увеличении или изменении размера
  • SVG является стандартом World Wide Web Consortium

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

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

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

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

Числа в таблице указывают первую версию браузера, которая полностью поддерживает этот элемент.

Элемент
<svg> 4.0 9.0 3.0 3.2 10.1

Встраивание SVG непосредственно в HTML-страницы

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

Круг SVG

Пример

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" /> </svg>

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

Результат:

Пятиконечная звезда SVG

Пример

<!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 и Canvas

SVG — это язык для описания 2D-графики с помощью XML.

Canvas рисует 2D-графику с помощью JavaScript.

SVG основан на XML, что означает, что каждый элемент в SVG DOM доступен. Вы можете прикрепить обработчики событий JavaScript к элементу.

В SVG каждая нарисованная фигура рассматривается как объект. Если атрибуты объекта SVG изменяются, браузер может автоматически перерисовать фигуру.

Canvas отображается пиксель за пикселем. В canvas после того, как фигура нарисована, она больше не получает внимания браузера. Если её положение изменяется, всю сцену также нужно перерисовать, включая любые объекты, которые могли быть перекрыты этой фигурой.

Сравнение Canvas и SVG

В таблице ниже перечислены некоторые различия между canvas и SVG.

Canvas SVG
  • Зависит от разрешения
  • Нет поддержки обработчиков событий
  • Слабые возможности отрисовки текста
  • Может сохранять полученное изображение в формате .png или .jpg
  • Лучше всего подходит для игр с интенсивной графикой, где многие объекты часто перерисовываются
  • Не зависит от разрешения
  • Поддерживает обработчики событий
  • Лучше всего подходит для приложений с большими областями отрисовки (например, Google Maps)
  • Высокая сложность замедляет скорость отрисовки (любое приложение, которое злоупотребляет DOM, работает небыстро)
  • Не подходит для игровых приложений
Другие расширения