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) ...

Thank.