Как менять заливку и/или контур svg в CSS при условии, что *.svg в фоне?

Question

[IvanKalinin]

Суть вот в чем.
Есть SVG контур

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.1.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 612 224.5" enable-background="new 0 0 612 224.5" xml:space="preserve">
    
  
    
<path fill="none" stroke="#FFFFFF" stroke-miterlimit="10" d="M6.7,57.6c1.8-7.5,9.8-11.4,22.4-12.6l73.1,1.3
	c22.8-1.8,42.6-5.1,55.8-11.8c46.1-19.4,95-28.7,146.2-29.4C358.5,4,407.2,15.3,452,35.2c17.1,6.1,35.8,9.8,55.8,11.3l73.9-1.5
	c12,1.4,21.6,4.8,24.9,13.6v108c-1.6,7.6-9.7,12.4-25.6,12.1l-73.1,0.3c-19.5,2.3-55.5,11.1-55.5,11.1
	c-41.6,18.3-90.1,28.6-146.5,29.9c-64-2.2-108.2-13.9-145.7-30.4c-16.1-5.2-34.7-8.9-56-10.8H30.9C20.7,179.7,11.7,177,5,167.1
	L6.7,57.6z"/>
</svg>

Его я хочу использовать в разных местах. С одним фоном и толщиной контура для одних элементов (например кнопок), без фона и другой толщиной/цветом контура (например для ссылок) и т.д. и т.п.

Каким образом для каждого элемента в CSS прописать для каждого нужного элемента свой стиль?
У всех форма одинаковая, не хотелось бы только изза заливки и толщины контура плодить несколько svg файлов.

Answer 1

[Дмитрий Пыткин]

Нужно использовать symbol, вот статьи с описанием методологии:
https://css-tricks.com/svg-sprites-use-better-icon...
https://css-tricks.com/svg-symbol-good-choice-icons/

В кратце, у нас есть один большой SVG со всеми изображениями в виде символов:

<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
  
  <symbol id="beaker" viewBox="214.7 0 182.6 792">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>
  
  <symbol id="shape-icon-2" viewBox="0 26 100 48">
    <!-- <path>s and whatever other shapes in here -->  
  </symbol>
  
</svg>

Подключаем картинки на странице:

<svg class="icon">
  <use xlink:href="#shape-icon-1" />
</svg>

<svg class="icon">
  <use xlink:href="#shape-icon-2" />
</svg>

Всё картинки можно стилизовать через CSS (например задать заливку fill: black и т. д.). Замечу, что атрибут viewBox для символов нужно задавать обязательно, что-бы картинки правильно масштабировались (например если вы будете изменять их размеры).
Если вы используете grunt, взгляните в сторону grunt-svgstore: https://github.com/FWeinb/grunt-svgstore для автоматизации сборки картинок и обётки оных в один SVG контейнер.

Answer 2

[Евгений Петров]

Для разнообразия
Указание фрагмента SVG#ID работает везде при использовании в объектах с генерируемым контентом (img, embed, object).
Но указание фрагмента в url() для фона работает только в IE, FF). Про webkit сказано:
«Currently does not work for CSS background images in Chrome and Safari»

SVG (допустим, имя будет image.svg)

<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100">
	<view id="rect" viewBox="0 0 100 100"/>
		<rect fill="#69c" x="20" y="20" width="60" height="60"/>
	<view id="circle" viewBox="100 0 100 100"/>
		<circle fill="#f90" cx="150" cy="50" r="30"/>
	<view id="polygon" viewBox="200 0 100 100"/>
		<polygon fill="#3c6" points="220,80 280,80 250,20 220,80"/>
</svg>

CSS

