SVG иконки Bootstrap (картинки), svg-код — прописка на сайтах (в кодах)

SVG иконки (картинки), svg-код Bootstrap, все это и не только это широко используется на сайтах. Ранее использовались любые картинки-иконки типа .png и пр. и пр. но нынче вариант считается устаревшим.

Сегодня эра обновлений. А потому тема прописки (или лучше — вставки иконок, кода) картинок .svg и п. — прописки на страницах сайта — декор.

…стилизуют ресурс, например, с font-awesome или Google icons — вариантов масса и с подключением соответствующих библиотек, и напрямую — за нами выбор!

 

Однако, каким образом это выполнить знают не все, особливо новички делают некоторые ошибки. По большему счету — усложняют процесс, или делают, скажем, выбор не в оптимизированную сторону предприятия:

 

 

 

 

 

 

 

Картинка svg что это: иконки Bootstrap

 

 

Любая картинка (с любым расширением), это ни что иное как набор символов/код — перекодировать возможно любую иллюстрацию (как видите, при перекодировании меняется расширение, к примеру .png — .svg; jpg — svg и пр. пр.). Перекодировать возможно как в графических редакторах, так и на специализированных сервисах онлайн, как правило данные манипуляции доступны, легки и бесплатны.

 

Например, у вас получилась картинка типа rocket.svg (ракетка).

 

Если эту картинку открыть, скажем, в Notepad++ как раз и увидим код (пример ниже). Данный код возможно добавлять в требуемые места файлов сайта. Однако, есть некоторые нюансы и особенности, о них ниже.

 

 

Способы и вариации вставки различны:

 

 

• непосредственно в css (путь/до/rocket.svg) — по сути разницы никакой нет между вставкой кода в стили css (или файла картинки rocket.svg), разве кроме того, что css кэшируется на стороне клиента /в браузере/ или каким-то образом «внутри» на сайте; кроме того rocket.svg — это, как и говорилось, тоже код, только подгружаемый извне файла…
• непосредственно в HTML код;
• в файл style.css кодом <svg

 

 

Варианты вставок, думаю вряд ли можно так прямо отнести к оптимизации… скорее, к средствам и целям.

 

 

если нужно добавить непосредственно в HTNL — добавляется так примерно:

 

 

<i class="bi bi-rocket-takeoff-fill"></i><!-- иконочный шрифт -->

 

 

точки кода:

 

Unicode: U+F844

CSS: \F844

JS: \uF844

HTML: 

 

 

Пример:

 

.yellow_background::before {
content: '\270E';
color: #008594; /*в этом случае цвет самой иконки можно сменить здесь, в отличие от примера вариантов ниже*/
font-size: 20px;
position: absolute;
line-height: 0.9;
}

 

 

следующий вариант организации кодов svg в файлах style.css

 

 

Пример .svg код «ракетка»

 

 

<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-rocket-takeoff-fill" viewBox="0 0 16 16">
<path d="M12.17 9.53c2.307-2.592 3.278-4.684 3.641-6.218.21-.887.214-1.58.16-2.065a3.578 3.578 0 0 0-.108-.563 2.22 2.22 0 0 0-.078-.23V.453c-.073-.164-.168-.234-.352-.295a2.35 2.35 0 0 0-.16-.045 3.797 3.797 0 0 0-.57-.093c-.49-.044-1.19-.03-2.08.188-1.536.374-3.618 1.343-6.161 3.604l-2.4.238h-.006a2.552 2.552 0 0 0-1.524.734L.15 7.17a.512.512 0 0 0 .433.868l1.896-.271c.28-.04.592.013.955.132.232.076.437.16.655.248l.203.083c.196.816.66 1.58 1.275 2.195.613.614 1.376 1.08 2.191 1.277l.082.202c.089.218.173.424.249.657.118.363.172.676.132.956l-.271 1.9a.512.512 0 0 0 .867.433l2.382-2.386c.41-.41.668-.949.732-1.526l.24-2.408Zm.11-3.699c-.797.8-1.93.961-2.528.362-.598-.6-.436-1.733.361-2.532.798-.799 1.93-.96 2.528-.361.599.599.437 1.732-.36 2.531Z"/>
<path d="M5.205 10.787a7.632 7.632 0 0 0 1.804 1.352c-1.118 1.007-4.929 2.028-5.054 1.903-.126-.127.737-4.189 1.839-5.18.346.69.837 1.35 1.411 1.925Z"/>
</svg>

 

 

Этот сниппет возможно добавить прямо в html файл (можно обыграть элемент CSS)

 

 

