Этот урок связан с проектом Масштабируемая векторная графика

SVG: основы векторной графики в HTML

Векторная графика широко используется в печатном деле. Но и для веб сайтов мы можем использовать её с помощью SVG (Scalable Vector Graphic - масштабируемая векторная графика). В соответствии со спецификацией W3.org SVG определяется как:

Язык для описания двумерной графики в XML. SVG допускает использование трех типов объектов: векторные графические формы (наппример, пути, состоящие из прямых линий и кривых), изображения и текст.

Несмотря на то, с августа 2011 года SVG включено в рекомендации W3C, данная технология практически не используется в веб проектах, хотя и имеет перед растровыми изображениями ряд преимуществ. В данной серии уроков мы представим, как работать с SVG элементами на веб страницах.

 

Преимущества SVG

Независимость разрешения

Растровые изображения зависят от разрешения. Графика приобретает непрезентабельный вид при изменении размеров до определенных масштабов. С векторной графикой такая ситуация невозможна в принципе, так как все представляется математическими выражениями, которые автоматически пересчитываются при измении масштаба, и качество сохраняется в любых условиях.

Уменьшение количества запросов HTTP

SVG может быть встроено непосредственно в документ HTML с помощью тега svg, поэтому браузер не нуждается в запросах для обслуживания графики. Такой подход хорошо влияет на характеристики загрузки веб сайта.

Стили и скрипты

Встраивание с помощью тега svg также позволяет легко определять стили для графики с помощью CSS. Можно изменять свойства объекта, такие как цвет фона, прозрачность, рамки и так далее. Подобным же образом можно манипулировать графикой с помощью JavaScript.

Легко редактировать и анимировать

Объекты SVG можно анимировать с помощью CSS или JavaScript. Также объекты SVG можно модифицировать с помощью текстового редактора.

Меньший размер файла

SVG имеет меньший размер файла по сравнению с растровой графикой.

demosourse

 

Базовые формы SVG

В соответствии со спецификацией мы можем рисовать несколько базовых форм: линия, полилиния, прямоугольник, круг, эллипс. Все элементы должны быть вставлены в тег <svg> ... </svg>. Рассмотрим базовые элементы подробно.

Линия

Для вывода линии в SVG используется элемент <line>. Он рисует отрезок, для которого нужно определить две точки: начало и конец.

<svg>
<line x1="0" y1="0" x2="200" y2="200" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Начало отрезка определяется атрибутами  x1 и y1, а конечная точка определяется координатами в атрибутах x2 and y2.

Также имеется два других атрибута (stroke и stroke-width) которые используются для определения цвета и ширины линии соответственно.

Линия в SVG

 

Полилиния

Данный объект похож на <line>, но с помощью элемента <polyline> можно рисовать несколько линий сразу.

<svg>
<polyline points="0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Элемент <polyline> содержит атрибут points, который используется для указания координаты точек.

Полилиния

 

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

Прямоугольник выводится с помощью элемента <rect>. Нужно определить ширину и высоту.

<svg>
<rect width="200" height="200" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

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

 

Круг

Для вывода круга используем элемент <circle>. В следующем примере мы создаем круг с радиусом 100, который определяется в атрибуте r:

<svg>
<circle cx="102" cy="102" r="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Первый два атрибута cx и cy определяют координаты центра. В выше приведенном примере мы установили значение 102 для обеих координат. По умолчанию используется значение 0.

Круг

 

 

Эллипс

Для вывода эллипса используем элемент <ellipse>. Он работает так же, как и круг, но мы можем специально задавать радиусы по оси x и y с помощью атрибутов rx и ry:

<svg>
<ellipse cx="100" cy="50" rx="100" ry="50" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Эллипс

 

Полигон

Элемент <polygon> выводит многогранные фигуры, такие как треугольник, шестиугольник и прочее. Например:

<svg>
<polygon points="70.444,218.89 15.444,118.89 70.444,18.89 180.444,18.89 235.444,118.89 180.444,218.89" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

Полигон

 

Использование редактора для векторной графики

Вывод простых объектов SVG в HTML осуществляется просто. Однако, когда сложность объекта увеличивается, подобная практика может привести к большому объему нужной работы.

Но вы можете воспользоваться любым редактором для векторной графики (например, Adobe Illustrator или Inkscape) для создания объектов. Если вы владеете подобным инструментом, рисовать  в них нужные объекты существенно проще, чем кодировать графику в теге HTML.

Можно копировать команды для векторной графики из файла в документ HTML. Или можно встраивать файл .svg с помощью одного из следующих элементов: embed, iframe и object.

<object data="images/ipod.svg" type="image/svg+xml"></object>

Результат будет одинаковым.

Встраивание файла SVG

 

Поддержка в браузерах

SVG имеет хорошую поддержку в большинстве современных браузеров, за исключением IE версии 8 и более ранних. Но задачу можно решить с помощью библиотеки JavaScript Raphael.js. Для облегчения работы можно воспользоваться инструментом ReadySetRaphael.com для конвертации кода SVG в формат Raphael.

Raphael

Сначала загружаем и включаем библиотеку Raphael.js в документ HTML. Затем загружаем файл .svg, копируем и вставляем полученный код в функцию после загрузки:

window.onload=function() { 
	// Код Raphael размещается здесь
}

В теге body размещаем следующий элемент div с идентификатором rsr.

<div id="rsr"></div>

И все готово.

 

В следующем уроке серии мы рассмотрим, как определять стили для объектов SVG в CSS.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.hongkiat.com/blog/scalable-vector-graphic/
Перевел: Сергей Фастунов
Урок создан: 20 Декабря 2012
Просмотров: 71966
Правила перепечатки


5 последних уроков рубрики "Разное"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 20 Декабря 2012 19:10
    ferzisdis
    Просто супер
  • 21 Декабря 2012 02:59
    xgrommx
    fabric.js kinetic.js и еще куча, для ie используется свой формат vml, но решение есть в библиотеке excanvas.js
  • 21 Декабря 2012 11:03
    RebelioUS
    Интересно.
  • 22 Декабря 2012 16:30
    Айбек Маженов
    надеюсь на продолжение =)
  • 16 Марта 2013 13:42
    azmodeus
    Подскажите, пожалуйста, а как текст внутрь вставлять - допустим я хочу сделать звезду в лучах которой будут ссылки, или категории?
^ Наверх ^