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

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

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

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

Разбиение IT-сферы на разработчиков и дизайнеров приводит к тому, что не все идеи могут быть реализованы версткой. Формат SVG с одной стороны помогает веб-дизайнерам и разработчикам понимать друг друга, а с другой - необходима возможность использовать 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-графика, градиенты, динамические эффекты), и классические приемы.