Формат SVG: особенности, преимущества и недостатки.
Loading...Сегодня речь пойдет о формате векторной графики SVG. Что такое векторная графика и чем отличается от растра можно посмотреть тут.
SVG — XML язык разметки на основе векторной графики. По сути это текстовый файл, который является открытым веб-стандартом для описания двухмерных векторных изображений без потери качества при масштабировании. Также поддерживает интерактивность и анимацию. Разрабатывается с 1999 года и используется для того, чтобы описать с помощью языка программирования графические элементы сайта.
Акроним: Scalable Vector Graphics.
Тип изображения: векторный.
Тип сжатия: обычно не сжимается, но может быть сжат без потерь.
Особенности формата .svg
Формат SVG мы упоминали в этой статье, теперь разберем его особенности более подробно:
- размер SVG-файла не зависит от размера или глубины цвета. На вес влияет сложность точек и линий, с которых состоит изображение;
- во время масштабирования не теряет информацию, поэтому заменяет собой несколько вариантов растровых файлов для разных разрешений экрана;
- подходит для печати и индексации поисковыми системами;
- может быть встроен в html-код сайта, а значит, кешируется вместе с ним и загружается быстрее, чем изображения в .png или .jpeg.
Преимущества и недостатки формата .svg
Плюсы:
- масштабируемость без изменения качества — один и тот же логотип будет хорошо выглядеть и на экране смартфона, и на большом экране Retina;
- простота создания: программисты пишут иконки с помощью xml-кода, веб-дизайнеры рисуют более сложные элементы в редакторах векторной графики Adobe Illustrator, Corel Draw, Sketch или Macromedia Freehand;
- малый размер: объекты .svg занимают гораздо меньше места, чем их близнецы, созданные как объекты растровой графики;
- гибкость: при помощи CSS можно изменить параметр графики на сайте, например, цвет фона или позицию логотипа на странице, а при помощи javascript задать анимацию элементов. Также можно отредактировать SVG-файл в графическом редакторе;
- четкая прорисовка деталей и лучший результат печати.
Минусы:
- не поддерживается старыми браузерами — Internet Explorer 8 и старше;
- WordPress воспринимает .svg как вредоносный код, поэтому блокирует отображение. Обойти блокировку можно с помощью плагинов;
- подходит для создания примитивных объектов, которые могут быть описаны простыми фигурами или их частями: окружность, прямая, эллипс, прямоугольник и т.д.
Где использовать?
Обычно .svg используют в дизайне иконок, логотипов и элементов пользовательского интерфейса для веб-сайтов. Но область применения этого формата намного больше. С его помощью можно создавать графики и диаграммы, простую инфографику, масштабируемые дорожные карты, легкие игры вроде судоку или кроссвордов.
Полученные элементы будут без потерь растягивается и сжимается в зависимости от размера экрана, иметь малый вес и отлично смотреться на устройствах с высокой плотностью пикселей.
