Кратко я уже упоминала, что такое векторная графика, рассказывая о бесплатных SVG иконках. Но, так как тема эта становится все более популярной, то имеет смысл разобрать ее подробнее.
SVG (от англ. Scalable Vector Graphics) — это специальный язык разметки масштабируемой векторной графики, предназначенный для описания двумерной векторной графики. Ключевое слово здесь — масштабируемой. То есть, это тот самый инструмент, который позволяет как угодно изменять размер картинки без потери ее качества. Что, как известно, с обычными растровыми картинками не прокатывает.
Кроме масштабируемости, SVG обладает рядом очень полезных свойств:
- При помощи Javascript и CSS можно задать картинкам анимацию и стили. Например, менять фон, прозрачность, размытие, а также свойства границы рисунка.
- Редактирование изображения как в текстовом, так и в графическом редакторе. Например, в Adobe Illustrator есть возможность сразу сохранять картинку в формате SVG.
- Картинку можно распечатать в любом размере.
- Маленький вес SVG картинок. Они гораздо легче растровых изображений.
- Формат SVG поддерживается большинством современных браузеров.
Что самое примечательное, простые фигуры можно изобразить вообще без каких либо картинок. Например, окружность можно задать прямо в коде веб-страницы:
<svg>
<circle cx="150" cy="150" r="100" fill="rgb(255,255,255)" stroke-width="5" stroke="rgb(255,0,0)"/ >
</svg>
Здесь тег circle дает указание браузеру нарисовать круг диаметром 100 пикселей на расстоянии в 150 пикселей сверху и слева от экрана (cx и cy — это координаты центра круга). Кроме того, здесь же, в режиме rgb, задан цвет круга (255,255,255 — белый) и цвет и толщина границы круга (255, 0, 0 — красный, 5 пикселей).
Это самый простой пример. Простые фигуры, такие как: круг, прямоугольник, эллипс или многоугольник, рисуются достаточно легко. Но прелесть SVG графики в том, что с ее помощью можно нарисовать довольно сложные объекты. И таких готовых объектов уже создано множество. В первую очередь это, конечно же, иконки. Сейчас существуют целые библиотеки таких картинок, которые можно подключать к сайту и использовать, как ту же библиотеку jQuery. Например, Snap.svg. Очень удобно.
Есть также и просто подборки уже готовых картинок, например на iconmonstr.com, flaticon.com или freepik.com. Или уже готовые анимированные изображения Animated SVG Icons.
Как я уже говорила, редактировать SVG изображения можно даже в текстовом редакторе. Вот, например, типичная картинка иконки поиска:
Если открыть файл SVG этой картинки в текстовом редакторе, то можно увидеть следующий код (приведен лишь фрагмент):
<svg>
<path d="M460.488,387.166l-117.09-117.09C392.051,169.175,318.504,50,204.959,50
c-84.686,0-153.584,68.898-… />
</svg>
Выглядит мудрено, но на самом деле здесь рисунок задан тегом path, формула которого расписана дальше обычным набором цифр. Изменяя значения, можно редактировать картинку как угодно.
Это, конечно, грубый пример, так как никто не станет ковыряться в этих циферках, чтобы изменить картинку, но подкорректировать вполне возможно. Хотя гораздо проще и нагляднее все это делать в графическом редакторе вроде Adobe Illustrator. Суть в том, что такая запись весит гораздо меньше, чем, если бы, картинка была нарисована в формате jpg, png или gif. Ну и о масштабируемости на забываем тоже. Мы можем менять ее размеры как угодно без потери качества, чего не скажешь об обычных графических форматах.
Еще много полезных инструментов по SVG формату можно найти в статье Best of SVG 2014: Icons, Tools and Resources.
