May 29, 2018

Формат SVG: особенности, преимущества и недостатки.

Сегодня речь пойдет о формате векторной графики SVG.

SVG (Scalable Vector Graphics) появился в 1999 году как результат работы W3C консорциума. Задуман и реализован был для того, что б графику, размещаемую на сайте, можно было описать языком, то есть все фигуры, объекты, рисунки в .svg файлах описываются текстово (XML).

Photo marketblog.envato.com

Преимущества и недостатки.

Плюсы:

— малый размер: объекты .svg занимают гораздо меньше места, чем их близнецы, созданные как объект растровой графики;

— гибкость: при помощи CSS можно быстро изменить параметр графики на сайте, например, цвет фона или позицию логотипа на странице. Для этого можно отредактировать файл в любом текстовом редакторе;

— масштабируемость без изменения качества. Это широко используется для устройств с экранами retina и близких к ним;

— просмотреть содержимое файла .svg можно практически любым браузером (IE, Chrome, Opera, FireFox, Safari и т.д.).

Минусы:

— создание достаточно примитивных объектов, которые могут быть описаны простыми фигурами или их частями (окружность, прямая, эллипс, прямоугольник и т.д.);

— очень быстро растет размер файла, если объект .svg состоит из большого количества мелких деталей;

— невозможно прочитать часть графического объекта, только весь объект целиком, это замедляет работу.

Где используется?

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