Do I Use ≪Img≫, ≪Object≫, or ≪Embed≫ For Svg Files

Do I use img, object, or embed for SVG files?

I can recommend the SVG Primer (published by the W3C), which covers this topic: http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html#SVG_in_HTML

If you use <object> then you get raster fallback for free*:

<object data="your.svg" type="image/svg+xml">
  <img src="yourfallback.jpg" />
</object>

*) Well, not quite for free, because some browsers download both resources, see Larry's suggestion below for how to get around that.

2014 update:

• If you want a non-interactive svg, use <img> with script fallbacks
  to png version (for older IE and android < 3). One clean and simple
  way to do that:

  <img src="your.svg" onerror="this.src='your.png'">.

  This will behave much like a GIF image, and if your browser supports declarative animations (SMIL) then those will play.

• If you want an interactive svg, use either <iframe> or <object>.

• If you need to provide older browsers the ability to use an svg plugin, then use <embed>.

• For svg in css background-image and similar properties, modernizr is one choice for switching to fallback images, another is depending on multiple backgrounds to do it automatically:

  div {
      background-image: url(fallback.png);
      background-image: url(your.svg), none;
  }
  

  Note: the multiple backgrounds strategy doesn't work on Android 2.3 because it supports multiple backgrounds but not svg.

An additional good read is this blogpost on svg fallbacks.

How to use external SVG in HTML?

You should embed the image by using <object> tag:

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

Refer to this question for the details: Do I use <img>, <object>, or <embed> for SVG files?

Is it accessible to use SVG in IMG tag?

Yes SVGs in an image tag are accessible with an alt. I have also seen an aria-label used but this is probably not necessary. You can also use SVGs natively (without the img tag) follow these specifications:

• Official spec here for accessible svgs:
  
  w3.org/TR/SVG11/access.html#SVGAccessibilityGuidelines
• and an article here on WebAim for the Future of SVG accessibility: webaim.org/blog/future-web-accessibility-svg
• and here the W3C Editor's Draft (meaning it's not yet complete): w3.org/TR/SVG/access.html#SVGRelatedAccessibilityDocuments

Make sure to test with the SiteImprove Chrome Extension and whichever screenreader you have access to, JAWS, NVDA or VoiceOver. If the svg is properly read, then chances are it's passed Accessibility.

Can I use a SVG object in place of an img file on web page?

Tough to tell out of context, but just from the code you have there it seems like you ought to assign a size to the svg element.

Sizing with svg is a little odd, since it's meant to be scalable. I would recommend adding three extra attributes to your <svg> tag:

width and height which are the size at which the svg element is displayed on the page. These are pretty straightforward and you can adjust them with your css.

viewBox is the really important one. It defines the boundaries of your image, and gives you a lot of control over relative sizing. Its value should be a string with 4 space-separated values: x y w h where x and y represent the coordinates of the top-left corner of the part of the image that will be visible, and w and h are the width and height of the visible portion of the image. These coordinates are relative within your drawing and will be scaled to the display size defined by width and height.

If the coordinates of your path or other svg elements lie outside of the viewBox they will be effectively cropped away.

I put together a fiddle that should help to illustrate how width, height, and viewBox relate. Hope that helps.

Request part of SVG in img (or object)

What you want to achieve is easiest done with another inline SVG instead of a <img> or <object> tag:

<svg style="width:200px;height:200px" viewBox="35 50 150 150">
    <use xlink:href="myFile.svg#head" />
</svg>

Two things you need to get right are

• the viewBox: to get just the part of your SVG that you want, you have to identify where the path is and what bounding box it has. The <use> element takes care that only the element you select is visible, but it does not identify where inside that image the element is.
• the overall size your selected element is shown at. SVG has no notion of a "natural size, you always have to give a width and height. The viewBox will then be fitted inside that area.

Applying CSS to img-tag-embedded SVG images

Well it can be achieved through JQuery ( Work Around ) , this Jquery function will convert <img> tag that hold current svg image into a <svg> inline tags, you can view it in your browser debugger.In short it will mimic as if directly inserted the SVG image.

<script type="text/javascript">

    $(document).ready(function() {
        $('#img').each(function(){
            var img         = $(this);
            var image_uri   = img.attr('src');

            $.get(image_uri, function(data) {
                var svg = $(data).find('svg');
                svg.removeAttr('xmlns:a');
                img.replaceWith(svg);
            }, 'xml');

        });
    });
</script>


<img id='img' src="my.svg" />

Embed SVG in SVG?

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">
  <circle cx="-50" cy="-50" r="30" style="fill:red" />
  <image x="10" y="20" width="80" height="80" href="recursion.svg" />
</svg>

---

Related Topics