div {
	display: inline-block;
	width: 100px;
	height: 100px;
	background-repeat: no-repeat;
	background-color: #f0f0f0;
	background-position: 50% 50%;
}
.a1 {
	background-image: url(image.svg#rect);
}
.a2 {
	background-image: url(image.svg#circle);
}
.a3 {
	background-image: url(image.svg#polygon);
}

HTML

<div class="a1"></div>
<div class="a2"></div>
<div class="a3"></div>

Если использовать картинки, то работает везде:

<img class="img" src="image.svg#rect">
<img class="img" src="image.svg#circle">
<img class="img" src="image.svg#polygon">

Comments

[Дмитрий Пыткин]

Единственный недостаток данного метода в том, что изображения полученные через background-image нельзя стилизовать.

[Евгений Петров]

Дмитрий Пыткин: Да, безусловно, всё оформление описано в SVG, а в CSS мы только выбираем view для отображения.
И то — с глюками webkit остаётся только использовать в картинках, что сводит к минимуму преимущество перед прямой вставкой SVG прямо в HTML (а в этом случае и кода меньше).

[Дмитрий Пыткин]

Евгений Петров: рекомендую ознакомиться: www.slideshare.net/codefest/codefest-2014-2

[Евгений Петров]

Дмитрий Пыткин: Да, спасибо, посмотрел. Нравится мне шрифтовое решение 2GIS, молодцы, хотя речь там о другом:)

Их выбор понятен, однако, base64 не даст стилизовать и вынудит каждый раз перекодировать SVG. Если количество файлов не критично, можно класть фоном в utf8, что даст возможность правок в CSS.

В последнем проекте я применял обе техники — и SVG в HTML для анимации, и SVG фоном в CSS.
А то, что описано в ответе... Я не применял, потому и снабдил заголовком «Для разнообразия»:)

[Дмитрий Пыткин]

Евгений Петров: я просто скинул посмотреть на то, какую методу использовали для реализации 2gis у себя. Судя по всему Base64 для решения проблем со скоростью рендеринга + можно пожать css в gzip. Меня смущает конечно то, что нельзя переиспользовать svg и стилизовать их, нужно будет поинтересоваться на этот счёт...
И по поводу фоновой загрузки, насколько я помню, svg графика добавленная на страницу после её загрузки через JS, не поддаётся её последующей стилизации через CSS. Возможно я ошибаюсь, тогда эта метода всех победит: osvaldas.info/caching-svg-sprite-in-localstorage

[Евгений Петров]

Дмитрий Пыткин: Конечно же SVG-фон стилизуется на этапе генерации CSS (параметры, выбор слоя etc.). Никто и не говорит о такой возможности:)

Использование — хорошая идея, за то вашему ответу поставил давно лайк:) Решение хранить файл SVG ИМХО относится к набору из десятков и сотен символов. Тут нужно тестировать расход ресурсов и трафика.

Answer 3

[Вадим Белкин]

Стилями фонового SVG через CSS нельзя управлять. Через CSS можно стилизовать SVG, если его код вставлен непосредственно в HTML код.

Comments

[Евгений Петров]

Можно управлять тем, какие из объектов внутри SVG будут показаны.

[Вадим Белкин]

Евгений Петров: если SVG фоновым изображением? Можете сказать как? Если это так, то мне очень пригодится.

[Евгений Петров]

Написал ответ. Сохраните SVG и проверяйте.

Answer 4

[Pretor DH]

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg viewBox="0 0 15 169" xmlns:xlink="http://www.w3.org/1999/xlink">
        <symbol id="shape">
	     <polygon points="3,84 7,76 4,84 7,92 "/>
        </symbol>
        <polygon points="3,84 7,76 4,84 7,92 "/>

        <symbol id="shapeRed">
                  <use xlink:href="#shape" fill="red"/>
        </symbol>

        <symbol id="shapeGreen">
                  <use xlink:href="#shape" fill="green"/>
        </symbol>        
</svg>

в CSS файл подключать

.arrow {background:url(icon.svg#shapeGreen);}
.arrow:hover {background:url(icon.svg#shapeRed);}

И через яваскрипт менять svg, на закодированный в base64 xlink на symbol:

atb = document.styleSheets[__найти номер стайлшита__].cssRules[__найти номер привила__].style.backgroundImage;
atb = atb.replace('url(,','').replace(/\)$/,'');
atb = window.btoa('<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg viewBox="0 0 15 169"      version="1.1"      xmlns="http://www.w3.org/2000/svg"     xmlns:xlink="http://www.w3.org/1999/xlink">	<use xlink:href='+abt+'/></svg>');
document.styleSheets[__номер стайлшита__].cssRules[__номер привила__].style.backgroundImage = atb;