1

I suspect that what I'm trying to do is either impossible, because I'm thinking about the problem wrong, or trivial but impossible to Google because of the word "view" in relation to an image.

If I inline an svg sprite built with the <view> model, how do I reference it in <img> elements?

Inlining the svg seems right because it saves a DNS/file retrieval round-trip, gets automatically cached at the CDN, and gets automatically gzipped. Using the <view> model seems sensible because the html is clear, and it's easy to apply styles and aria labels and whatnot. But ... I can't figure out how to combine the two ideas.

FWIW, I control the sprite build (with gulp-svg-sprite), so if this is actually impossible, I can choose a different mode other than <view>, but this is my first time doing this, and <view> seemed the easiest ... until it seemed impossible :)

philolegein
  • 1,099
  • 10
  • 28
  • Please read [How SVG Fragment Identifiers Work](https://css-tricks.com/svg-fragment-identifiers-work/) – enxaneta May 22 '22 at 15:26
  • @enxaneta — I think that's exactly the article that started me down this path. But, if I inline the svg, how do I `` because there is no sprite.svg ... it's inline in the html. – philolegein May 22 '22 at 15:42
  • If you are after icons: https://stackoverflow.com/questions/66760400/what-is-the-best-practice-way-of-creating-an-icon-button-with-an-svg – Danny '365CSI' Engelman May 22 '22 at 16:32
  • If you inline SVG you can the fragment you need. The fragment identifiers () are for "SVG-as- or SVG-as-background-image" as mentiones in the css-tricks article – enxaneta May 22 '22 at 19:07

1 Answers1

0

It turns out, this is impossible.

The first comment on this StackOverflow question says that, "... you can't use SVG fragment identifiers unless the file is external." And, after digging into both the SVG 1.1 and SVG 2 specs, it seems clear that you must have a URL for fragment identifiers (aka, "views") to work.

philolegein
  • 1,099
  • 10
  • 28