Skip to main content

You are not logged in. Your edit will be placed in a queue until it is peer reviewed.

We welcome edits that make the post easier to understand and more valuable for readers. Because community members review edits, please try to make the post substantially better than how you found it, for example, by fixing grammar or adding additional resources and hyperlinks.

10
  • 1
    @Rolf I think SVG fragments are different to what I've mentioned above, that seems to be for using a small part of one SVG as a CSS background or inside an image tag. css-tricks.com/svg-fragment-identifiers-work Explains it well although I've only skim read it.
    – Ben Crook
    Commented Oct 23, 2017 at 7:21
  • 1
    Great solution and works in all of Firefox, Chrome and Safari. BEWARE! Even though xlink:href is deprecated, in Safari, the reference must still use the xlink:href attribute – using just href will cause the image not to load. (Posting this as of Safari 12.0.2.) Commented May 6, 2019 at 15:04
  • 3
    While I'm at it, SVGs don't support the alt attribute. An alternative would be this: role="img" aria-label="[title + description]". Commented May 6, 2019 at 15:12
  • 1
    …for this to work, the SVG has to be on the same domain as the hosting page. (So if your site is example.org and you're hosting the SVG on say cdn.example.org, you're out of luck.) Documented here: "For security reasons, browsers could apply the same-origin policy on use elements and could refuse to load a cross-origin URL in the href attribute", which is in practice what's happening at the moment with all big three browsers. (Ended up using a simple <img> to include the SVG and creating variations of the SVG file.) Commented Feb 1, 2020 at 21:51
  • 1
    @FabienSnauwaert Good spot, I didn't think about that case. It makes sense for it to be refused as SVGs can be vulnerable to cross site scripting. I've added that to the answer, thanks.
    – Ben Crook
    Commented Feb 1, 2020 at 22:27