САМОСТОЯТЕЛЬНОЕ ОБУЧЕНИЕ ДЛЯ ВЕБ РАЗРАБОТЧИКОВ

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

HTML Формы

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

HTML Графика

HTML Canvas HTML SVG

HTML Медиа

HTML Медиа формат HTML Video HTML Audio HTML Плагины HTML YouTube

HTML API

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

HTML Примеры

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

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

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

HTML 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 Учебник.