Из этой статьи вы узнает, что такое SVG, почему именно этот формат надо использовать при разработке сайтов и где брать эти картинки…

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

Для тех кто особо не в курсе, что оно такое это  SVG или же слышал вроде, но все равно не ясно до конца, вкратце объясню.

SVG — (расшифровывается как Scalable Vector Graphics), а переводится как масштабируемая векторная графика, а если уж совсем просто, то это такой формат, который позволяет изображениям выглядеть идеально четко (на сколько это в принципе возможно), на ВСЕХ мониторах и экранах. Мы то знаем, что их великое множество, от древних с гигантскими пикселями, до самых распространенных 15 дюймовых ноутбуков, которые чуть ли не у каждого домам, и вплоть до 4k мониторов. К слову еще есть мобильные телефоны, у которых плотность пикселей еще выше. Ах, да, есть еще один гигантский плюс — маленький размер фалов.

Вот давайте глянем на пример:

Вроде как обычная картинка, но она не имеет расширения, да ее можно сделать сколько угодно большой и в качестве она не потеряет, весь секрет в том, что в конечном итоге эта картинка — код. Все SVG картинки основаны на XML, в основе которого двумерные векторы. SVG имеет намного больше общего с интернет страницами, чем тот же png или jpg.

Преимущества SVG над всеми остальными форматами графики:

  • можно сжимать (да, удаляя лишнее можно уменьшать размер файла);
  • можно анимировать;
  • можно редактировать просто правя код css и js;
  • легко создавать;
  • в будущем будет всегда актуален (соответствует стандарту  W3C);
  • не зависит от расширения;
  • поддерживается всеми современными браузерами.

 

Классная штука, да?

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

Я вот, с проблемой размытости столкнулся крайне плотно, после перехода на iMac, на котором экран с расширением 4k (сейчас их пусть и не много, но оно покупаются и со временем процент людей, у которых мониторы с повышенной четкостью будет неизбежно расти. Поскольку это НЕВЕРОЯТНО, лицезреть что угодно в таком качестве, этому вопросу есть посвящена целая статья — о необходимости перехода на 4k, как для дизайнеров, так и для обычных людей.

Ну да ладно такие мониторы, они сейчас не очень распространены, но как быть с планшетами и телефонами, на том же телефоне иконки в png (если они не в 4 кратном размере размещены), выглядят размытыми. А именно в размере 1к1 и делают эти иконки, на обычном ПК мониторе они выглядят хорошо, а на телефоне размыто — и это не разу не круто. SVG же полностью решает эту проблему.

Если кто еще не понял разницы, то вот:

Сравнение форматов SVG и PNG

Слева png справа svg. Думаю понятно что лучше.

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

Следующий вопрос, где брать эти SVG?

Тут все просто, или рисовать в том же иллюстраторе (для гуру еще есть Sketch и Inkscape), искать сразу готовые SVG в том же гугле, вот вам лайфхак, в строке поиска пишите запрос (например «яблоко») и далее пишите filetype:svg это даст гугл понять, что яблоко вам нужно в определенном формате:

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

Ну еще можно выбирать вместо png именно svg, на тех сайтах, с которых вы их скачиваете.

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