Начинаем Работать с Масштабируемой Векторной Графикой (SVG)

() translation by (you can also view the original English article)

Сейчас такие времена, когда вы как веб-дизайнер, должны знать как использовать SVG (Scalable Vector Graphics - Масштабируемую Векторную Графику) в ваших сайтах. Поэтому, давайте разберемся с основами SVG графики, а также с такими более сложными элементами дизайна, такими, как иконками и логотипами.

Что Получится в Результате Урока

Независимо от Разрешения Экрана

Недавно на WWDC 2012 Apple анонсировала использование новых ретина дисплеев на MacBook Pro. Ретина дисплеи имеют более высокую плотность пикселей (220.5ppi), чем обычные экраны и мониторы, и Apple, заявили, что их в их ретина-технологии плотность настолько высока, что невозможно увидеть пикселизацию человеческим глазом с обычной дистанции. Если вы видели эти ретина-дисплеи, то я уверен, вы согласитесь, что они потрясающие. Однако, их использование, приводится к возникновению проблем у веб-дизайнеров.

Проблемы начинаются, когда изображение изначально сохраненное с разрешением 72ppi, становится искаженным на ретина-дисплеях. Это проблема на 100% до сих пор не разрешена и дизайнеры ищут пути решения и обхода проблемы.

Один из возможных способов (для ряда случаев) это использование SVSG. Почему вам стоит использовать SVG? SVG отрисовывается как вектор и поэтому оно может масштабироваться для любого разрешения, которое используется на нашем экране, непрерывна выдавая резкость и качество, которое мы заложили в нем не этапе дизайна.

Мы не решим при этом все проблемы; Мы не можем использовать в качестве SVG картинки созданные в пиксельном формате, такие как jpg или png (однако для этого мы всегда можем использовать тег canvas). Но когда речь заходит, о таких вещах как иконки или логотипы - SVG формат оказывается очень полезен. Сегодня я собираюсь познакомить вас с основами работы с SVG, а также продемонстрирую вам как вы может использовать созданный вами в Adobe Illustrator векторный файл в дизайне вашего сайта.

Главное о SVG в Десяти Пунктах

Прежде чем мы приступим, я хотел бы вам дать основную информацию по SVG:

SVG означает Scalable Vector Graphics - Масштабируемая Векторная Графика.
SVG используется в качестве векторной графике в интернете.
XML формат используется для записи информации о векторной графике.
SVG изображения не теряют в качестве когда меняются в размерах или масштабируются.
SVG изображения можно анимировать.
SVG интегрируется с DOM и с ним можно работать с помощью JavaScript и СSS.
SVG изображения можно индексировать, это означает, что если у вас есть текст в формате SVG, то он будет виден поисковикам.
SVG изображения можно распечатать с любым разрешением.
SVG рекомендуется к использованию W3C.
SVG поддерживается всеми современными браузерами, хотя нет поддержки для IE8 и ниже. Можно использовать плагины, для всего что ниже.

Давайте Создадим Несколько Форм в SVG формате

Lines

Начнем с простого. Создадим линию. Мы делаем это записав следующий код в HTML документе.

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

Сначала мы используем тег 'svg', а затем внутри него записываем xml-разметку. Вот что мы здесь задаем:

X1: Координаты первой точки по оси x
Y1: Координаты первой точки по оси y
X2: Координаты последней точки по оси x
Y2: Координаты последней точки по оси y

Поэтому например, если нам нужно нарисовать диагональную линию, мы можем задать для y2 значение 200, и тогда конечная точка опустится у нас на 200, и мы получим диагональную линию. Мы также можем применить к ней стили, и сделать это можно в CSS. Здесь мы используем встроенные стили, но вы можете использовать какой-то дополнительный стиль, если вам хочется.

1	<svg>
2	<line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(0,255,255);stroke-width:10"/></line>
3	</svg>

Окружности

Окружности создаются подобно линиями, за исключением некоторых атрибутов. Тут мы создадим серебристую окружность, с черным контуром и радиусом 50.

1
2	<svg>
3	<circle cx="60" cy="60" r="50" stroke="black" stroke-width="5" fill="silver"/>
4	</svg>

cx и cy - атрибуты, задающие координаты x и y для центра окружности. Если мы их пропустим, то тогда, их значения по умолчанию будут равняться - ‘0’, чтоб приведет к тому, что окружность попадет за пределы страницы. И наконец атрибут ‘r’ - задает радиус окружности.

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

Как вы можете видеть теперь, создавать фигуры формате SVG достаточно просто. Создание прямоугольника - не исключение.

1	<svg>
2	<rect width="200" height="100" style="fill:rgb(0,0,255);stroke-width:5"/></rect>
3	</svg>

Подобным образом, как мы задаем ширину и высоту элементов в CSS, мы также задаем атрибуты для ‘rect’ в svg.

