Привычные форматы JPG, PNG и GIF чрезвычайно популярны, однако в силу своих особенностей не идеальны, а в ряде случаев просто неприменимы. И специально для таких случаев придуман формат SVG.
Скажем, на так называемых «адаптивных» сайтах категорически необходимы изображения, которые одинаково хорошо выглядят на экранах любой диагонали (читай, независимо от ширины или высоты).
А упомянутые JPG, PNG и GIF в принудительно растянутом/увеличенном виде выглядят очень по-разному и зачастую плохо.
Не пропустите: MP4-видео с GoPro в формат MPEG-2 для Adobe Premiere Pro: как конвертировать
Притом нередко на сайте (в том числе и на нашем) одна и та же картинка может использоваться как в качестве миниатюры поста, так и в качестве полноформатной иллюстрации в этом же самом и/или в другом посте.
Как правило, из одной такой картинки сайт автоматически создает сразу несколько копий разного размера, из которых потом выбирается та, которая лучше других подходит для экрана определенной диагонали (это если в общих чертах).
Таким образом, в библиотеке сайта постоянно должно храниться сразу несколько версий одного изображения, что в наши дни уже не считается решением оптимальным.
Изображение в SVG — векторное
Это означает, что оно может легко масштабироваться (увеличиваться/уменьшаться) без потери качества. То есть, если вернуться к нашему примеру с сайтом, то формат SVG позволяет сохранять на сервере всего одну картинку, которая на разных страницах сайта и на разных экранах выглядеть будет одинаково качественно (в идеале).
Еще одно преимущество технологии Scalable Vector Graphics (SVG) состоит в том, что файлы в этом формате «весят» сравнительно немного. Это дает веб-мастерам некоторую свободу действий, когда возникает необходимость что-то изменить в таких файлах.
Более того, некоторые изменения можно вносить непосредственно в редакторе CSS, что очень удобно.
В качестве примера использования SVG можно привести вот эту работу известного блогера Terence Eden, который в рамках эксперимента добросовестно перевел в этот формат логотипы крупнейших Интернет-компаний.
Как видим, «вес» каждого лого составляет менее 1 килобайта, а у некоторых — так и менее половины килобайта. Так, стандартный логотип Twitter в PNG весит 20 килобайт, а в SVG — всего 397 байт.
Именно поэтому, в SVG на сайтах очень часто сохраняются логотипы, кнопки и различные иконки. А вот для фотографий и рисунков, в особенности тех, на который изображены сразу несколько объектов, SVG подходит хуже (или не подходит вовсе).
Теперь, собственно, о том, как перевести JPG, PNG или GIF в формат SVG
Сразу отметим, что далее речь пойдет об онлайн-сервисах, которые очень удобно использовать для конвертации файлов в оперативном режиме. Информацию о профессиональных программных инструментах для работы с векторной графикой (Adobe Illustrator, Inkscape, LibreOffice Draw и пр.) вы без труда найдете в Сети.
Онлайн-конвертеров нынче тоже хватает. Но, как оказалось, когда дело касается качества преобразования, то их ассортимент резко сокращается. И что самое неприятное, это выясняется не сразу и сугубо методом проб и ошибок.
Тем не менее, намедни озадачившись вопросом поиска онлайн-сервиса для конвертации логотипа из PNG в SVG и после целенаправленного тестирования почти трех десятков нагугленных конвертеров, для себя мы составили небольшой список наиболее подходящий (на наш взгляд) ресурсов:
- Aconvert — принимает как готовые файлы с компа, так и URL-ы картинок. Доступна опция изменения разрешения изображений. По факту конвертации логотип в SVG получился в достаточной степени качественным, но «весит» вдвое больше, чем исходник в PNG.
- Vector Magic — сервис платный. Предусмотрена онлайн-версия ($7.95 в месяц требуется регистрация) и Windows-приложение (на том же сайте предлагается за $295). Предусмотрены автоматический и ручной режимы. Эксперименту ради воспользовались онлайн вариантом Vector Magic. И надо сказать, что он приятно удивил своим функционалом и качеством конечного результата (понравилась возможность сравнивать полученное изображение в SVG и исходник и выбирать качество конечного SVG файла).
- Vectorizer — сервис бесплатный и особо интересен тем, что в нем кроме всего прочего имеется также функция автоматического редактора и Wizard, в котором можно устанавливать параметры конвертации. И после настройки Vectorizer начала выдавать SVG-файлы, которые были в среднем на треть легче, чем исходники в PNG при равном качестве изображений.