Abr@X@bra.ru
Использование SVG на вашем сайте
Использование SVG на вашем сайте

Использование SVG на вашем сайте

05.10.2017
733

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

Крошечный размер файла

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

Масштабируемость

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

Взаимодействует с DOM

SVG иногда упоминается как «рисование с разметкой»: каждый элемент в SVG-изображении взаимодействует с DOM, это означает, что CSS и JavaScript могут манипулировать части SVG-документа. В отличие от растровой графики, каждая отдельная форма в SVG может иметь свой собственный идентификатор или класс.

Легко модифицировать и адаптировать

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

  • логотипов

  • иконок

  • карт

  • иллюстраций и чертежей

Инструменты для работы с SVG

Хотя вы можете создать документ SVG с помощью любого текстового редактора, программы для векторной иллюстрации, например Adobe Illustrator или Inkscape, как правило, является лучшим выбором (хотя следует отметить, что другие приложения, включая 3D-программы, такие как Blender и серверные приложения, могут экспортировать SVG).

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

Интеграция SVG

Существует три основных способа, которыми SVG можно использовать непосредственно на веб-странице:

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

  • Подобно растровым изображениям, файл SVG можно ссылаться на тег <img> или через CSS в качестве фонового изображения. Это часто лучший способ, если SVG не нуждаются в индивидуальном внимании CSS и JavaScript.

  • Вставляется как <object>. Немного более старый подход, но он, позволяет полностью взаимодействовать с CSS и JavaScript в файле .svg, оставляя код вашей страницы не нагроможденным. Чем не может похвастаться тег <img>.

Адаптивный SVG

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

Вот несколько примеров адаптивных логотипов:

Пример 1




Пример 2




Интерактивные SVG

SVG идеально подходят для отображения реальных форм, это означает, что они отлично подходят для интерактивных карт:




Узоры

Есть два особенно недооцененных аспекта SVG: <pattern> и <filter>.

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




Вывод

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




SVG
Читайте также:
CSS Grid идеально подходит для адаптивной верстки

CSS Grid идеально подходит для адаптивной верстки

Я думаю, что вы уже в курсе, что Grid превосходит Flexbox для создание макетов. Но как насчет адаптивных макетов? Что лу...
Читать
CSS Grid, подробное руководство по гридам с примерами

CSS Grid, подробное руководство по гридам с примерами

Это руководство было создано как ресурс, который поможет вам лучше понять и изучить Grid CSS, и было организовано таким ...
Читать
3 новых CSS-функции для изучения в 2017 году

3 новых CSS-функции для изучения в 2017 году

В этом посте, поговорить хочу про CSS, а если быть точнее про новые его фишки которые стоить знать.
Читать