How to reference SVGs in html with access to css styling

Question

I have a number of different SVGs to include in my project (Angular 10). Some of them are used multiple times with different sizes and fill colors etc.

I am trying to find a way to reference them in my html code and have access to via styling:

CSS:

.svg {
  fill: red;
}

Referencing:

<svg>
   <use></use>
</svg>

<object></object>

<img></img>

<embed></embed>

As yet, I have not been able to find a solution that allows me to reference them but also have the ability to access the fill property in the SVG itself as i can when adding inline.

Inline:

<svg>
   <path>
   </path>
</svg>

Adding them inline is going to be messy.

How is this usually handled?

Your help is appreciated!

There are plenty of questions on this already. Why don't they meet your needs? — Robert Longson, Sep 23 '20 at 13:51
Hey Robert, I wasn't able to figure out how to achieve this from the questions I looked though. Including the svg was not a problem, but I couldn't style them with the projects css. — Ron, Sep 23 '20 at 14:00
which questions did you look at and why didn't they work for you? — Robert Longson, Sep 23 '20 at 14:02

score 2 · Accepted Answer · answered Sep 23 '20 at 13:57

You can't. CSS does not apply across document boundaries. If the CSS rules are in the HTML (or imported into the HTML via <link>) then it cannot affect the content of external files.

One solution people have used in the past is to use a bit of Javascript to inline SVG files at runtime.

Otherwise, you will need to put the CSS in the external SVG itself.

How to reference SVGs in html with access to css styling

1 Answers1