А если же требуется добавить код выше прямо в файл стилей, то его следует конвертировать — .svg для вставки непосредственно в CSS можно конвертировать здесь.

 

 

 

 

На выходе получится примерно такой вариант конвертации:

 

 

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-rocket-takeoff-fill' 
viewBox='0 0 16 16'%3E%3Cpath d='M12.17 9.53c2.307-2.592 3.278-4.684 3.641-6.218.21-.887.214-1.58.16-2.065a3.578 3.578 0 0 0-.108-.563 2.22 2.22 0 0 0-.078-.23V.453c-.073-.164-.168-.234-.352-.295a2.35 2.35 0 0 0-.16-.045 3.797 3.797 0 0 0-.57-.093c-.49-.044-1.19-.03-2.08.188-1.536.374-3.618 1.343-6.161 3.604l-2.4.238h-.006a2.552 2.552 0 0 0-1.524.734L.15 7.17a.512.512 0 0 0 
.433.868l1.896-.271c.28-.04.592.013.955.132.232.076.437.16.655.248l.203.083c.196.816.66 1.58 1.275 2.195.613.614 1.376 1.08 2.191 1.277l.082.202c.089.218.173.424.249.657.118.363.172.676.132.956l-.271 1.9a.512.512 0 0 0 .867.433l2.382-2.386c.41-.41.668-.949.732-1.526l.24-2.408Zm.11-3.699c-.797.8-1.93.961-2.528.362-.598-.6-.436-1.733.361-2.532.798-.799 1.93-.96 2.528-.361.599.599.437 1.732-
.36 2.531Z'/%3E%3Cpath d='M5.205 10.787a7.632 7.632 0 0 0 1.804 1.352c-1.118 1.007-4.929 2.028-5.054 1.903-.126-
.127.737-4.189 1.839-5.18.346.69.837 1.35 1.411 1.925Z'/%3E%3C/svg%3E");

 

 

По сути все просто: добавляется доп. теги синтаксиса и экранирование по типу и т.п…

 

 

data:image/svg+xml,%3Csvg **

***/%3E%3C/svg%3E");

 

 

Полученный конвертированный код .svg добавляется в свойства-селектора CSS — значение: .selector{***}

 

…или может быть, как вариант, примерно так:

 

** :after{content:"" url("data:image/svg+xml **

 

 

спрайты SVG

 

 

Спрайты — это возможность объединить 2-3 svg кодов в единый блок и по требованию обращаться к отдельно взятой иконке (svg) — т.е. НЕ НУЖНО повторно добавлять код-svg в тело документа HTML.

 

 

такой вариант (из документации):

 

 

<svg class="bi" width="32" height="32" fill="LightSlateGrey">
<use xlink:href="bootstrap-icons.svg#heart-fill"/>
</svg>
<svg class="bi" width="32" height="32" fill="LightSlateGrey">
<use xlink:href="bootstrap-icons.svg#toggles"/>
</svg>
<svg class="bi" width="32" height="32" fill="LightSlateGrey">
<use xlink:href="bootstrap-icons.svg#shop"/>
</svg>

 

 

Cпрайт SVG для вставки любой иконки — используются через <use> элемент.

 

Имя файла иконки в этом случае как идентификатор — id — «фрагмент кода картинки» (к примеру, toggles и #toggles) к которому следует обращаться (вызывать по требованию ситуации).

 

Что примечательно: SVG-спрайты «могут» ссылаться на внешний файл, по типу элемента <img>; также currentColor — стилизация (цвет).

 

 

 

<svg style="display: none;" **

 

 

 

 

стайлинг изменение цвета (color:***) картинки svg

 

 

Если вы добавляете код в файл CSS или где-то в настройках (полях) админки — коррекция цвета или позиционирования x-y (положение элемента) будет затруднительным обычным способом.

 

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

 

 

** www.w3.org/2000/svg' width='16' height='16' fill='currentColor' **

 

fill='currentColor' (наследует цвет родителя); меняем на 'LightSlateGrey' (произвольный цвет)

 

 

 

 

 

 

позиционирование элемента (иконки svg)

 

 

позиционирование (в коде svg) возможно таким образом организовать:

 

transform="translate(2,5)"

 

 

** width="20" height="20" fill="currentColor" class="bi bi-telegram" viewBox="0 0 20 20" transform="translate(2,5)"><path d=" **

 

 

где значения:

 

• 2 — лево-право,
• 5 — верх-низ…

 

 

полезные ресурсы