CODEWITHSUNDEEP
htmlcsssvg
CurtisUpshall
CurtisUpshall

Reputation: 75

Inline External SVG

I'd like to use an external SVG image for social media links that I can use the CSS fill property for. HTML looks like this:

<a><svg width="30" height="30">
     <use xlink:href="image/svg/instagram.svg" class="insta"></use>
</svg>Instagram</a>

but the SVG is not showing up. Further, my CSS looks like this:

.insta {
     fill: blue;
}

Any help on how to include inline SVG files would be really appreciated. Website is here.

Upvotes: 2

Views: 1491

Answers (1)

Timo Breumelhof
Timo Breumelhof

Reputation: 81

You need to wrap your SVG icon inside the svg file element inside a symbol element 

<symbol id="item">
...
</symbol>

and reference that in your href for this to work.

<a><svg width="30" height="30">
     <use xlink:href="image/svg/instagram.svg#item" class="insta"></use>
</svg>Instagram</a>

Upvotes: 3

Related Questions