Email *

Работа с SVG графикой

SVG навигация

Работа с SVG графикой

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

В чем плюсы такого подхода:

  1. Малый вес SVG-графики. Код изображения вставляется непосредственно в HTML страницы, а его свойства задаются через CSS. Это снижает количество обращений к серверу и увеличивает скорость загрузки страницы.
  2. What You see is what You get! То что вы видите в своем графическом редакторе будет иметь точно такой же вид на сайте.
  3. Работа только с одним файлом. Кнопки навигации являются отдельными группами объектов одного SVG файла.

Начнем собственно с графики.

1 рисунок 2 HTML 3 CSS 4 запуск SVG навигация

1. Рисунок.

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

  1. Только палитра RGB – надеемся, понятно почему.
  2. Текст лучше оставить без преобразования в кривые (если данная гарнитура читается браузерами, конечно же). В таком случае вы сможете в дальнейшем редактировать его через HTML-код, не возвращаясь к графическому редактору.
  3. Объединяйте как можно больше объектов, если они имеют один цвет и будут работать как один элемент. Нет смысла плодить лишние пути (path) в коде – с ним будет только сложнее работать.
  4. Объекты, которые будут работать как группа (например, одна кнопка) лучше сгруппировать сразу же в редакторе. Впоследствии им будет задан один класс в HTML коде, что упростит работу.
  5. При экспорте сохраняйте текст как текст (см. пункт 2), а не как кривые. Если гарнитура не читается браузерами, лучше экспортировать текст в кривых. Можно также встроить стили символов в файл, но это существенно увеличит объем кода, если надписи длинные.

Теперь давайте откроем SVG файл в браузере и проверим, все ли в порядке. Если да, откройте файл с помощью редактора кода, например Atom.

2. HTML код.

В том что вы видите перед собой, необходимо понять следующие вещи:

  1. fil0, fil1, fil2 и т.д. – это цвета заливок отдельных элементов. Их можно редактировать через код.
  2. fnt0, fnt1, fnt2 и т.д. – это свойства текста.
  3. Ниже вы увидите path class=”fil0”(”fil1”,”fil2”) – это координаты векторных границ этих заливок. Вернитесь к графическому редактору, если что-либо нужно поправить.
  4. text class=”fil0 fnt1” означает, что текст с определенными свойствами (fnt1) также имеет определенный цвет (fil0).
  5.  g id=”значение” – это идентификаторы групп объектов (см. пункт 2.4). С ними мы и будем сейчас работать.

Вы можете менять названия классов заливок. Например, заменить ”fil0” на ”background1” и т.д., чтобы было удобнее разбираться в коде. Особенно это важно, если на одной странице будет присутствовать несколько SVG файлов. Значения ”fil0” должны быть заменены на ”background1” во всем коде, если это сделано хотя бы в одном месте.

А теперь самое главное – замените g id=”значение” на g class=”значение”. Теперь все объекты, которые находятся в этой группе могут быть отредактированы в CSS как по отдельности, так и вместе. Это важно, если данная группа представляет из себя, например, кнопку, как в нашем случае.

Теперь давайте переопределим стили для одной из этих групп.

See the Pen SVG navigation by Alexander Webmassa (@Webmassa) on CodePen.

3. CSS код.

Зададим одной из групп значение g class=”drawing” (это то же самое, что и div class в HTML). Внутри у нас находится текст, иконка и фон. Допустим, мы хотим, чтобы при наведении на группу менялся цвет фона (до этого мы заменили path class=”fil0 на path class=”background1”).

Идем в CSS:

.drawing:hover .background1 { fill: #284554; }

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

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

4. Публикация.

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

А теперь давайте подумаем, как это SVG-изображение можно применить. Например, сделаем из него навигацию по странице. В этом нам поможет еще одно свойство SVG-графики – xlink.

Заключим всю группу ”drawing” внутри тэга <a xlink:href=”#drawing”></a>. #drawing в нашем случае означает ID блока на странице сайта (якорь). Таким образом, по клику на группу страница автоматически прокрутится на раздел «1. Рисунок».

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

Более подробно о создании векторной веб-графики с нуля, работы с кодом SVG и его вставкой на сайт вы можете узнать из нашего цикла видео «Введение в SVG-графику»:

Рисуйте, разрабатывайте, развлекайтесь и наслаждайтесь гибкостью и легкостью работы с форматом SVG!