Svg icon background css

Конвертируем SVG-иконку в код для использования в CSS

В одном из проектов возле меню выводились небольшие иконки в формате svg, и нужно, чтобы при наведении курсора на пункт меню, текст и иконка меняли цвет. Для того чтобы не плодить большое количество картинок, было решено перевести svg в код и использовать в стилях CSS.

UPDATE — Не обязательно конвертировать svg в код. Можно использовать код файла svg почти без преобразований и без конверторов.

Краткая инструкция как использовать SVG в CSS

Например, у вас есть файл arrow-right.svg , внутри этого файла вот такой код:

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

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 477.175 477.175'%3e%3cpath d='M360.731 229.075l-225.1-225.1c-5.3-5.3-13.8-5.3-19.1 0s-5.3 13.8 0 19.1l215.5 215.5-215.5 215.5c-5.3 5.3-5.3 13.8 0 19.1 2.6 2.6 6.1 4 9.5 4 3.4 0 6.9-1.3 9.5-4l225.1-225.1c5.3-5.2 5.3-13.8.1-19z'/%3e%3c/svg%3e");

Добавляется куча лишних действий, на выходе получаем сконвертированный код, некрасиво и долго.

Самый простой вариант — использовать код SVG напрямую в CSS.

Пример использования SVG в CSS:

background-image: url('data:image/svg+xml,\  ');

То есть, мы взяли весь код без изменения из файла arrow-right.svg и просто вставили его в background-image: url(‘ ‘); , но добавили в самое начало data:image/svg+xml, , а каждую новую строку заэкранировали обратным слешом \ .

Получается, что код SVG почти не изменен и времени это заняло 15 секунд, но нужно учесть такие моменты:

• Можно использовать многострочный svg-код, экранируя каждую строку с помощью обратного слеша — \
• Можно создавать анимированные фоны или элементы с помощью CSS-анимации внутри встроенного SVG.
• Отсутствие viewBox или размеров позволяет фону SVG занимать всю площадь элемента.
• Необходимо экранировать # как %23 при указании цвета, потому что это зарезервированный символ в URL.

Живой пример использования SVG в CSS:

See the Pen KKKRBxr by Denis (@deniscreative) on CodePen.default

Если же вас устраивает вариант с конвертацией SVG, тогда старый добрый рабочий пример представлен ниже.

Краткая инструкция как конвертировать SVG в CSS

Сначала отправляем svg в https://jakearchibald.github.io/svgomg/ для того чтобы получить кодовое значение.

Затем копируем код и вставляем его в это окно:

See the Pen Convert SVG to Data URI for css background-image by Denis (@deniscreative) on CodePen.0

полученный код используем в своем css файле.

Например, берем иконку Facebook (стандартная иконка с небольшим изменением).

На сайте https://jakearchibald.github.io/svgomg/ жмем «Open SVG» или просто перетягиваем иконку на область просмотра. В левом верхнем углу жмем «CODE», выделяем код, а затем жмем на иконку копировать, так мы получим в буфер код нашей свг-картинки.

Затем полученный код вставляем в окно выше, жмем Converte и получаем готовый background-image:

background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3e%3cpath fill-rule='evenodd' clip-rule='evenodd' fill='%23FFF' d='M12.748 16v-1h6v1h-6zm0-3h6v1h-6v-1zm4 5h-4v-1h4v1zM13.748 9.975v-3h-4v-1c0-1.104.896-2 2-2h2v-2.95h-2c-2.8.256-5 2.583-5 5.45 0 .017.005.032.005.05h-.005v.45h-3v3h3v8h3v-8h4z'/%3e%3c/svg%3e");

Копируем и используем его в своем css.

Чтобы изменить цвет, меняем fill=’%23FFF’ , только учитываем, что %23 — это обычный знак # , то есть fill=’%23000′ — это обычный черный (#000).

Простые кнопки поделиться в социальных сетях без использования сторонних плагинов и скриптов, используется прямая ссылка…

Самый простой и удобный таймер обратного отсчета HTML CSS Javascript Указываем дату окончания работы таймера…

Форма обратной связи с прикреплением файла (attach) Самый простой внешний вид формы обратной связи с…

В общем, из-за санкций против российских компаний возникли некоторые сложности у многих украинских компаний. Допустим,…

Источник

Подключаем SVG-иконку на сайт и меняем цвет через CSS

HTML, CSS

В предыдущих сериях…

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

Возьмем стандартную папку с проектом, в которой есть отдельная папка для изображений, отдельная — для файлов .css , а также файл .html

Подключение через тег в html

Работаем как с обычной картинкой. Тег , атрибут src , прописываем путь к файлу. Можно использовать любые атрибуты , включая атрибут width .

Иконки
  

Подключение фона в .css

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

Укажите в html нужный класс и пропишите свойства фона background-image в файле css. Используйте функцию url() , чтобы задать путь к файлу с изображением.

