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 имеет меньший размер файла по сравнению с растровой графикой.
Базовые формы SVG
В соответствии со спецификацией мы можем рисовать несколько базовых форм: линия, полилиния, прямоугольник, круг, эллипс. Все элементы должны быть вставлены в тег < svg> ... < /svg>. Рассмотрим базовые элементы подробно.
Линия
Для вывода линии в SVG используется элемент < line>. Он рисует отрезок, для которого нужно определить две точки: начало и конец.
<svg></p> <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) которые используются для определения цвета и ширины линии соответственно.
Продвижение сайтов в NY лучше доверить SEO company NY.
Полилиния
Данный объект похож на < line>, но с помощью элемента < polyline> можно рисовать несколько линий сразу.
<svg></p> <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)"/> <p> </svg>
Элемент < polyline> содержит атрибут points, который используется для указания координаты точек.
Прямоугольник
Прямоугольник выводится с помощью элемента < rect>. Нужно определить ширину и высоту.
<svg></p> <p> <rect width="200" height="200" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/></p> <p> </svg>
Круг
Для вывода круга используем элемент < circle>. В следующем примере мы создаем круг с радиусом 100, который определяется в атрибуте r:
<svg></p> <p> <circle cx="102" cy="102" r="100" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/></p> <p> </svg>
Первый два атрибута cx и cy определяют координаты центра. В выше приведенном примере мы установили значение 102 для обеих координат. По умолчанию используется значение 0.
Эллипс
Для вывода эллипса используем элемент < ellipse>. Он работает так же, как и круг, но мы можем специально задавать радиусы по оси x и y с помощью атрибутов rx и ry:
<svg></p> <p> <ellipse cx="100" cy="50" rx="100" ry="50" fill="rgb(234,234,234)" stroke-width="1" stroke="rgb(0,0,0)"/></p> <p> </svg>
Полигон
Элемент < polygon> выводит многогранные фигуры, такие как треугольник, шестиугольник и прочее. Например:
<svg></p> <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)"/> <p> </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() {</p>
<p> // Код Raphael размещается здесь</p>
<p> }
В теге body размещаем следующий элемент div с идентификатором rsr.
<br /> <div id="rsr"></div> <p>
И все готово.
Web Дизайнер (designer)