Последние учебники веб-разработки
×

HTML5 Руководство

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 Iframes HTML JavaScript HTML Глава HTML юридические лица HTML Символы HTML Charset HTML URL шифровать HTML XHTML

HTML формы

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

HTML5

HTML5 вступление HTML5 Поддержка HTML5 элементы HTML5 Семантика Миграция HTML5 HTML5 Гид по стилю

HTML Графика

HTML холст HTML SVG

HTML СМИ

HTML СМИ HTML видео HTML аудио HTML Плагины HTML YouTube

HTML APIs

HTML Geolocation HTML Перетаскивания HTML Локальное хранилище HTML App кэш HTML Web Workers HTML SSE

HTML Примеры

HTML Примеры HTML викторина HTML5 викторина HTML Резюме

HTML Рекомендации

HTML Список тегов HTML Атрибуты HTML События HTML холст HTML Аудио Видео HTML DOCTYPEs HTML Цвета HTML Наборы символов HTML URL шифровать HTML Языковые коды HTTP Сообщения HTTP методы PX to EM конвертер Горячие клавиши

HTML5 SVG


Что такое SVG?

  • SVG означает Scalable Vector Graphics
  • SVG используется для определения графики для Web
  • SVG является рекомендацией W3C

Scalable Vector Graphics (SVG) является векторный формат изображения XML на основе для двумерной графики с поддержкой интерактивности и анимации. Спецификация SVG является открытым стандартом, разработанным консорциумом World Wide Web (W3C) с 1999 года.

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

Все основные современные веб-браузеры, включая Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari и Microsoft Edge-есть SVG оказания поддержки.


HTML <svg> Элемент

HTML <svg> элемент (introduced in HTML5) представляет собой контейнер для 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 Прямоугольник

RGB (0,0,0) ">

пример


<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 Rounded Rectangle

К сожалению, ваш браузер не поддерживает встроенный 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 Star

К сожалению, ваш браузер не поддерживает встроенный 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 Logo

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>
  Sorry, your browser does not support inline SVG.
</svg>

Попробуй сам "

Различия между SVG и Canvas

SVG является языком для описания 2D-графики в формате XML.

Canvas рисует 2D - графики, на лету (with a JavaScript) .

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

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

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


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

В таблице ниже приведены некоторые важные различия между Canvas и SVG:

Canvas SVG
  • Разрешение зависит
  • Нет поддержки для обработчиков событий
  • Возможности бедных рендеринг текста
  • Вы можете сохранить полученное изображение в .png или .jpg
  • Хорошо подходит для графических интенсивных игр
  • Разрешение независимой
  • Поддержка обработчиков событий
  • Лучше всего подходит для приложений с большими площадями рендеринга (Google Maps)
  • Медленный рендеринг , если комплекс (anything that uses the DOM a lot will be slow) , (anything that uses the DOM a lot will be slow)
  • Не подходит для игровых приложений

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