Несмотря на то, что ведущие веб-дизайнеры назвали текущий год годом формата SVG, до сих пор у многих остаются некоторые вопросы. Собственно, а почему именно SVG, почему именно сейчас (2018), каким же образом он должен себя проявить, зачем и … прочее, и прочее. Иными словами, сам факт такого явления и тренда есть, но понимания значения и смысла, в большинстве – нет. Между тем известно, что в действительности SVG использовался в веб-дизайне давно в разной степени частотности, и частенько был более востребован, чем любой другой формат векторной графики. Но так уж складывается в мире, что рано или поздно у какого-либо явления наступает пик популярности, известности. Вот и считается, что в 2018 как раз и наступит пик развития и применения SVG в интернет-пространстве.
Формат SVG удобен, если создается единый проект для пользователей с дисплеями высокого и обычного разрешений. Тогда, для того чтобы графика быстро загружалась в нужном качестве, без SVG обойтись трудно. Хотя переход на него… не может стать слишком уж трудным. Не потребуется менять уже те изображения, что есть. Необходимо только добавить новые в этом самом формате.
Но стоит ли оно того, чтобы затрачивать на это время и силы? Нужно ли для каждого проекта веб-дизайна применять SVG и если «да», то как? Вот сегодня и поговорим немного об этом формате, как и ранее разбирали тоже весьма удобные и не менее используемые WebP и WebM.
SVG и интернет
Если коротко, то по описанию Mozilla, SVG – это язык, описывающий векторные изображения, похожий на HTML для описания контента, только в данном случае происходит разметка элементов фигур и их эффектов. Удобство же использования формата заключается в том, что в обычном блокноте можно расписать некое простенькое изображение, а для более сложного использовать придется уже Adobe Illustrator или Photoshop. Если говорить об отображении их на страницах, то в наши дни уже все последние версии браузеров поддерживают работу с форматом.
Красиво и легко, правда? Но в реалии работа с SVG может стать достаточно долгой и сложной. А представьте себе, что кто-то до сих пор пользуется старыми версиями Windows или браузеров – тоже задачка не из простых.
Мы не станем рассказывать подробно, как работать с SVG на практическом уровне, мы немного углубимся с общую тематику. И да, Photoshop мы немного затронем, но несильно, а примеров дизайна и того будет мало.
Зачем веб-дизайнеру SVG?
С SVG дизайнер может делать много разных интересных вещей. Создавать логотипы, фоны с текстурами, анимированные иконки или изображения, статические иконки. Да и вообще, любое изображение на сайте можно сделать в SVG формате, если допустимо заменить его векторным и тем самым не использовать вообще форматы PNG, JPG, GIF. В таком случае качество картинки будет невероятно красивым вне зависимости от того, какое разрешение имеет экран монитора у пользователей.
Например, проект onedesigncompany целиком и полностью используют SVG для иконок, логотипов, создания анимации на домашней станице. При этом обратите внимание на то, как быстро загружается сайт и каждая станица в отдельности. Даже при больших скоростях интернета разница со среднестатистическим сайтом заметна в разы.
Сайт bjango обладает интересным анимационным меню в верхней части страницы. Создано оно также с помощью SVG + CSS. Выглядит приятно, ненавязчиво.
Если говорить о фонах и текстурах, то стоит обратить внимание на cleverbridge, где и логотип, и фоны, и стрелочки созданы в SVG. Интересны также проекты authenticff, mepally, pixels, momkai., amoracoffee, creddy и многие другие (на том awwwards их более 700).
Таким образом, этот формат уже используют и давно, но не слишком-то дизайнеры «кричат» об этом, не акцентируют на этом внимание. И это правильно с одной стороны, ведь задача веб-дизайнера и верстальщика сделать сайт удобным, работоспособным и быстрым, а каким средствами – пользователей уже мало заботит.
Правила практики SVG
Благодаря масштабируемости и независимости от разрешения есть огромный шанс того, что все большее количество дизайнеров станет использовать SVG в свой работе. И это огромный плюс, ибо все изображения на сайте всегда будут выглядеть одинаково.
Кроме того, он удобен в работе и прост, даже рабочий процесс не потребуется изменять. Исключение все же есть. Photoshop не предназначен в полной мере для работы с SVG форматом, да и вообще с вектором. И это даже при том, что в последней версии работа с Пером и векторами была пересмотрена. Можно экспортировать в вектор, можно вставить в PSD вектор, но полноценную работу с ним не произвести. Для этого все же удобнее использовать Illustrator.
Хотя в любом из вариантов приходится иногда (с последними версиями Photoshop уже не требуется) немного вычищать готовый код. Существует целая международная база-учебник по SVG на русском языке (и не только), где об этом подробнее рассказывается. Поэтому все основные моменты работы с кодом и программным языком, описывающими изображение, там точно найдутся.
Если же рассматривать Photoshop детальнее, то пример вставки готовых SVG-файлов приведен нами ниже. Многие постоянные читатели вспомнят наши прошлые материалы и, в частности, дизайн лендинга tajem, в котором используется много интересного и есть место для дополнительных идей и украшательств разного рода. Вот и иконки SVG здесь также присутствуют, поэтому видеть их можно в реальности.
Отдельно они находятся в дополнительной папке к PSD, а в сам документ вставляются с помощью Файл -> Поместить связанные или Поместить встроенные. Затем можно отрегулировать при желании размер. Наложить какие-то эффекты дополнительные.
Также начиная с Photoshop СС 2017 можно просто выбирать Файл -> Открыть и выбрать SVG.
Если у нас есть готовое изображения и есть желание в Photoshop создать SVG, то переходим в Файл -> Экспортировать как. Ждем, когда прогрузится диалоговое окно и из списка справа выбираем формат SVG. А если окно не загружается, то версия торрент эдишен «кривая» и урезанная автором сборки. Серьезно! Придется искать иную.
Сравнение трех результатов по размерам.
Преимущество же SVG перед PNG, в данном случае, в масштабируемости и качестве.
Любовь к SEO
Но, кроме того, что SVG предлагает улучшенное качество самой картинки, у формата есть несколько бонусов, ориентированных на поисковые системы. Сам файл состоит из форматированного текста, а это значит, что поисковые системы могут его читать аналогично тому, как читают код страниц сайта.
Таким образом, с помощью SVG можно создавать более удобные для поиска изображения и загружать их на сервер. Google проводит индексацию таких файлов, даже если те встраиваются внутрь кода HTML. В этом, несомненно, есть свое преимущество, особенно на фоне того, как много сайтов появляется в интернете по всему миру ежедневно. И неважно: новая информация на них или нет. Быть известными и фигурировать в поиске на 1-2 странице хочется всем.
SVG и простой контент
В отличие от многих иных векторных форматов, которые также могут похвастаться быстротой загрузки, SVG состоит из чистого кода. Кода короткого, понятного, простого (см. выше).
Если вы видите SVG невообразимых размеров, удостоверьтесь в том, что именно вы сохранили, какое изображение. Например, формат PNG может увеличиваться в размере при добавлении прозрачности, но SVG растет от количества слоев, путей и заливок в изображении (цветности). Поэтому обычно его и используют для простых небольших рисунков (логотипы, иконки, кусочки текстуры, что будет потом размножаться на самой станице в зависимости от её размера). Если все же SVG имеет большой размер, то попробуйте экспортировать в другой удобный формат.
Возможно, сейчас кто-то подумает, что мы противоречим сами себе: говорим о повсеместном использовании и тут же говорим об изменении формата. Но многие дизайнеры все равно будут использовать и используют сейчас в одном проекте разные форматы, удобные для каждого отдельного случая. Другое дело, что SVG станут чаще применять и реже им пренебрегать. Но отказываться от привычных PNG и JPG с GIF никто не планирует и не говорит об этом даже. Не думает.
Анимация SVG
Наверное, не найдется таких форматов векторной графики, что способны одновременно работать со статическими элементами и динамическими, как это делает SVG. И веб-дизайнеры этим отлично пользуются, поскольку не нужно создавать увесистые GIF или MP4.
Ресурсы интернета для работы с SVG
Создавать самому SVG, анимации или статики, конечно, дело хорошее и творческое. Но ведь кому-то это удается лучше и быстрее. К тому же не всегда сам представляешь, что именно создать, а если находишь уже готовое, то понимаешь: «ага, что-то похожее уже есть».
SVG Icons Animated представляет набор анимированных иконок погоды. При этом существует в открытом доступе и код HTML и CSS.
SVG CSS3 Menu / Burger Button – очень занятная интерактивная иконка меню-гамбургера. По ней действительно можно кликнуть в окне предпросмотра.
Виджет с часиками – интересное решение и работает правильно. Код даже сгенерирован и на JS.
В целом же на ресурсе codepen можно найти множество SVG файлов, даже надписи, формы и прочее.
Также на Freepik представлены некоторые интересные материалы, коллекции (платные и несколько бесплатных) иконок и картинок на svgstudio.
flaticon предлагает подборку векторных иконок, с возможностью скачать в нужном формате, а также выбрать цвет. Можно бесплатно скачать, можно с подпиской.
pixabay предлагает в SVG (и не только) загружать изображения с рамочками, птичками, растительными элементами, бабочками и пр. Точнее говоря, более сложные по рисованию картины.
all-free-download тоже предлагает сложные векторные изображения в SVG, но уже цветные и даже более сюжетные, композиционные. В архиве будут находиться два файла: JPG и SVG около 800КБ уже. Выше мы пояснили, почему такой большой размер.
Сложные анимации и взаимодействия
Если требуется создать обычный статический файл, то сделать это в векторном редакторе или в Photoshop несложно. Даже простую анимацию можно создать. Но если нужно сделать что-то действительно усложненное, то возникает необходимость подключения JS-библиотек (наподобие тех, что используются для работы с виртуальной реальностью и созданием сайтов панорамными экскурсиями).
Bonsai.js – легкая библиотека и быстрая. Пара строчек кода JS снабдит элементы анимацией за пару секунд. Существует демо-режим с большим набором возможностей и просмотром кода.
Raphael.js – также предлагает набор инструментов для работы со сложной векторной графикой на базе VML.
Snap.svg – простая библиотека для того, чтобы именно что поучиться в работе с векторами в интернете.
Выводы
Вот некоторые особенности формата SVG и причины, по которым популярность графических файлов растет из года в год. Соответственно, становится более понятно, почему же именно текущий год считается пиком развития и известности SVG.
Если пользователи используют дисплеи с высоким разрешением или проект создается для таких экранов, то, разумеется, что векторные изображения становятся приоритетными. Можно будет забыть о пикселизации и наслаждаться гладкими и ровными линиями, плавными градиентами. Что уж говорить об эстетике логотипов и иконок, фонов, анимации. Быстрая загрузка, малый размер и легкость в обучении и изучении.
SVG действительно удобный формат для использования в веб-дизайне и многочисленные примеры готовых проектов яркие и наглядные тому подтверждения.
