2

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.

CurtisUpshall
  • 75
  • 5
  • Probable duplicate - http://stackoverflow.com/questions/22252409/manipulating-external-svg-file-style-properties-with-css?rq=1 – Paulie_D Oct 19 '16 at 19:30

1 Answers1

3

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>
Timo Breumelhof
  • 81
  • 5