Embed SVG in SVG ?

Embed SVG in SVG ?

Asked on January 16, 2019 in XML.
Add Comment


  • 6 Answer(s)

    Use the image element and reference your SVG file. For fun, save the following 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 24, 2019.
    Add Comment
    It is worth mentioning that when you embed SVGs into another SVG with:
    <image x="10" y="20" width="80" height="80" xlink:href="image.svg" />

    then the embedded SVG takes a rectangular shape with given dimensions.

    That is to say, if your embedded SVG is a circle or some shape other than a square, then it becomes a square with transparency. Therefore, mouse events get trapped into that embeded square and do not reach the parent SVG. Watch out for that.

    A better approach is using a pattern. To fill a shape, either a circle, a square or even a path.

    <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 this:

    <circle cx="0" cy="0" r="250" fill="url(#pat)"></circle>
    Answered on January 24, 2019.
    Add Comment

    Design considerations

    Alt and title attribute availability

    When we embed an image onto HTML, it’s always good to have alt and titleattributes, for better accessibility. An alt attribute allows a user to view the image description, even when it fails to render on a device, in addition to providing context for search engines. A title attribute allows hovering over the image to obtain more information. Ideally, whatever way you choose to embed an SVG, you should have alt and title attributes.

    Browser caching

    We all know page speed will be a ranking factor on search engines, especially on mobile sites. It pays to enable browser caching for all static assets including SVG images. Ideally the embedding method will allow easy browser caching and cache busting.

    GZip Compression

    Unlike PNG and JPEG formats (practically, already compressed), SVG images are very well suited for compression. According to the World Wide Web Consortium, SVG offers anything between 75% – 85% compression ratio, reducing a 16KB file to only 4KB, resulting in considerable bandwidth and speed savings.

    Answered on February 24, 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.

    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 double loading.

    Answered on February 24, 2019.
    Add Comment

    Using inline SVG in HTML5

    Essentially you are embedding all your SVG codes inside your HTML:

    <body> 
       <svg xmlns="http://www.w3.org/2000/svg">
           <text x="10" y="50" font-size="30">My SVG</text>
       </svg> 
    </body>
    Browser support Supported across all major browsers that support SVG (IE9+).
    Alt and title attributes None.
    Browser caching None.
    GZip compression None.
    Interactivity Available.
    Search engine indexing None.
    Workflow Convoluted.

    Because inline SVG is embedded into HTML, there is no necessity for another network request to obtain the SVG file, and therefore inline SVG will load the fastest.

    Be aware that you will still get FOUC (Flash of unstyled content) because chances are, your inline SVG will still refer to an external font. To solve FOUC, you will require embedded fonts as listed in Using an <img> tag.

    Since the SVG is essentially the DOM, you can easily use external CSS, fonts and scripts. Multiple SVG can be inlined that refers to a single CSS or font files, therefore saving bandwidth and resources.

    In addition, you get the ability to select, highlight and copy text in your SVG, plus the ability for search engines to index these text (Our opinion is that one should rely on HTML for SEO, and leave SVG separated, so we can index text using HTML and index images using SVG).

    Workflow is way more complicated since SVG is mixed with HTML, and requires a lot more work maintaining dependencies

    Answered on February 24, 2019.
    Add Comment


  • Your Answer

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