Do I use , , or for SVG files?

by

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="https://stackoverflow.com/questions/4476526/your.svg" type="image/svg+xml">
  <img src="https://stackoverflow.com/questions/4476526/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="https://stackoverflow.com/questions/4476526/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.

More Related Contents:

  1. How to set a stroke-width:1 on only certain sides of SVG shapes?
  2. How to draw human body in html5 svg and roate it in 360degree [closed]
  3. How to apply a style to an embedded SVG?
  4. SVGs not scaling properly in IE – has extra space
  5. Add a background image (.png) to a SVG circle shape
  6. html/css hexagon with image inside
  7. Setting transform-origin on SVG group not working in Firefox
  8. make an html svg object also a clickable link
  9. Using base tag on a page that contains SVG marker elements fails to render marker
  10. Linking to CSS in an SVG embedded by an IMG tag
  11. Creating a ‘New’ spiky label with 24 or above point burst
  12. Extracting SVG from Font Awesome
  13. How to cut a circular part from an image?
  14. Making an svg image object clickable with onclick, avoiding absolute positioning
  15. SVG image inside circle
  16. Draw double curved item with beveled edges
  17. How to get rid of extra space below svg in div element
  18. How to get ScrollBars in SVG?
  19. div with triangle at the bottom with background image
  20. Insert HTML code inside SVG Text element
  21. Cross-browser embedded font in svg image
  22. How do I create a teardrop in HTML?
  23. Favicon Standard – 2023 – svg, ico, png and dimensions? [duplicate]
  24. How to render svg elements with crisp edges while still keeping anti-aliasing?
  25. How to display multiple lines of text in SVG?
  26. Resizing SVG in html?
  27. Accessibility: recommended alt-text convention for SVG and MathML?
  28. svg background image position is always centered in internet explorer, despite background-position: left center;
  29. Emulate IE7 for IE8 but not for IE9 using “X-UA-Compatible”
  30. How can I display an image inside SVG circle in html5?

Leave a Comment