Embed SVG in SVG ?

Embed SVG in SVG ?

Asked on January 12, 2019 in XML.
Add Comment


  • 6 Answer(s)

         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>
    
    Answered on January 12, 2019.
    Add Comment

         Embed the child svg in parent svg like,

    <svg>
       <g>
          <svg>
             ...
          </svg>
       </g>
    </svg>
    
    Answered on January 12, 2019.
    Add Comment

    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.

    Answered on January 12, 2019.
    Add Comment

    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" />
    Answered on January 13, 2019.
    Add Comment

     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" />
    Browser support The <img> tag is now supported across all major browsers that support SVG (IE9+).
    Alt and title attributes Both available.
    Browser caching Available.
    GZip compression Available.
    Interactivity None. If interactivity is required, use <object> tag.
    Search engine indexing Available.
    Workflow Streamlined, as with other image formats.

    Losing fonts

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

    Losing fonts when using SVG with img tag

    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.

    No loss of fonts if embedded

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

    Answered on February 24, 2019.
    Add Comment

    Using an <object> tag

    If you require interactivity, this is your best option:

    <object type="image/svg+xml" data="image.svg"></object>
    Browser support The <object> tag is supported across all major browsers that support SVG (IE9+).
    Alt and title attributes None.
    Browser caching Available.
    GZip Compression Available.
    Interactivity Available.
    Search engine indexing None. Workaround available, but with compromises.
    Workflow Medium. Requires extra work in referring to external CSS and font files.

    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

    Answered on February 24, 2019.
    Add Comment


  • Your Answer

    By posting your answer, you agree to the privacy policy and terms of service.