Single svg file

Question

I have several .svg files in my web project. I add most of them to the html page using the "embed" tag, like this:

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

There are two problems I'm trying to solve:

1. When entering the website it downloads each .svg file separately. I would like them all to be downloaded together (one round trip).

2. Some of the svgs are being reused so the same svg is downloaded several times.

What I thought of doing is putting all svgs in one file and referencing them with an id or something like that. Something like "defs" and "use" but it works only in firefox so i need some other solution.

Any other solution which solves those problems is good as well (it doesn't have to be in one file)...

Thanks.

Answer 1

If more browsers supported the #svgView url syntax (part of SVG 1.1) you could have used that perhaps, see this example (works in Opera, Chrome, Safari, IE9).