Логотип в SVG формате – создайте и скачайте онлайн самостоятельно

Уже давно стало понятно, что пора использовать логотипы в формате svg на своих сайтах и всех фирменных носителях.

Если вам необходимо прямо сейчас создать логотип в векторном формате, не теряйте время на чтение статьи и переходите к нашему конструктору логотипов!

Но по какой-то причине мы все еще видим множество PNG лого (формат растровых графических файлов) в интернете, даже на новых сайтах, созданных в этом году!

Такие вещи, как логотипы и иконки, кажутся главными виновниками.

Полагаю, вопрос заключается в том, почему?

Почему мы до сих пор их используем?

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

Мы собрали 5 основных причин использовать SVG вместо PNG.

SVG, если вы не знаете, - это Scalable Vector Graphics, формат изображения на основе XML для двумерной графики.

SVG поддерживается во всех браузерах, кроме IE 9 и ниже и старого Android (V3).

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

В двух словах:

• Разрешение
• Скорость
• Анимация
• Практичность
• Доступность и SEO

Продолжайте читать, чтобы подробно рассмотреть каждый пункт.

1. Разрешение

Не имеет значения размер вашего экрана, уровень масштабирования, разрешение или наличие или отсутствие дисплея "retina".

SVG - это векторные фигуры, линии, формы и заливка.

Это позволяет добиться «бесконечного разрешения», так же как и при создании иллюстраций для печати, при использовании форм, действуют те же принципы!

Использование PNG означает, что вы ограничены пикселями, а это уже 2001 год.

Кроме того, во многих случаях вам необходимо обеспечить работу с устройствами "retina", что означает наличие двух PNG, один из которых почти всегда имеет абсурдный размер файла.

Эти две иконки ниже могут продемонстрировать проблемы с разрешением, увеличьте масштаб (cntrl +) и посмотрите сами, или просто щелкните правой кнопкой мыши и откройте каждый элемент в новой вкладке.

2. Скорость

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

Как известно, чем больше размер файла, тем медленнее он рендерится/загружается.

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

Большой размер файла = более длительное время загрузки.

SVG - это просто код, что означает очень маленький размер файла.

Бывают случаи, когда SVG могут загружаться очень долго, например, если вы сделали Эйфелеву башню в виде векторной графики с миллионом путей и заливок, в таком случае лучше использовать JPEG… или PNG.

HTTP-запросы: Использование традиционных PNG означает, что, если вы не используете кодировку base64, на изображения придется ссылаться как на внешние ресурсы.

Все эти PNG означают увеличение количества http-запросов и, следовательно, замедление работы сайта.

SVGs не только меньше по размеру, но и XML может быть встроен в HTML, что исключает http-запросы и ускоряет работу сайта.

3. Анимация

SVGs можно анимировать и стилизовать с помощью CSS.

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

Есть случаи, когда вы не можете использовать CSS для анимации SVG, но эти случаи обычно можно решить с помощью JavaScript, посмотрите на snap.svg (библиотека JavaScript SVG для современного интернета).

Это открывает целый мир творчества, когда речь идет о вебе.

4. Практичность

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

Я отношусь к первому лагерю, мне обычно нужны логотипы, иконки и простые анимации в формате SVG.

Логотипы: логотипы обычно создаются в векторном формате, и это правильно.

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

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

Те же факторы применимы и к иконкам.

Графики: Да, графики… SVGs - это отличный векторный формат, которые очень хорошо подходяи для таких вещей, как инфографика и графики.

Анимация: См. пункт 3

5. Доступность и SEO

Google индексирует SVG, и это хорошая новость.

SVG-контент, независимо от того, находится ли он в отдельном файле или встроен непосредственно в HTML, индексируется.

Недостатки:

В интересах справедливости, вот пара моментов, которые следует учитывать при использовании SVGs.

У вас возникнут проблемы при попытке использовать SVGs в старых браузерах, но, несмотря на это, вы можете иметь запасной вариант, например, замену в виде PNG.

Сложные иллюстрации с тысячамидеталей, вероятно, лучше всего подходят для JPEG, браузеры, пытающиеся отобразить сложные SVG, могут «потерпеть поражение».

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