URL-encoder для SVG
SVG можно использовать в CSS через data URI, но вставку незакодированного SVG поддерживают только браузеры на Webkit. Если закодировать SVG с помощью encodeURIComponent() — SVG начинает отображаться во всех современных браузерах.
У тега SVG обязательно должен быть атрибут xmlns, вот такой: xmlns=’http://www.w3.org/2000/svg’. Если его нет, он будет добавлен автоматически.
Закодированный SVG можно использовать в background , в border-image или в mask (демо).
Где взять svg код иконок?
Есть ли где-то svg код иконок для html?
Сейчас использую awesome , но хотелось бы убрать лишние скрипты, и что лучше: awesome или svg код, на странице по 20-30 таких кодов может быть?
Имею ввиду такое
- Вопрос задан более трёх лет назад
- 8142 просмотра
- Вконтакте
В сети их как грязи, например тут.
Там тоже несколько тысяч.
Не вижу ни одной помехи для этого.
FontAwesome — можно скачать отдельно, в SVG формате (каждую иконку отдельно).
С точки зрения сокращения обращений к серверу — встраивать SVG в страницу — лучше. С точки зрения читаемости такого кода — думаю, хуже.
Конвертируем SVG-иконку в код для использования в CSS
В одном из проектов возле меню выводились небольшие иконки в формате svg, и нужно, чтобы при наведении курсора на пункт меню, текст и иконка меняли цвет. Для того чтобы не плодить большое количество картинок, было решено перевести svg в код и использовать в стилях CSS.
UPDATE – Не обязательно конвертировать svg в код. Можно использовать код файла svg почти без преобразований и без конверторов.
Краткая инструкция как использовать SVG в CSS
Например, у вас есть файл arrow-right.svg , внутри этого файла вот такой код:
Если конвертировать этот SVG в CSS старым способом представленным ниже, то получится такой код:
Добавляется куча лишних действий, на выходе получаем сконвертированный код, некрасиво и долго.
Самый простой вариант – использовать код SVG напрямую в CSS.
Пример использования SVG в CSS:
То есть, мы взяли весь код без изменения из файла 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:
Копируем и используем его в своем css.
Чтобы изменить цвет, меняем fill=’%23FFF’ , только учитываем, что %23 – это обычный знак # , то есть fill=’%23000′ – это обычный черный (#000).
Рекомендую к прочтению:
Комментарии (12) к “Конвертируем SVG-иконку в код для использования в CSS”
Urarak
У меня данный способ не сработал 🙁
Denis Creative
Скиньте код SVG файла, можно будет посмотреть, что там.
Андрей
Офигенно крутое решение. Сохранил.
Денис а можно ли конвертер вынести вотдельное приложение чтобы не на сайте. 😕 а то сайт сегодня есть заватра их нет )
я бы добавил еще калькулятор кода для бекграунда . возможность выбора параметров
репит не репить скрол фикс и т.д.
чтобы сразу добавлять с кодом
background-repeat: no-repeat;
background-image: url(‘
и т.д.
Background Position
Background Attachment
Background Repeat
Background Origin
Background Size
Overlay
Overlay Blend
Denis Creative
Онлайн конвертор есть на Codepen.
Но я бы рекомендовал обратить внимание на часть статьи с заголовком “Самый простой вариант – использовать код SVG напрямую в CSS.” – там пример, как использовать svg в css без конвертора, именно этим способом я пользуюсь сейчас. Он проще, понятнее и быстрее можно скорректировать что-то.
По поводу разных опций для background (position, repeat, etc.) то это уже бы перегрузило основную тему, главное суть – использование SVG в CSS.
Я что-то искал но не нашёл ничего, конвертор в .css да есть но из .css нету.
А есть ли как-то способ восстановить и/или как-то смотреть что за фото из в .css
А то я добавил фото в формате :
и сейчас решил обновить его но не помню какая из них, какая …
Denis Creative
Так тут конвертер не нужен, это просто за 5 сек делается руками.
Создаете файл icon.svg
Открываете его в редакторе.
Переносите в него код свг
меняете
%3c на <
%3e на >
и получаете svg-иконку Facebook с таким кодом:
Поэтому я предпочитаю использовать не конвертер, а просто использовать код SVG напрямую в CSS – это описано в статье.
Мда, топ сайт, топ администрация. Не устали комменты удалять ?
Denis Creative
Комменты не удаляются, просто они были на модерации. Я не сижу тут 24 часа в сутки)
35 инструментов для веб-разработчика на каждый день — MAILSGUN.RU
[…] SVG to bg – конвертер SVG-иконок в код для использования в CSS. Подробная инструкция прилагается на сайте автора. […]
Добрый день! Подскажите, пожалуйста, при использовании svg в css, как менять цвет у картинки при hover?
Getting SVG Strings for Javascript or CSS Usage
We’ve all been there. We have this SVG that we now need to use dynamically in some way and we’re not sure how to get the properly formatted string.
In our case, it’s an SVG pin/marker needed for a Google Map that we will need to have as a default and then a different one on hover.
If I’m given an SVG I usually drop it into create a new Artboard in Sketch, drag the SVG to it, and position at `0, 0` and then copy the code directly from Sketch. This way you can remove any odd `transform` attributes over which you had no control as well as see if anything needs tweaking.
Here are the steps to get you a string that you can use via JS or CSS.
Step One
Open up your SVG and copy the code (either from Sketch or directly from your code editor).
Step Two
Head on over to Jake’s tool and paste the SVG code.
Step Three
Copy the generated code. Note that you can tweak your results via the options on the right.
Step Four
Head on over to @yoksel's tool he built for this very purpose and paste the newly optimized code into the upper left input (Insert your SVG) and ask yourself: “Do I need single or double quotes?”
Step Five
Copy for CSS usage or if using in Javascript you can just use the string/value inside `url()` as seen in the above screenshot.