Миллиард способов того, как использовать SVG

Миллиард способов того, как использовать SVG

От автора: ранее мы рассмотрели, что такое SVG-изображения и почему они отлично подходят для использования в веб-приложениях / на сайтах. В этой статье мы рассмотрим различные способы того, как использовать SVG в браузерах. Данными методами мы располагаем в HTML, CSS и JavaScript. Это будет небыстро, так что возьмите немного содовой (или другой предпочтительный напиток) и поехали.

Много кода впереди

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

Миллиард способов того, как использовать SVG

Если вы хотите продолжить, все, что вам нужно сделать, это скопировать / вставить каждый пример в новый HTML-документ и просмотреть его в своем браузере. Вот и все. Теперь, без дальнейших промедлений, давайте приступим.

SVG как обычное изображение

Самый простой способ использовать SVG — это обрабатывать его как изображение — подобно тому, как мы работаем с файлами JPG, PNG и GIF. Для использования его в HTML мы всегда можем положиться на нашего верного старого друга, тег img:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Если мы хотим отобразить SVG с помощью CSS, есть несколько свойств, которые мы можем использовать. Наиболее распространенным из них обычно является background-image:

Другой подход к отображению SVG включает тег object:

Во всех этих случаях вы должны помнить, что размер SVG будет таким, каким были размеры, использованные при создании / сохранении изображения. Это означает, что у вас может быть очень большое изображение или очень маленькое, если вы явно не определите нужный размер. Вы можете определить размер, используя CSS (что является моим предпочтительным подходом) или установив непосредственно в HTML атрибут width или height.

Встроенные SVG

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

Миллиард способов того, как использовать SVG

На то есть причина. И SVG, и HTML основаны на XML. Для того, чтобы использовать прямое / встроенное представление SVG-изображения в документе, все, что нам нужно сделать, это скопировать / вставить весь SVG-контент из файла SVG в DOM:

Вы также можете использовать встроенные SVG в CSS. Есть несколько моментов, которые вам нужно учитывать, и вы можете увидеть их в следующем примере, где мы указываем значение свойства background-image:

Есть три вещи, которые мы должны указать при использовать встроенного SVG в качестве значения свойства CSS:

Значение в качестве типа данных CSS url: url («….»);

Начальные символы: data:image/svg+xml,

Содержимое встроенного SVG, как url-encoded: %3Csvg xmlns=’http://www.w3.org/2000/svg’ viewBox=’0 0 36 36′%3E%3Cpath fill=’%23A0041E’ d=’M1 17l8-7 16 1 1 16-7 8s.001-5.999-6-12-12-6-12-6z’/%3E%3Cpath fill=’%23FFAC33′ d=’M.973 35s-.036-7.979 2.985-11S15 21.187 15 21.187 14.999 29 11.999 32c-3 3-11.026 3-11.026 3z’/%3E%3Ccircle fill=’%23FFCC4D’ cx=’8.999′ cy=’27′ r=’4′/%3E%3Cpath fill=’%2355ACEE’ d=’M35.999 0s-10 0-22 10c-6 5-6 14-4 16s11 2 16-4c10-12 10-22 10-22z’/%3E%3Cpath d=’M26.999 5c-1.623 0-3.013.971-3.641 2.36.502-.227 1.055-.36 1.641-.36 2.209 0 4 1.791 4 4 0 .586-.133 1.139-.359 1.64 1.389-.627 2.359-2.017 2.359-3.64 0-2.209-1.791-4-4-4z’/%3E%3Cpath fill=’%23A0041E’ d=’M8 28s0-4 1-5 13.001-10.999 14-10-9.001 13-10.001 14S8 28 8 28z’/%3E%3C/svg%3E

Собрав все это вместе, вы получаете секретный соус для отображения встроенного SVG, как части значения свойства CSS. Сложная задача здесь — взять стандартную разметку SVG и закодировать ее, чтобы она работала в CSS. Сервис URL-Encoder for SVG может выполнить эту хитрую часть, так что вы можете использовать его, вместо того, чтобы пытаться понять это и вручную заменять символы.

