Why is svg not styled?

Question

css

Hello!

I use object to display svg on the site

<object type="image/svg+xml" data="ссылка">
  <img src="ссылка" alt="">
</object>

In scss trying to color svg with different color

object svg{
     fill: $accent;
     width: 50%;
     height: 50%;
}

Why does not it work ?

Answer 1

You can style SVG elements that are displayed with the object tag
. To do this, add one line according to w3.org like this

<?xml-stylesheet href="svg.css" type="text/css"?>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 10" width="100px" height="80px">
  <path d="......" />
</svg>

We put it on the page like this:

<object data="test.svg" type="image/svg+xml"></object>

After these manipulations, we can style any entity in the file without unnecessary difficulties, but only in the file that is registered in the included svg

svg path{
    fill: lightblue;
    stroke: blue;
    stroke-width: 0.5px;
}

Yes, and read a very good article: https://webtranslates.ru/styling-svg-use-content-c... which will explain to you how to style svg using css that will work