Single svg file

I have multiple .svg files in my web project. I add most of them to the html page using the "embed" tag, for example:

<embed src="css/svg/multi.svg" type="image/svg+xml"/>


There are two problems I am trying to solve:

  • When entering the site, it downloads each .svg file separately. I would like them all loaded together (one round trip).

  • Some of the svg's are reused, so the same svg is loaded multiple times.

What I was thinking about is making all svgs in one file and referencing them with id or something like that. Something like "defs" and "use", but only works in firefox, so I need a different solution.

Any other solution that solves these issues is also fine (it shouldn't be in the same file) ...



source to share

1 answer

If more browsers support the # svgView url syntax (part of SVG 1.1) you could use that, maybe see this (works in Opera, Chrome, Safari, IE9).



All Articles