Логотип schoolsw3.com
Учебники Справочники Упражнения КАК? Меню
ЯМаркет
Редактор Поддержка Форум

×
Учебники
Справочники
Упражнения
Пожертвовать Обновление Реклама Видео Магазин

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 Фреймы HTML с JavaScript HTML Путь к файлу HTML Мета теги HTML Макет HTML Адаптивный дизайн HTML Компьютерный код HTML Семантика HTML Синтаксис HTML Сущность HTML Символы HTML Эмодзи HTML Кодировка HTML URL Кодировка HTML в XHTML

HTML Формы

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

HTML Графика

HTML Холст HTML SVG

HTML Медиа

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

HTML APIы

HTML5 Геолокация HTML5 Перетаскивание HTML5 Веб хранилище HTML5 Веб работник HTML5 SSE

HTML Примеры

HTML Примеры HTML Викторина HTML Упражнения HTML Сертификат HTML Заключение HTML Специальные возможности

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

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

HTML5 SVG



SVG определяет векторную графику в формате XML.

Что такое SVG?

  • SVG расшифровывается как масштабируемая векторная графика
  • SVG используется для определения графики для bнтернета
  • SVG - это рекомендация W3C

Элемент <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="green" stroke-width="4" fill="yellow" />
  </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 Maps)
  • Медленный рендеринг, если он сложный (все, что использует DOM много, будет медленным)
  • Не подходит для игровых приложений

SVG Учебник

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