SVG как URI данных

То, что мы только что рассмотрели со встроенным представлением CSS — это особенная вещь. SVG представляется в общем формате, известном как URI данных. Блок данных, который мы предоставляем в URI данных — это возможность применить еще несколько вариантов SVG-контента. Один из них — полностью URL-кодированная версия, которую мы рассматривали ранее для CSS. Мы можем повторить это и для HTML:

Другое представление — это SVG-данные в формате base64. В версии с кодировкой URL результирующие данные выглядят немного более удобочитаемыми. Когда вы преобразуете любые данные SVG в формат base64, то, что вы получаете, выглядит как самый безопасный в мире пароль:

Миллиард способов того, как использовать SVG

Результатом преобразования обычного SVG в версию base64 является просто странный набор букв и цифр… с которыми браузер знает, что делать. Вот как это выглядит в HTML:

Вот что вы увидите в CSS, когда мы назначим этот base64 контент для свойства background-image:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Мы также можем назначить base64 версию SVG тегу object:

В случаях изображений, CSS и объектов обратите внимание на то, как вы указываете значение в кодировке base64. Это одинаково для каждого случая, поэтому мы можем обобщить этот подход следующим образом:

Просто замените текст [base64blob] фактическим значением в кодировке base64.

Другие форматы кодирования!

Помимо base64 и полнофункционального url-кодирования, существуют другие способы кодирования SVG и обеспечения его работы как части URI данных.

SVG и JavaScript

Теперь все становится еще интереснее. Из-за тесной связи между JavaScript и DOM все подходы, которые мы рассматривали ранее, могут быть реализованы с использованием кода. Независимо от того, создаете ли вы весь HTML-элемент (с определенным SVG) и добавляете его в DOM, или вы просто устанавливаете значения для атрибута src, атрибута data или свойства background-image по отдельности, для этого необходимы некоторые базовые манипуляции с DOM. Давайте рассмотрим, как все это будет выглядеть в различных общих сценариях.

Указание на файл SVG в HTML

Сначала давайте рассмотрим прямой случай использования JavaScript для загрузки файла SVG в элемент изображения на странице:

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

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

Указание на файл SVG в CSS

Следующий подход — тот, где мы указываем файл SVG в CSS. Мы продолжим использовать свойство background-image:

То, что мы указываем в JavaScript в качестве значения для свойства backgroundImage, почти идентично тому, что мы ранее указали непосредственно в CSS. Это удобно, правда?

Указание встроенного SVG в HTML

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

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

Указание встроенного SVG в CSS

Ранее мы рассмотрели базовый подход для определения встроенного SVG в CSS в формате URI данных. Частично это связано с кодированием SVG в URL-кодировке. Мы делаем нечто подобное и в скрипте JavaScript:

Чего мы не делаем, так это не предоставляем SVG в его URL-кодированном формате с самого начала. Это не разумно ожидать, когда SVG может поступить из различных мест (например, веб-запрос), где мы не можем контролировать кодировку. Вместо этого мы можем положиться на встроенный метод encodeURIComponent для обработки SVG и преобразования его в более удобоваримый формат с URL-кодировкой. После того, как мы выполним это преобразование, дальше нам нужно будет установить свойство backgroundImage для элемента, в котором мы хотим отображать SVG — аналогично тому, что мы делали несколько раз в до этого.

Base64 версии SVG

Другой способ указать SVG как в HTML, так и в CSS — воспользоваться маршрутом в кодировке base64. Чтобы перейти от обычного SVG к base64 версии, у вас есть функция btoa. В HTML, если нам нужно установить источник элемента изображения, это может выглядеть следующим образом:

Обратите внимание, что мы сохраняем base64 версию SVG в переменной base64version, которая затем передается в формат URI данных для свойства src элемента image. Это не слишком отличается от случая CSS:

Мы по-прежнему используем функцию btoa, чтобы превратить SVG в версию с кодировкой base64, которую мы можем затем указать, в данном случае, для CSS-свойства backgroundImage. На этом все…

Заключение

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

Автор: kirupa

Источник: https://www.kirupa.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий