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

SVG — векторный формат изображения на основе XML для 2D-графики, который поддерживает интерактивность и анимацию. Разрабатывается с 1999 года. Задуман и реализован для того, чтобы описать с помощью языка программирования графические элементы сайта.

Акроним: Scalable Vector Graphics.

Тип изображения: векторный. 

Тип сжатия: обычно не сжимается, но может быть сжат без потерь.

Особенности формата .svg

Формат SVG мы упоминали в этой статье, теперь разберем его особенности более подробно:

  • размер SVG-файла не зависит от размера или глубины цвета. На вес влияет сложность точек и линий, с которых состоит изображение;
  • во время масштабирования не теряет информацию, поэтому заменяет собой несколько вариантов растровых файлов для разных разрешений экрана;
  • подходит для печати и индексации поисковыми системами;
  • может быть встроен в html-код сайта, а значит, кешируется вместе с ним и загружается быстрее, чем изображения в .png или .jpeg.
img_668

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

Плюсы:

  • масштабируемость без изменения качества — один и тот же логотип будет хорошо выглядеть и на экране смартфона, и на большом экране Retina;
  • простота создания: программисты пишут иконки с помощью xml-кода, веб-дизайнеры рисуют более сложные элементы в редакторах векторной графики Adobe Illustrator, Corel Draw, Sketch или Macromedia Freehand;
  • малый размер: объекты .svg занимают гораздо меньше места, чем их близнецы, созданные как объекты растровой графики;
  • гибкость: при помощи CSS можно изменить параметр графики на сайте, например, цвет фона или позицию логотипа на странице, а при помощи javascript задать анимацию элементов. Также можно отредактировать SVG-файл в графическом редакторе;
  • четкая прорисовка деталей и лучший результат печати.

Минусы:

  • не поддерживается старыми браузерами — Internet Explorer 8 и старше; 
  • WordPress воспринимает .svg как вредоносный код, поэтому блокирует отображение. Обойти блокировку можно с помощью плагинов;
  • подходит для создания примитивных объектов, которые могут быть описаны простыми фигурами или их частями: окружность, прямая, эллипс, прямоугольник и т.д.

Где использовать?

Обычно .svg используют в дизайне иконок, логотипов и элементов пользовательского интерфейса для веб-сайтов. Но область применения этого формата намного больше. С его помощью можно создавать графики и диаграммы, простую инфографику, масштабируемые дорожные карты, легкие игры вроде судоку или кроссвордов.

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

Создавайте свой дизайн сейчас

Приступите к разработке своего фирменного стиля прямо сейчас. Введите название своей компании — и всего через минуту логотип будет у вас! Попробуйте сами! Нет ничего проще!

Хотя бы 3 символа в длину.