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

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

Что такое SVG, сложности в использовании

SVG (Scalable Vector Graphics) - технология, с помощью которой на сайтах описывается векторная графика. Посредством SVG можно создавать анимацию, векторные и смешанные изображения, текст.

Разбиение IT-сферы на разработчиков и дизайнеров приводит к тому, что не все идеи могут быть реализованы версткой. Формат SVG с одной стороны помогает веб-дизайнерам и разработчикам понимать друг друга, а с другой - необходима возможность использовать SVG в продукте, а это не всегда просто. Нужно изменять технологические параметры, а также позаботиться об экспорте SVG из использующихся дизайнером редакторов.

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

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

Зачем веб-дизайнеру нужен SVG

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

Причина 1. Масштабируемость

В отличие от растровой графики, векторные изображения не теряют в качестве после увеличения.

Растровые изображения состоят из пикселей, поэтому при увеличении такие картинки получаются зернистыми и размытыми, так как пикселей фиксированное количество. Векторные же состоят из геометрических фигур - кривых, линий, кругов и прочее. Гибкость таких изображений позволяет изменять размеры и другие характеристики (заливка цветом, форму) без потери качества.

Причина 2. Простота изменений

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

Причина 3. Возможность использования анимации

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

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

Причина 4. Быстрота загрузки

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

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

Причина 5. Влияние на SEO

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

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

Примеры SVG на веб-сайтах

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

Иллюстрации

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

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

Иконки

Чтобы выделить какие-то преимущества компании, показать цикл работ или выделить основные услуги часто используются иконки. Традиционно используется векторный формат, чтобы на различных устройствах маленькие картинки не теряли качество и адаптировались под размер экрана.

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

Текст

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

Здесь надпись представлена как SVG-изображение, которое состоит из линий вперемешку с геометрическими вставками.

Декоративные элементы

Волнистые линии, геометрические фигуры и формы часто представляют с помощью SVG.

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

Еще один пример - виджет часов, также выполненный с помощью SVG.

Можно добавить анимации с помощью JavaScript и придать динамичности веб-странице.

Логотипы

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

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

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

Создание SVG: графические редакторы, возможности кода

SVG создают как с помощью графических редакторов (и сохраняют в формате .svg), так и описывают посредством кода. Для этого существует специальный парный тег <svg>. Вот как это выглядит в коде веб-страницы:

Для создания SVG-изображений используются редакторы, которые имеют возможность работать с вектором, например:

• Adobe Illustrator;
• Adobe InDesign;
• CorelDRAW;
• Inkscape и прочее.

После создания изображения желательно его оптимизировать для быстрой загрузки и правильного внедрения на сайт. Для этого делают следующее:

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

Можно обойтись без графических редакторов и создать SVG с помощью кода. Элементы (фигуры, картинки, текст) вставляются в тег <svg>. Создадим простой круг:

<svg height="450" width="450">
<circle r="150" cx="50%" cy="50%" fill="orange">
</svg>

Тегом мы обозначаем фигуру с характеристиками: радиус, положение центра окружности относительно оси X и Y, цвет. Получается такая фигура:

Таким образом рисуются простые иллюстрации, иконки и другие изображения: фигуры накладываются друг на друга, прописывается позиционирование и другие характеристики каждого элемента. Например, для многоугольников используется тег <polygon>, для прямоугольников - <rect> и так далее.

Внедрение SVG в HTML

Внедрить SVG на веб-сайт можно различными способами. Рассмотрим самые используемые из них.

Inline (<svg>)

Это тег , о котором говорилось выше. Подходит для простых фигур и картинок. Изображение рисуется прямо в HTML коде. Можно применять CSS-стили (немного отличаются от стандартных, для применения уточняйте наличие в спецификации) и анимацию. Сам тег характеризуется шириной, высотой и уникальным идентификатором id.

Плюсы данного метода - не нужно подгружать дополнительные файлы, можно многократно использовать один и тот же элемент, менять нарисованную графику с помощью стилей и анимировать.

Как изображение

Для более сложных фигур и иллюстраций используют тег <img>. Для этого нужно сохранить файл в формате .svg через специальный графический редактор или конвертер. Пример вставки тега в HTML:

<img src="img/circle.svg" alt="Circle in IdBi" height="300" width="250">

В папке img мы храним изображение круга в формате .svg, задаем изображению высоту и ширину, а также вспомогательный атрибут alt для тех пользователей, у кого не загружаются изображения в браузере.

Также можно загрузить SVG-файл как фоновое изображение. В HTML картинка вставляется как обычный блок:

<div class="imageSvg"></div>

А потом меняются стили:

.imageSvg {
background-image: url("img/circle.svg");
width: 250px;
height: 300px;
}

К сожалению, при использовании данного варианта нельзя изменять свойства SVG с помощью стилей и применять интерактивные анимации.

Как объект

Универсальный способ вставки мультимедийного контента в код HTML - тег <object>. SVG формат вставляется также, как и любой другой:

<object type="image/svg+xml" data="img/circle.svg">Image circle</object>

В type указывают принадлежность к типу «изображение» и формат SVG. Объекты можно менять с помощью стилей CSS, хорошо поддерживаются браузерами.

Анимировать SVG также можно несколькими способами. Первый - специальный тег <animate>, который предназначен для работы с <svg>. Он вкладывается внутрь анимируемого объекта, обозначается тип анимации и соответствующие координаты. Второй способ - возможности языка JavaScript. Кроме стандартных приемов существуют специальные библиотеки для работы с эти форматом - Vivus.js, Snap.svg и прочее. Также анимацию можно создать с помощью стилей CSS. Зачем нужна анимация и как сделать ее привлекательной для пользователя мы писали в этой статье.

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

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