Векторная графика широко используется в печатном деле. Но и для веб сайтов мы можем использовать её с помощью 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 имеет меньший размер файла по сравнению с растровой графикой.
Базовые формы 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, а конечная точка определяется координатами в атрибутах x2and y2.
Также имеется два других атрибута (stroke и stroke-width) которые используются для определения цвета и ширины линии соответственно.
Прямоугольник
Прямоугольник выводится с помощью элемента <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>
Использование редактора для векторной графики
Вывод простых объектов SVG в HTML осуществляется просто. Однако, когда сложность объекта увеличивается, подобная практика может привести к большому объему нужной работы.
Но вы можете воспользоваться любым редактором для векторной графики (например, Adobe Illustrator илиInkscape) для создания объектов. Если вы владеете подобным инструментом, рисовать в них нужные объекты существенно проще, чем кодировать графику в теге HTML.
Можно копировать команды для векторной графики из файла в документ HTML. Или можно встраивать файл.svg с помощью одного из следующих элементов: embed, iframe и object.
<object data="images/ipod.svg" type="image/svg+xml"></object>
Результат будет одинаковым.
Поддержка в браузерах
SVG имеет хорошую поддержку в большинстве современных браузеров, за исключением IE версии 8 и более ранних. Но задачу можно решить с помощью библиотеки JavaScript Raphael.js. Для облегчения работы можно воспользоваться инструментом ReadySetRaphael.com для конвертации кода SVG в формат Raphael.
Сначала загружаем и включаем библиотеку Raphael.js в документ HTML. Затем загружаем файл .svg, копируем и вставляем полученный код в функцию после загрузки:
window.onload=function() { // Код Raphael размещается здесь
}
В теге body размещаем следующий элемент div с идентификатором rsr.
<div id="rsr"></div>
И все готово.
