Читать книгу Основы графического дизайна. О применении векторной графики в веб-дизайне и рекламе. Теоретические лекции - Группа авторов - Страница 16

Принципиально графические форматы классифицируются по типу хранимой графики: пиксельная, то есть растровая графика и векторная графика.

Указанные виды графики моделируются различными алгоритмами для визуализации заданной композиции в воспроизводимом изображении.

Сопоставление форматов SVG и PNG

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

Так в векторном формате SVG вес файла будет минимальным из-за элементарности исходного кода с фигурами описания кнопки, но в сравнимом растровом формате PNG вес файла будет чуть больше, но все равно достаточно оптимальным для использования в веб-разработке.

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

При этом есть существенное преимущество SVG над форматом PNG и другими подобными форматами. Это преимущество позиционировано в самом наименовании формата SVG. Расшифруем его. Scalable Vector Graphics в переводе с английского дословно означает – масштабируемая векторная графика, то есть заданная в векторном изображении композиция при масштабировании с целью укрупнения (детализации) на экране не дает потерь в визуализации диагональных и радиальных фигур и полигонов.

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

В свою очередь формат PNG имеет иное преимущество в возможности воспроизведения множества слоев с полупрозрачными градиентами. Допустим, мы хотим воспроизвести в изображении цветок с десятками лепестков, где отдельные из них темнее у центра и светлее у краев, как бы объемные и полупрозрачные из-за их тонкости, при этом наложить капли на них со свойственной полупрозрачностью и отливом у краев.

Все эти визуальные эффекты возможно воспроизвести в композиции с помощью редактора Adobe Photoshop или Illustrator (на выбор исполнителя), но именно при сохранении для веб-страницы нам потребуется формат PNG с сохранением с галочкой поддержки альфа-канала (в настройках экспорта для веб-ресурсов: Save for web), которая дает возможность отображения полупрозрачных фрагментов слоев сложносоставной иллюстрации с полупрозрачностью и градиентами. Поддержка прозрачности – с помощью опции Прозрачность (Transparency).

В результате дизайна такой красочной иллюстрации получаем значительный вес экспортируемого из графического редактора файла в формате PNG из-за множества эффектов, слоев, градиентов в заданной палитре изображения. А при сохранении того же файла в формат SVG мы получим проблему в воспроизведении сложной графики, т. к. формат предназначен для относительно простой и средней по сложности композиции, но точно не для сложных композиционных иллюстраций с полупрозрачностью слоев и градиентами.

Зафиксируем для себя, что формат SVG полезно использовать для четкого масштабируемого воспроизведения логотипов, элементов навигации в веб-интерфейсе, относительно простых глифов и плоских иллюстраций для веб-страниц.

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