Embed SVG in SVG ?

     To embed SVG in SVG, use the image element and reference the SVG file. Simply store the below code as recursion.svg:

<svg width="100%" height="100%" viewBox="-100 -100 200 200" version="1.1"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle cx="-50" cy="-50" r="30" style="fill:red" />
  <image x="10" y="20" width="80" height="80" xlink:href="recursion.svg" />
</svg>

     Embed the child svg in parent svg like,

<svg>
   <g>
      <svg>
         ...
      </svg>
   </g>
</svg>

Embedding SVGs into another SVG:

<image x="10" y="20" width="80" height="80" xlink:href="image.svg" />

     After that the embedded SVG will takes a rectangular shape with provided dimensions.

Simply to say that if our embedded SVG is a circle or some other shape than a square, then it will become a square with transparency. Thus, the mouse events can get trapped into that embeded square and will not reach the parent SVG.

     To fill a shape, either a circle, a square or even a path is a good approach to using a pattern

<defs>
  <pattern id="pat" x="0" y="0" width="500" height="500" patternUnits="userSpaceOnUse">
    <image x="0" y="0" width="500" height="500" xlink:href="images/mysvg.svg"></image>
  </pattern>
</defs>

     Then use the pattern like given  below,

<circle cx="0" cy="0" r="250" fill="url(#pat)"></circle>

     At current, the mouse events will not get stuck into transparent image squares.

I found that using the <image> tag gave a low-quality render of the embedded file. However the following technique worked (to embed an SVG file inside an SVG file – not necessarily for rendering on an HTML page):

• Edit the SVG file in a text editor.
• Find the end of the metadata:

  </metadata>
    <g
     id="layer1"
     inkscape:groupmode="layer"
     inkscape:label="Layer 1">

• Insert this line after that group tag:

  <use xlink:href="OTHERFILE.svg#layer1" y="0" x="0" />

• In this case we are including OTHERFILE.svg into the file, and all of layer1 (the first and default layer).
• Save this and then open the file in Inkscape.

This technique is useful for having a standard background or logo on every page. By putting it first in the file it will be rendered first (and thus at the bottom). You could also lock it by adding this attribute:

sodipodi:insensitive="true" 

In other words:

<use xlink:href="OTHERFILE.svg#layer1" sodipodi:insensitive="true" y="0" x="0" />

 Using an <img> tag

The best and the simplest way to embed SVG into HTML is to use the <img> tag. It has a syntax that is similar to how we embed other image formats like PNG, JPEG and GIF:

<img src="image.svg" />

Losing fonts

If you use an <img> tag with web fonts, the fonts will fail to render and resort to using only system fonts.

This is mainly because images with <img> tags are not allowed to refer to external resources including CSS, fonts and scripts, for security reasons.

You can manually embed fonts into your SVG to resolve this, but most times, will result in large SVG size, and therefore negating the advantages SVG has, over other image formats.

The exception being, to use vecta.io or vecta.io/nano to produce an SVG that is very low in size, self contained without losing any fonts, and reduced complexity in your workflow. They not only minify the SVG but also minify the fonts as well, resulting in a very small SVG (22% smaller than competition), comparable to PNG @1X resolution, saving you a ton of bandwidth and makes your site load faster.

Embedding fonts is just a matter of drag and drop, and results in impressive quality without sacrificing file sizes.a

Using an <object> tag

If you require interactivity, this is your best option:

<object type="image/svg+xml" data="image.svg"></object>

Technically, <object> tags can be used on many elements, including SVG files, and therefore not recognized as image elements, thus not available on image search. The workaround is to use an <img> tag as fallback:

<object type="image/svg+xml" data="image.svg">
    <!-- Your fall back here -->
    <img src="image.svg" />
</object>

Double loading

The only problem is double loading, that is the browser will load the image on the <object> tag, and another image on the <img> tag, even though only one of them is required, while the other is hidden. If you cache your images, and mark these files as cacheable on your server, at least, the browser will load these images from the cache, but still, there is no stopping the phrsse