Эллипс

Эллипс создается почти также как и окружность, однако, теперь у нас не один радиус, у нас есть атрибуты для радиусов вдоль оси x и вдоль оси y.

1	<svg>
2	<ellipse cx="60" cy="60" ry="40" rx="20" stroke="black" stroke-width="5" fill="silver"/></ellipse>
3	</svg>

Многоугольники

С многоугольниками чуть сложнее (но только чуть-чуть). Сначала мы задаем для многоугольника цвет заливки, оранжевую обводку и толщину обводки 10. Далее мы задаем атрибуты для точек. Каждая пара координат определяет x и y координаты каждой точки многоугольника. В этом демонстрационном примере я создал звезду.

1	<svg>
2	<polygon fill="green" stroke="orange" stroke-width="10" points="350, 75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161"/><polygon>
3	</svg>

Текст

Как было сказано ранее SVG формат великолепен, потому что текст в нем виден для поисковых машин и они индексируют его - в отличие от таких движков как Flash.

Вот как мы можем добавить текст:

1	<text x="0" y="34" style="font-family: Helvetica,Arial,sans-serif;font-weight:bold;font-size:34; fill :#000; ">webdesigntuts+</text>

В коде выше, вы можете видеть, что мы задали x и y координаты. А затем задали несколько CSS атрибутов, таких как font-family, weight, size и color.

Контуры

Говоря о теге path, на нужно поговорить о ‘d’-атрибуте. Этот ‘d’-атрибут описывает контур, который мы создаем. Каждая команда внутри ‘d’-атрибута, одна из команд-букв со своими параметрами. Команды для ‘d’-атрибута следующие:

M: движение к
L: линия к
H: горизонтально к
V: вертикально к
C: кривая к
S: гладкая кривая к
Q: квадратичная кривая Безье
T: гладкая кривая Безье
A: эллиптическая Дуга
Z: замкнуть контур

Вот пример кода:

1
2	<svg>
3	<path id="path1" d="M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428" style="fill:none;stroke:2;"></path>
4	</svg>

Мы даже можем задать текст, который будет размещаться по кривой:

  
<svg>  	
	<defs>  		
		<path id="path1" d="M160.143,196c0,0,62.777-28.033,90-17.143c71.428,28.572,73.952-25.987,84.286-21.428"></path>  	
	</defs>  
	<text x="0" y="34" fill="black" style="font-family: Helvetica,Arial,sans-serif;font-weight:bold;font-size:22; fill :#000; ">  	
		<textPath xlink:href="#path1">webdesigntuts+</textPath>  	
	</text>  
</svg>

Мы сначала определили контур в теге 'defs' а затем назначили ему Id = 'path1'. Затем мы можем использовать это с текстом задав ему атрибут ‘textPath’.

Создание масштабируемого Логотипа и Иконки в формате SVG

Теперь, когда мы разобрались с основой создания объектов в SVG формате, пришло время перейти к чему-то более сложному. К счастью для нас, это не будет таким сложным, а на самом деле все будет очень просто, за что отдельное спасибо Adobe Illustrator. Для тех из вас кто не знаком с Иллюстратором, ему можно дать такое описание:

Номер один в индустрии пакет для создания векторной графики, используемой в различных средах.

Откройте Иллюстратор и создайте свой логотип или иконку. Почти все профессиональные логотипы создаются в векторном формате,поэтому вы можете спросить его у ваших клиентов. Если нет, то тогда вам придется что-то сделать самому. Если вы не умеете работать в Иллюстраторе, то на Vectortuts+ вы можете найти много ценной информации по этому вопросу.

После того как вы нарисовали свой логотип или иконку, зайдите в "File > Save as", и там выберете "SVG", в выпадающем меню для типа файла. Дайте файлу название и нажмите Сохранить. Должно открыться диалоговое окно для сохранения SVG формата. Здесь вам нужно выбрать "Show SVG code". И тогда у вас откроется код в браузере. Вам просто нужно будет будет скопировать его, и заключить его внутрь тега ‘svg’ в вашем html документе, и это все. Просто не так ли?

Вы также можете использовать Иллюстратор для создания контуров. Просто нарисуйте линию в иллюстраторе, используйте ‘d’-атрибут для данных, как мы описывали ранее. Например для контур, который с создал для текста 'webdesigntuts+' выше, я создал в иллюстраторе, а потом экспортировал в мой документ.

Затем вы можете использовать стили или поменять расположение svg элемента в вашем документе, используя методы CSS. Вы также можете поместить их внутрь тега ‘a’ и создать ссылку, или использовать с ним JavaScript, чтобы добавить больше функциональности.

Заключение

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

Дополнительные Источники

Почему вы не используете SVG? на Nettuts+
SVG основы
SVG анимация в Opera