Manipulating external svg file style properties with CSS

Question

I am trying to manipulate an external .svg file via CSS.

HTML

Answer 1

This is possible providing the SVG is hosted on the same domain (thanks @FabienSnauwaert) and it does not have a fill colour defined on itself, and you do not contain a parent selector within the CSS. For example:

I have the following files:

• icon-sprite.svg (my external sprite of SVGs)
• buttons.scss
• test.html

icon-sprite.svg

I have omitted the other SVGs for clarity.

test.html

    Large button
    

buttons.scss

.svg {
    fill: red;
}

This would not work if I was to use body .svg due to shadow DOM boundaries.

See this CSS Tricks article for more info