ЛУЧШИЙ САЙТ ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

HTML5 Учебник

HTML СТАРТ HTML Введение HTML Редакторы HTML Основные примеры HTML Элементы HTML Атрибуты HTML Заголовки HTML Параграфы HTML Стили HTML Форматирование HTML Цитаты HTML Комментарии HTML Цвета HTML CSS HTML Ссылки HTML Изображения HTML Таблицы HTML Списки HTML Блоки HTML Классы HTML Идентификаторы HTML Фреймы HTML JavaScript HTML Пути к файлам HTML Голова веб-страницы HTML Макеты HTML Адаптивность HTML Компьютерный код HTML Символьные объекты HTML Символы HTML Кодировка HTML URL кодирование HTML XHTML

HTML Формы

HTML Формы HTML Элементы формы HTML Типы ввода HTML Атрибуты ввода

HTML5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Семантические элементы HTML5 Переход с HTML4 HTML5 Гид по стилю

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа HTML Видео HTML Аудио HTML Плагины HTML YouTube

HTML API

HTML Геолокация HTML Drag/Drop HTML Web хранилище HTML Web работники HTML SSE

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Сертификат HTML Резюме HTML Доступность

HTML Справочники

HTML Список тегов HTML Атрибуты HTML Глобальные атрибуты HTML События HTML Цвета HTML Canvas HTML Аудио/Видео HTML Действующие Doctype HTML Наборы символов HTML URL кодировка HTML Кодировка языка HTTP Сообщения HTTP Методы PX в EM Конвертер Горячие клавиши

HTML5. Уроки для начинающих

HTML5 SVG - Scalable Vector Graphics


Что такое SVG?

  • SVG расшифровывается как Scalable Vector Graphics - Масштабируемая векторная графика
  • SVG используется для определения Web-графики
  • SVG рекомендуется W3C (Консорциумом всемирной паутины)

HTML элемент <svg>

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

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


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

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

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

SVG Круг

Пример

<!DOCTYPE html>
<html>
<body>

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="red" stroke-width="4" fill="orange" />
</svg>

</body>
</html>
Попробуйте сами »

SVG Прямоугольник



Пример

<svg width="400" height="100">
  <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" />
</svg>
Попробуйте сами »

SVG Закругленный прямоугольник

К сожалению, ваш браузер не поддерживает встроенный SVG.

Пример

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
Попробуйте сами »

SVG Звезда

К сожалению, ваш браузер не поддерживает встроенный SVG.

Пример

<svg width="300" height="200">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>
Попробуйте сами »

SVG Лого

SVG К сожалению, ваш браузер не поддерживает встроенный SVG.

Пример

<svg height="130" width="500">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text>
  К сожалению, ваш браузер не поддерживает встроенный 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)
  • Медленный рендеринг, если комплекс (все, что использует DOM) будет очень медленным
  • Не подходит для игровых программ

SVG Учебник

Узнать больше про SVG можно, посетив SVG Учебник на нашем сайте.