File Format

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

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

Об .SVG мы также упоминали в этой статье «Форматы графических файлов — JPG, PNG, SVG, PDF», теперь постараемся разобраться более подробно.

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

Photo marketblog.envato.com

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

Плюсы:
— малый размер: объекты .svg занимают гораздо меньше места, чем их близнецы, созданные как объект растровой графики;
— гибкость: при помощи CSS можно быстро изменить параметр графики на сайте, например, цвет фона или позицию логотипа на странице. Для этого можно отредактировать файл в любом текстовом редакторе;
— масштабируемость без изменения качества. Это широко используется для устройств с экранами retina и близких к ним;
— просмотреть содержимое файла .svg можно практически любым браузером (IE, Chrome, Opera, FireFox, Safari и т.д.).

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

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

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

Об авторе kristina.bulgakova

Информация не предоставлена автором

7 комментариев

  1. avatar Наталия

    Большое спасибо, очень качественная статья!

  2. avatar Владимир

    Чем на Linux открыть SVG?

    • avatar Виталий

      Посмотреть можно с помощью браузера. Изменить с помощью Inkscape.

  3. avatar Геннадий

    Где можна узнать CSS-cвойств в SVG ?

  4. avatar Стас

    Супер! Спасибо за статью!

  5. avatar Марина

    Коротко и понятно! Надеюсь на продолжение!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *