SVG, PNG или JPG, вот в чём вопрос…

2018 год — Модный, стильный и прогрессивный год дизайна, не так ли? Ещё в 2010 году разработчики не задумывались и выбирали для своего логотипа текстовой формат или же графический, разрешения JPEG или PNG. Однако не так давно многие пересмотрели свою точку зрения с вошедшим в моду «SVG», это новый вид который используется веб-мастерами и дизайнерами.

Так что же такое SVG и с чем его «едят»?
SVG — это разметка масштабируемой векторной графикой, который является расширением старого доброго XML языка. Суть SVG в том, что он не только поддерживает такую же прозрачность как в PNG, но и выделяется среди всех высоким качеством при любых разрешениях экрана! Да-да, вы не ослышались, SVG будет отлично выглядеть как на мобильном телефоне, так и на мониторе разрешения 1920x1080, его качество не портится, ведь по факту SVG это не картинка — а код :).

Плюсами SVG является то, что он не «пикселится» на экране, пиксели в нём в принципе словно «Отсутствуют», его качество не портится, а изменять цвета можно редактировав SVG файл в обычном редакторе типа Notepad++. Это позволяет не только редактировать его без графического редактора, но и возможность в любое время сменить стилистику (цвет) сайта вместе с логотипом, ведь SVG это по факту ещё и CSS стиль.

Сравним PNG и SVG.
Оба формата поддерживают прозрачность и имеют неплохое качество, хотя SVG в нём выигрывает, помимо этого SVG не «пикселится», а так же является кодом, который всегда и везде возможно редактировать, даже в консоли браузера зайдя в CSS, разве не классно? Но, не спешим торопиться.

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

Тем самым если Вам настолько важна загрузка сайта (а она важна) — не стоит пихать все картинки SVG форматом.

Если же говорить о JPEG — то использовать его отлично если нужно сжимать изображения, ведь он отлично сжимается, но если Вам нужны прозрачные элементы, качество — забудьте о данном формате, используйте его для картинок публикаций на Вашем сайте, там он отлично подойдёт :)

А что, если мне нужно разработать сайт для экранов с разными разрешениями, в том числе и с 1920 на 1080, но SVG мне не подходит?

Ответ прост: используйте PNG, он так же отлично подойдёт, так как имеет высокое качество, а так же поддерживает прозрачность.

Вывод.
Если Вы действительно хотите следовать тренду и иметь красивый сайт — используйте SVG формат как минимум для логотипа, это сделает его более приятным, красивым и подчеркнет Ваш проект. Но! Не пихайте его везде — это увеличит время загрузки Вашего сайта, а анимации SVG формата — могут не поддерживаться на старых ОС Android и старых браузерах на подобии IE, что сделает логотип «не рабочим».

Удачи в Ваших начинаниях!