|
|
|||||||||||||||||||||||||||||
|
Знакомство с SVG-графикойИсточник: habrahabr grokru
Этот пост - первый из серии статей о SVG-графике (Scalable Vector Graphic), рассказывающий об основах векторной графики на сайте.
Векторная графика широко применяется в полиграфии. Для веб-сайтов существует SVG, которая согласно официальной спецификации на w3.org является языком для описания двумерной графики в XML. SVG включает в себя три типа объектов: фигуры, изображения и текст. SVG существует с 1999 года, а с 16 августа 2011 включена в рекомендации W3C. SVG сильно недооценена веб-разработчиками, хотя имеет несколько важных преимуществ. Демонстрация всех примеров / Скачать исходники / Официальная документация
Преимущества SVG
Основные SVG-фигурыСогласно официальной спецификации можно рисовать простые объекты с помощью SVG: прямоугольник, окружность, линию, эллипс, ломаную линию или многоугольник при помощи тега svg. Простая линия с помощью тега line с всего двумя параметрами - точками начала (x1 и x2) и конца (y1 и y2):
Также можно добавить атрибуты или стили stroke and stroke-width, чтобы задать цвет и ширину:
Ломаная линияСинтаксис аналогичен предыдущему, используется тег polyline, атрибут points задает точки:
ПрямоугольникВызывается тегом rect, можно добавить некоторые атрибуты:
ОкружностьВызывается тегом circle, в примере с помощью атрибута r задаем радиус, cx и cy задают координаты центра:
ЭллипсВызывается тегом ellipse, работает аналогично circle, но можно задать два радиуса - rx и ry:
МногоугольникВызывается тегом polygon, многоугольник может иметь разное количество сторон:
Использование редакторовКак видно из примеров, рисование базовых SVG-фигур - это очень просто, но объекты могут быть намного сложнее. Для таких нужно использовать редакторы векторной графики, например Adobe Illustrator или Inkscape, где можно сохранять файлы в SVG-формате, а потом редактировать в текстовом редакторе. Вставлять на страницу SVG можно с помощью embed, iframe и object:
Пример - изображение айпода с сайта OpenClipArt.org:
Поддержка браузерамиSVG поддерживается почти всеми современными браузерами за исключением Internet Explorer 8 и ниже. Но и это может быть исправлено использованием javascript-библиотеки Raphael.js. Конвертировать SVG-файл в формат этой библиотеки можно на сайте ReadySetRaphael.com.
Для начала необходимо подключить библиотеку Raphael.js на нужную страницу, затем загрузить SVG-файл, скопировать и вставить сгенерированный код в function:
На странице вставить div с атрибутом rsr:
ЗаключениеВот и все основы SVG, в следующих статьях будут разобраны более сложные примеры использования векторной графики. Немного полезного чтива:
Ссылки по теме
|
|