Преимущества SVG графики
Из этой статьи вы узнает, что такое 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 же полностью решает эту проблему.
Если кто еще не понял разницы, то вот:
Слева png справа svg. Думаю понятно что лучше.
Есть конечно люди которые противятся прогрессу, и застряли в каменном веке, использую древний ie8. SVG он не поддерживает (он там вообще, мало что поддерживает), но этим людям уже ничем не поможешь, их с каждым днем все меньше, и обращать на них внимание особого смысла нет, хотя если уж очень хочется, то для них можно использовать запасной вариант, скрипт который определит, что человек с эры динозавров и покажет ему графику в PNG.
Следующий вопрос, где брать эти SVG?
Тут все просто, или рисовать в том же иллюстраторе (для гуру еще есть Sketch и Inkscape), искать сразу готовые SVG в том же гугле, вот вам лайфхак, в строке поиска пишите запрос (например «яблоко») и далее пишите filetype:svg это даст гугл понять, что яблоко вам нужно в определенном формате:
Если что, можете добавить эту ссылку в закладки и через нее искать, просто меняя поисковой запрос: поиск svg в гуле.
Ну еще можно выбирать вместо png именно svg, на тех сайтах, с которых вы их скачиваете.
Вообщем, если хотите что бы сайт быстрее грузился, не было лесенок и размытостей на иллюстрациях, то пора использовать SVG. Конечно, не всегда можно подобрать svg картинку для той же фоновой иллюстрации, + они зачастую в плоском стиле, что может не подходить в конкретном случае, но иконки и логотипы — точно надо в SVG добавлять, для них это необходимость.