2

I have an SVG file of icons that looks like this:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <path id="instagram" d="..."/>
  <path id="linkedin" d="..."/>
  <path id="twitter" d="..."/>
</svg>

And it's referenced in my HTML like this:

  <a href="...">
    <svg viewBox="0 0 32 32"><use xlink:href="icons.svg#instagram"></svg>
  </a>
  <a href="...">
    <svg viewBox="0 0 32 32"><use xlink:href="icons.svg#linkedin"></svg>
  </a>
  <a href="...">
    <svg viewBox="0 0 32 32"><use xlink:href="icons.svg#twitter"></svg>
  </a>

And, like many questions before this one, the SVGs aren't rendering in Safari on desktop nor mobile.

Is there a way to have them render with the <svg> tags that works in all browsers? I'd like to not have to edit the CSS that styles the <svg> tags if possible. Is the <object> tag the only solution that works across all browsers? Is referring to the id of the path also valid with the <object> tag?

Thanks!

Community
  • 1
  • 1
Cassidy
  • 3,328
  • 5
  • 39
  • 76

0 Answers0