Как корректно встроить SVG и/или SVGZ с таблицей стилей?

Question

[weranda]

Имеется файл стилей:

.my-style{
	fill:red;
	stroke:black;
	stroke-width:2;
}

Имеется SVG файл (спрайты SVG):

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 50 50" style="enable-background:new 0 0 50 50;" xml:space="preserve" display="none">
	<defs>
		<symbol id="circle"  viewBox="0 0 50 50">
			<circle class="my-style" stroke-miterlimit="10" cx="25" cy="25" r="24"/>
		</symbol>
		<symbol id="rect"  viewBox="0 0 50 50">
			<rect fill="red" stroke="black" stroke-width="2" stroke-miterlimit="10" width="48" height="48"/>
		</symbol>
	</defs>
</svg>

Встраиваю так:

<svg><use xlink:href="#circle"></use></svg>
<svg><use xlink:href="#rect"></use></svg>

Стиль первой фигуры вынесен в таблицу стилей, а стиль второй фигуры инлайновый.

Эта модель работает. В погоне за оптимизацией хотелось бы это все сжать в SVGZ и оптимизировать стили. Вот тут то и возникают сложности и недопонимания.

Первая сложность:
Если использую не вышеуказанную конструкцию с относительной ссылкой на SVG файл, а с абсолютной типа mysite/files/svg#circle, тогда все работает также корректно с условием, что стили фигур (кривые, обводки и пр.) инлайновые (встроены в фигуры), но если стиль фигуры вынесен в таблицу стилей, то фигура отображается просто черным цветом и стилей у нее нет, не применяются стили.

<svg><use xlink:href="mysite/files/svg#circle"></use></svg>
<svg><use xlink:href="mysite/files/svg#rect"></use></svg>

Даже если таблицу стилей встроить в SVG файл, ситуации будет та же. Почему так получается не пойму из-за недостаточной осведомленности в данном вопросе. Помогите пожалуйста разобраться почему так происходит и как это исправить, если можно.

Вторая сложность:
Вторая сложность вытекает из первой и в ней же кроется – при сжатии SVG в SVGZ происходит то же самое. Смог решить это только применив "инлайновые" стили к линиям, контурам и прочим элементам SVG. Если сжать SVG в SVGZ с инлайновыми стилями и правилами, вынесенными в отдельную таблицу, тогда разница в весе файлов вообще некритична, почти одинаковая, даже при первоначалльной разнице несжатых файлов в 50 Кб.



Суть вопроса описана выше, но если коротко, то почему не применяются правила, вынесенные в таблицу стилей в SVG при условии использования прямой ссылки на нужный объект SVG?

Answer 1

[svgartru2016]

Совершенно верно Лев Солнцев объяснил: "Так работает use"
Если более подробно, то как только мы применяем команду

use

всё что внутри попадает в shadow DOM и внешние стили не работают, но есть способы обойти эти ограничения.
1. Так как инлайновые стили имеют более высокий приоритет, чем внешние стили, то необходимо их убрать.
Поэтому сборщики спрайтов автоматически удаляют все инлайн fill, stroke
2. Так как svg элементы внутри теневого дома не наследуют родительские свойства, необходимо заставить их это сделать

circle rect{
fill:inherit;
stroke:inherit;
}

3 .В svg файл добавить строку с указанием управляющего внешнего файла CSS

<?xml-stylesheet type="text/css" href="css/svg.css" ?>

4. В SVG классы не работают их нужно заменить на id=" ".
Ниже внешний файл svg.css добавил ещё изменение цвета при наведении курсора

#circle{ 
fill:red;
stroke:black;
stroke-width:1px;
}
#rect{ 
fill:yellowgreen;
stroke:black;
stroke-width:1px;
}
circle rect{
fill:inherit;
stroke:inherit;
}
#rect:hover { 
fill:red;
stroke-width:3px;
}
 #circle:hover{
 fill: yellowgreen;
 stroke-width:3px;
 }

Ниже файл SVG к которому применяются внешние стили. Это один из вариантов. Можете брать этот код и вставлять непосредственно в HTML - будет также работать. Можете вставить файл SVG в HTML посредством тега object. Подробнее здесь.

<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="css/svg.css" ?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
 width="120" height="55" viewBox="0 0 120 55" >
  <defs>
    <symbol id="circle"  >
      <circle   cx="25" cy="27" r="24"/>
    </symbol>
    <symbol id="rect" >
      <rect    x="60" y="2" width="48" height="48"/>
    </symbol>
  </defs>

  <use xlink:href="#circle"></use>
  <use xlink:href="#rect"></use>
  
  </svg>