/* SVG фоновое изображение */ .block-bg < width: 600px; height: 200px; background-image: url('./../img/bg-zigzag.svg'); >

Описываем svg-графику inline

Существуют специальные теги и атрибуты для описания графики прямо в коде. При этом, изображение становится интерактивным — мы можем, например, менять цвет, или размер по наведению на иконку.

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

Стилизуем в файле .css по классу youtube-icon .

Будем менять цвет иконки по наведению при помощи свойства fill .

/* SVG inline код. Смена цвета по ховеру */ .youtube-icon < width: 64px; height: 64px; fill: black; >.youtube-icon:hover

Заключение

• Мы разобрали 3 стандартных способа подключения SVG-графики на сайт: тег , свойства CSS, тег .
• Узнали про то, как можно менять цвет SVG-иконки через CSS и свойство fill .
• В следующей статье продолжим работу с тегам , , разберем как можно ещё кастомизировать векторную графику.

Источник

How to add SVGs with CSS (background-image)

There are TWO methods for displaying SVG images as a CSS background image:

Notice with this method we have to treat the SVG code before it will work. In the example, we convert the SVG to a Data URI. You could even convert it to Base64, but that will result in a messier, longer code blob. It is a best practice to avoid Base64 in this case.

Tip: Use this SVG to CSS converter tool to quickly convert your SVG code into a data URI.

After you place your file path or SVG code into the background-image property, you can further tweak how the background displays. You see, the great thing about using an SVG as a CSS background-image is that they can be styled with CSS background properties.

The CSS background-image properties

Let’s review all the properties related to background-image and what they do.

• Background-attachment:
  Example values: scroll; fixed; local;
  The attachment specifies how the background moves relative to the user’s screen. When the user scrolls, the background can scroll along with a given section, or stay put ( fixed ).

• Background-position:
  Example values: center; top left; 50% 50%; right 30px bottom 15px;
  The background-position determines where the image is displayed within its container. The center keyword is great with large backgrounds and at making patterns symmetrical. With smaller backgrounds, you may reach for a combo of keywords and lengths to place the background image more precisely.
• Background-size:
  Example values: cover; contain; 500px 250px; auto;
  This controls how big or small the image displays. A value of cover forces the image to fill its entire containing element in proportion, and either the excess width or height will get clipped. A value of contain is similar in that it fills its container in proportion, but without clipping. You can also provide a specific width and height value.
• Background-repeat:
  Example values: no-repeat; repeat; repeat-x;
  The background-repeat property allows you to tile the background image into a pattern.
• Background-color:
  Example values: red; #F00; rgb(0,255,165);
  SVGs are a transparent image format and if the SVG elements do not cover the entire viewBox, the background color will be visible behind your SVG.
• Background-origin:
  Example values: border-box; padding-box; content-box;
  The origin determines the boundary of the background’s container. Border-box will stretch the background area for the entire container, while the padding-box and content-box values shrink the background area within the border and inside the padding respectively.

• Background-clip:
  Example values: border-box; padding-box; content-box;
  Similar to background-origin , this property defines the background area, with one difference: the background doesn’t resize, but instead crops the background image to fit in the assigned boundary.

• Background-blend-mode:
  Example values: multiply; screen; overlay, color-dodge, color;
  This property blends the colors of the target background with what is visible behind the target element, blending into a single colorful result. The blend modes are essentially the browser version of Photoshop’s blending modes.

Layering multiple background images

Background-image can hold multiple background image layers to achieve cool effects. To create these image layers, comma-separate each image value in a single background-image property. Then when you use any related background properties, comma-separate those varied values to coincide with the images, or instead use a single value which will apply to all images the same.

background-image: url( '/path/image-1.svg' ), url( '/path/image-2.svg' ), url( '/path/image-3.svg' );

You can mix images, SVG data URIs, and CSS gradients. But you need to overlap images with transparency or take advantage of the background-blend-mode discussed above. Otherwise you will only see one background. The first image is on top of the background stack.

Let’s mix a few backgrounds now, and see what we get. First I headed over to the homepage of SVGBackgrounds.com to find a few quick backgrounds to layer together. Here is the code and results:

BUT, this technique prevents the need to layer div containers to achieve a layer effect. Let’s try again, this time to make a simpler one that looks useable. Let’s place a pattern over a cool image texture.

Much better!

I could definitely see something more like this being used in a real-world project. Subtle backgrounds are always nice.

Wrapping up about SVGs in CSS background-images

We looked at how to add SVGs into the CSS property background-image . With all the related background properties and the fact you can layer backgrounds, there is little that can’t be achieved. This way of adding website backgrounds is powerful.

), the creator behind SVG Backgrounds. Hire me to help you with design on your website or app.

), the creator behind SVG Backgrounds. I produce free and paid resources every few months, sign up for alerts.

Источник