САЙТ НАХОДИТСЯ В РАЗРАБОТКЕ

HTML Учебник

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 Head HTML Макеты HTML Адаптивность HTML Компьютерный код HTML Семантика HTML Объект HTML Символы HTML Emojis HTML Кодировка HTML URL кодирование HTML XHTML HTML Гид по стилю

HTML Формы

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

HTML 5

HTML5 Введение HTML5 Поддержка HTML5 Новые элементы HTML5 Переход

HTML Графика

HTML Canvas HTML SVG

HTML Media

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 Canvas HTML Аудио/Видео HTML Набор символов HTML DOCTYPE HTML URL Кодирование HTML Коды языков HTML Коды стран HTTP Сообщений HTTP Метод PX в EM Конвертер Горячие клавиши
Баннер ТОП

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 Учебник на нашем сайте.