Традиционные форматы изображений, такие как JPG, PNG или GIF, очень популярны, но они имеют недостатки, которые делают их использование далеко не идеальным для определенных приложений.
Например, если вы создаете адаптивный веб-сайт, вы хотите, чтобы изображения выглядели хорошо, независимо от ширины и высоты, в которой они отображаются. Традиционные изображения выглядят плохо, например, когда вы слишком сильно их увеличиваете.
Возможно, вам также потребуется отобразить изображение в разных размерах, например, в виде миниатюры на главной странице блога и в качестве изображения в полном разрешении в связанной статье.
Несмотря на то, что вы можете создавать разные версии одного изображения для выбора наиболее подходящего, это означает, что вам нужно больше памяти для этого, помимо прочего.
Формат изображения SVG - векторный формат. Это означает, что его размер может быть уменьшен или увеличен без потери качества (масштабируемость). Это замечательно, если вам нужно отобразить изображение в нескольких местах, используя разные разрешения.
Другие преимущества SVG заключаются в том, что его размер обычно намного меньше, и что он дает веб-мастерам некоторую гибкость, когда дело доходит до внесения в него изменений, поскольку некоторые из них могут быть сделаны непосредственно в CSS.
Один пример: Теренс Иден воссоздал логотипы популярных интернет-компаний, таких как Twitter, Amazon, WhatsApp, YouTube или Reddit в SVG. Размер логотипов был уменьшен до 1 килобайта, иногда до 200 байт. Например, логотип Twitter в формате PNG имеет размер 20 килобайт, а версия SVG - 397 байт.
SVG - это хороший формат для логотипов и значков, но он не очень подходит для фотографий и других типов изображений, которые показывают множество различных объектов.
Преобразование в SVG
Это руководство концентрируется на приложениях, которые вы можете использовать для прямого преобразования изображений в SVG. Это не учебник по использованию приложений, предназначенных для создания векторной графики с нуля. Для этого вы можете использовать редакторы векторной графики, такие как Adobe Illustrator (наши ссылки на политику Adobe отсутствуют), Inkscape или LibreOffice Draw.
Доступно множество бесплатных конвертеров, которые вы можете запустить онлайн, но они довольно ограничены, когда дело доходит до процесса конвертации. Хотя их может быть достаточно для преобразования простого логотипа, доступного в формате png или jpg, в svg, результаты в большинстве случаев не очень хорошие.
Вот как я оценил услуги: я скачал логотип Ghacks и попробовал конвертации на нескольких десятках конвертеров SVG. Я оценил результат и отказался от любой услуги, которая не давала хороших результатов.
- Aconvert - служба принимает в качестве входного файла локальный файл или URL. Единственная опция, которую он предоставляет, - это изменение разрешения изображения. Полученное изображение выглядело как логотип Ghacks, но его размер почти вдвое превышал размер логотипа в формате PNG.
- Vector Magic - Доступен в качестве онлайн-конвертера и настольной программы для Windows. Однако это не бесплатно (онлайн стоит 7, 95 долларов в месяц, настольная версия - единовременный платеж в размере 295 долларов). Тем не менее, результаты онлайн-издания великолепны, и вы получаете множество опций для редактирования или изменения настроек, а также параллельное отображение исходного изображения и svg-копии.
- Vectorizer - еще один бесплатный сервис. Этот поставляется с мастером, который вы можете выбрать лучшие выходные параметры (размытие, цвета), или вы можете установить их напрямую. Результаты были хорошими с некоторыми изменениями, и размер полученного изображения был на треть меньше, чем оригинальный логотип PNG.
Теперь вы: знаете другой онлайн-сервис или программу для конвертации изображений в формат SVG?
