Перевод логотипа в векторный формат SVG

Перевод логотипа в вектор
13 июля 2021 г.
2620 просмотров

Растровый логотип в формате PNG или JPG (до сих пор в Интернете встречаются и такие логотипы) не целесообразно использовать на сайте. Растровый логотип при уменьшении или увеличении теряет четкость. Это видно, если открыть сайт на устройствах с разным расширением экрана.

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

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


Почему на сайте лучше использовать логотип SVG, вместо PNG или JPG

Разница между PNG и SVG представлена на картинке ниже. PNG (растровое изображение) при масштабировании образует размытые края. Появляются пиксели (квадратики). Искажаются цвета. Логотип становится не читаемым.

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

Сравнение логотипа PNG и SVG
Сравнение логотипа PNG и SVG.

Чтобы логотип был четким при просмотре с разных устройств, переводим в векторный формат — SVG. Файл в формате SVG (Scalable Vector Graphics) — это векторное изображение, не теряющее качества при масштабировании. Уменьшайте или увеличивайте изображение сколько угодно раз, при этом качество логотипа будет неизменно четким.

Почему логотип SVG четкий, а PNG нет

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

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

Логотип в векторе сохраняется по слоям
Логотип в векторе сохраняется по слоям.

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

Правда ли SVG быстро загружается

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

Недостаток SVG

Недостаток один — формат SVG не поддерживается устаревшими и давно не обновленным браузерами. Пример, браузер Explorer 8 и ниже. То есть при просмотре сайта с древнего браузера логотип SVG не отобразится. Однако, этот недостаток выходит из внимания, понимая, что 95% пользователей ПК пользуются обновленными браузерами.

Причины и преимущества использовать логотип в векторе

  1. При масштабировании сохраняет пропорции, четкость и насыщенность цвета.
  2. Редактируется, из-за чего логотип не нужно каждый раз отрисовывать заново.
  3. Низкий вес SVG относительно PNG и JPG.
  4. Быстрая загрузка изображения на сайте.
  5. Возможность использовать векторный логотип в полиграфии и веб-файлах с сохранением качества.

Теперь рассмотрим следующий логичный вопрос: почему перевод логотипа в SVG лучше заказать у профессионального дизайнера, а не искать экономное решение.

Почему логотип в SVG лучше заказывать у дизайнера

Для перевода png логотипа в SVG не используйте онлайн-конвертеры, потому что рискуете получить нередактируемое изображение. Логотип выгружается одним слоем и одним цветом, далее не поддается правкам. К тому же, если JPG или PNG исходник мелкий, то конвертер гарантировано выдаст мыльное изображение.

Сотрудничая с опытным дизайнером вы получите качественный и редактируемый логотип. Стоимость перевода логотипа PNG/JPG в вектор SVG — 1500р. Средний срок – 1 рабочий день. Как правило, наш дизайнер укладывается в срок. Если на перевод логотипа потребуется больше времени из-за проработки многих деталей, то мы согласовываем это с заказчиком. В будущем логотип можно использовать в любом масштабе с сохранением качества для: сайта, веб-файлов и полиграфии различного типа. Обычно наш дизайнер укладывается в этот срок.

Для понимания, на картинке ниже:

  • Слева — результат перевода логотипа через популярный онлайн-конвертер;
  • Справа — работа нашего дизайнера. Разница очевидна.
Сравнение логотипа в конвертере и работа дизайнера
Сравнение логотипа в конвертере и работа дизайнера.

Еще одна причина не использовать конвертеры: в логотипе добавлены мелкие и цветные детали, наложенные друг на друга. Онлайн-конвертер точно не справится, потому что не отличает детали. Конвертер видит крупные элементы и кое-как переводит в SVG. Итог: на картинке выше — логотип слева. Исправить такой результат невозможно. Лучше доверьте отрисовку логотипа в SVG профессиональному дизайнеру. Вы получите четкий логотип в формате SVG, как логотип справа на картинке выше.

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

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

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

Напишите нам info@wiserv.ru, чтобы узнать точную стоимость, срок
и договориться о выполнении работы.

Перейти к статьям категории Сайты
Хотите первым узнавать о новых статьях, акциях и скидках?
Подписаться
Подписывайтесь! Рассылка 2 раза в месяц
Нас читают уже 102 подписчиков