Как через SVG-спрайт подключать картинки через background?

Question

[weranda]

Хотелось бы максимально простой способ. Просто закидывать данные фигуры в SVG в отдельный файл в таком виде:

<svg display="none" xmlns="http://www.w3.org/2000/svg">

	<defs>

		<symbol xmlns="http://www.w3.org/2000/svg" id="x1" viewbox="0 0 16 16">
			<circle fill="none" stroke="#b4b4b4" stroke-miterlimit="10" cx="8" cy="8" r="3.5"/>
		</symbol>

		<symbol xmlns="http://www.w3.org/2000/svg" id="x2" viewbox="0 0 16 16">
			<circle cx="8" cy="8" r="3.5"/>
		</symbol>

	</defs>
	
</svg>

Потом вставлять их фоновым изображениям блокам.
В HTML пишу:
<div class="icon-1"></div>
И в CSS задавать правила:
background: url(sprite.svg#x2)
Нужно чтобы можно было менять их размеры в стилях. В сети кто что пишет, один - одно, другой - другое, третий - третье...дайте пожалуйста ссылки на проверенные примеры или опишите свой/правильный подход. Хочется максимального удобства без лишней возни, подключения нескольких файлов под каждый SVG, без расстановки по полотну...

Answer 1

[Арсений Матыцин]

Спрайты реализуются вот так. Плюс минус, можно не использовать symbol-ы, или даже defs, а просто вызывать по id.

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

Еще больше структурированной информации ты найдешь тут.

Answer 2

[Brendan Castaneda]

Что-бы можно было управлять SVG из стилей, тебе нужно его прописывать либо инлайново - в HTML кидать код svg файла либо в HTML подключать SVG файл через object.
По другому ими через css не получится управлять.

А вставить SVG в SVG можно.

Comments

[weranda]

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

[Brendan Castaneda]

Может на SVG сделать маску, засунуть другие SVG в маску и вызывать как-то через маску id="mask-1", id="mask-2"

<div class="block">
  <svg class="block__background"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
      <mask id="mask-1">
        <svg
          preserveAspectRatio="xMidYMin slice"
          x="0" y="0"
          width="100%" height="51%"
          viewBox="0 0 700 1000">
          <path d="M328,19C144.2-24.3,0,23,0,23v977H700V46S553,72,328,19Z" fill="#fff"/>
        </svg>
        
        <svg
          preserveAspectRatio="xMidYMax slice"
          x="0" y="50%"
          width="100%" height="50%"
          viewBox="0 0 700 1000">
          <path d="M0,0V952s201-15,381,32c146.9,38.4,319-5,319-5V0Z" fill="#fff"/>
        </svg>
      </mask>
    
      <mask id="mask-2">
        <svg
          preserveAspectRatio="xMidYMin slice"
          x="0" y="0"
          width="100%" height="51%"
          viewBox="0 0 700 1000">
          <path d="M326,30C142-9,0,32,0,32v968H700V52S543.4,76.1,326,30Z" fill="#fff"/>
        </svg>
        
        <svg
          preserveAspectRatio="xMidYMax slice"
          x="0" y="50%"
          width="100%" height="50%"
          viewBox="0 0 700 1000">
          <path d="M0,0V949s200.4-16.9,326,13c239,57,374,7,374,7V0Z" fill="#fff"/>
        </svg>
      </mask>
    
      <linearGradient
        id="linear-gradient-1"
        x1="0" y1="0" x2="100%" y2="100%">
        <stop offset="0" stop-color="#1ca8f8"/>
        <stop offset="1" stop-color="#1c8ff5"/>
      </linearGradient>
      
      <linearGradient
        id="linear-gradient-2"
        x1="0" y1="0" x2="100%" y2="100%">
        <stop offset="0" stop-color="#ac2584"/>
        <stop offset="1" stop-color="#662d91"/>
      </linearGradient>
    </defs>

    <rect width="100%" height="100%" fill="url(#linear-gradient-1)" mask="url(#mask-1)"/>
    <rect width="100%" height="100%" fill="url(#linear-gradient-2)" mask="url(#mask-2)"/>
  </svg>

  <div class="block__content">
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. 
  </div>
</div>

[weranda]

Brendan Castaneda, Выглядит сложно без объяснений что в этом коде к чему и малость непонятно как именно это соотнести с последним вопросом. Допустим, нафиг все эти адаптивности, если с ними такие сложности, просто берем и впихиваем в один файл всю графику, а вот как её потом вывести через background — вопрос! Можно сделать нечто вроде подобия спрайта изображений растровых, тогда надо будет все расставить и высчитывать координаты, но хочется еще проще — накидал графики по типу в стартовом примере и потом выводи её, но пока не могу понять как и в сети не найду. Можно ли , нельзя ли пока...непонятно.