Как перевести JPG в SVG или PNG в SVG

Чтобы перевести JPG в SVG (или PNG в SVG), изображение трассируют. Программа находит границы между цветами и перерисовывает их векторными фигурами. Браузерный инструмент делает это в один шаг, а бесплатный редактор Inkscape через «Контур» > «Векторизовать растр». Трассировка хорошо работает для логотипов, значков и контурных рисунков и плохо для фотографий.

Что происходит, когда вы переводите изображение в SVG

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

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

Остерегайтесь конвертеров, которые пропускают трассировку. Некоторые инструменты просто заворачивают JPG или PNG в файл SVG и на этом заканчивают. Файл заканчивается на .svg, но внутри те же пиксели, и при увеличении он размывается. Если режущий плоттер, программа для вышивки или лазерный гравер отклоняет ваш «SVG», вероятная причина именно в этом. Чтобы проверить, откройте файл в текстовом редакторе. Если вы видите длинный блок, начинающийся с data:image/png;base64 или data:image/jpeg;base64 и мало элементов path , значит, трассировки не было.

Какие изображения хорошо переводятся в SVG (а какие нет)

Хорошие кандидаты:

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

Плохие кандидаты:

• Фото людей, мест или товаров.
• Изображения с мягкими тенями, градиентами или размытием.
• Маленькие файлы с низким разрешением, где края уже размыты.
• Сильно сжатые JPG с заметными артефактами по краям.

Фотография, трассированная в SVG, выглядит как плакат из плоских цветовых пятен. Файл может оказаться больше оригинала, ведь в нем тысячи крошечных фигур. Для фотографий оставляйте растровый формат, например JPG или WebP.

JPG или PNG: что лучше как исходник?

PNG, если есть выбор. Сжатие JPG оставляет слабые разводы и рябь вокруг резких краев, и трассировщик превращает их в бугорки и случайные точки. PNG того же логотипа имеет чистые края и часто прозрачный фон, который трассируется гораздо лучше. Если у вас есть только JPG, возьмите самую крупную версию, какую найдете, и сначала почистите ее (советы ниже). Наша инструкция о файлах PNG объясняет, почему этот формат сохраняет края нетронутыми.

Как перевести PNG в SVG в браузере

Инструмент PNG в SVG трассирует изображения PNG и JPG с помощью открытой библиотеки ImageTracer. Он работает полностью в браузере, поэтому логотип, над которым вы работаете, никуда не загружается.

1. Откройте инструмент и добавьте PNG или JPG.
2. Запустите трассировку и посмотрите предпросмотр.
3. Если края выглядят зубчатыми или случайных точек слишком много, подготовьте более чистое или крупное исходное изображение и трассируйте снова.
4. Скачайте SVG.
5. Откройте SVG в браузере и увеличьте масштаб, чтобы проверить кривые, прежде чем использовать файл.

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

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

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

Как перевести JPG в SVG в Inkscape

Inkscape это бесплатный векторный редактор с открытым кодом для Windows, Mac и Linux. Его трассировка дает больше контроля. Его собственное руководство предупреждает, что не стоит ждать абсолютно точной копии картинки, и это честное описание трассировки в целом.

1. Откройте Inkscape и импортируйте JPG или PNG («Файл» > «Импортировать» или перетащите его на холст).
2. Выделите изображение.
3. Выберите Контур > Векторизовать растр или нажмите Shift+Alt+B.
4. Выберите режим. Порог яркости создает одноцветный силуэт, что подходит для черных логотипов и подписей. Трассировка по центральной линии превращает тонкие штрихи в одиночные линии, что подходит для рукописного текста. Множественное сканирование трассирует несколько цветов как отдельные слои.
5. Нажмите Применить. Трассированные контуры помещаются поверх исходного изображения.
6. Сдвиньте результат в сторону для сравнения, затем удалите исходный растр.
7. Сохраните через Файл > Сохранить как и выберите формат SVG.

Множественное сканирование дает больше цветовых деталей, но создает много перекрывающихся объектов, которые придется чистить. Начните с меньшего числа цветов и добавляйте больше, только если они нужны.

Как получить более чистую трассировку

Основное качество зависит от исходного изображения. Несколько минут подготовки сильно меняют результат.

• Начните с самой крупной и четкой версии, которую удастся найти. Чем больше пикселей вдоль каждого края, тем плавнее кривые.
• Обрежьте всё, кроме логотипа, с помощью инструмента обрезки, чтобы случайные пометки не превратились в фигуры.
• Уберите или выровняйте фон. Простой белый или прозрачный фон трассируется намного лучше, чем текстурированный.
• Уменьшите число цветов. Для одноцветного логотипа помогает сначала сделать его черно-белым в инструменте оттенков серого и повысить контраст, чтобы трассировщик нашел чистые края.
• Избегайте крошечных исходников. В логотипе шириной 100 пикселей слишком мало информации о краях, и кривые будут выглядеть комковатыми при любом размере.

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

Когда лучше перерисовать, чем трассировать

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

Но прежде всего спросите у автора логотипа исходный векторный файл. AI, EPS, PDF или SVG от дизайнера всегда лучше трассировки. А если вам нужна четкая картинка только одного конкретного размера, может хватить PNG высокого разрешения вообще без конвертации.

Обратное направление намного проще, потому что SVG можно отрисовать в любом размере в пикселях. Об этом рассказывает инструкция о том, как открыть SVG и сохранить его в PNG или JPG.

Частые вопросы