How to properly embed SVG and/or SVGZ with a stylesheet?

Question

SVG

There is a style file:

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

There is an SVG file (SVG sprites):

<?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>

I embed it like this:

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

The style of the first figure is placed in the style sheet, and the style of the second figure is inline.
This model works. In pursuit of optimization, I would like to compress all this into SVGZ and optimize styles. This is where difficulties and misunderstandings arise.
First difficulty:
If I use not the above construction with a relative link to the SVG file, but with an absolute one like mysite/files/svg#circle, then everything also works correctly with the condition that the styles of the shapes (curves, strokes, etc.) are inline (embedded in figure), but if the style of the figure is placed in the style sheet, then the figure is displayed simply in black and it has no styles, styles are not applied.

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

Even if the stylesheet is embedded in an SVG file, the situation is the same. Why this happens, I do not understand due to insufficient awareness in this matter. Please help me figure out why this is happening and how to fix it, if possible.
The second complexity:
The second complexity follows from the first and lies in it - when compressing SVG to SVGZ, the same thing happens. I was able to solve this only by applying "inline" styles to lines, paths and other SVG elements. If you compress SVG to SVGZ with inline styles and rules in a separate table, then the difference in file weights is generally uncritical, almost the same, even with the initial difference of uncompressed files of 50 KB.

The essence of the question is described above, but in short, why are the rules put into the style sheet in SVG not applied, provided that a direct link to the desired SVG object is used?

Answer 1

Quite right , Lev Solntsev explained: "This is how use works"
In more detail, as soon as we apply the command

use

everything inside falls into the shadow DOM and external styles do not work, but there are ways to get around these restrictions.
1. Since inline styles have a higher priority than outer styles, you need to remove them.
Therefore, sprite pickers will automatically remove all inline fill, stroke
2. Since svg elements inside the shadow home do not inherit parent properties, you need to force them to do so

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

3 .Add a line to the svg file indicating the control external CSS file
4. Classes don't work in SVG, they need to be replaced with id=" ".
Below the external svg.css file added another color change on hover

#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;
 }

Below is the SVG file to which external styles are applied. This is one of the options. You can take this code and paste directly into HTML - it will also work. You can embed an SVG file into HTML using the object tag. Read more here .

<?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>