0

I know on this question have many articles, but i dont know what is best practice to use today?

I use many svg on my page, but problem is cross browser showing. I know how to use them, but can someone tell me what is the best and why?

Here is examples of all tags that can be used, but what to use??

IFRAME

 <iframe src="logo.svg" width="241" height="57" scrolling="no" frameBorder="0"></iframe>

HTML

<img src="logo.svg" alt="Company Logo" onError="this.onerror=null;this.src='logo.png';"/>

Javascript

var imgs = document.getElementsByTagName('img');
var endsWithDotSvg = /.*\.svg$/
var i=0;
var l = imgs.length;
for (; i != l; ++i) {
    if (imgs[i].src.match(endsWithDotSvg)) {
        imgs[i].src = imgs[i].src.slice(0, -3) + "png";
    }
}

I know there i can use Modernize the same way, but what to use, what is best practice?

Schneider
  • 2,446
  • 6
  • 28
  • 38
  • You could check out [RaphaelJS](http://raphaeljs.com/) – Ron van der Heijden Mar 26 '14 at 07:57
  • Beware: Often times, the file size of an SVG file is greater than the file size of a compressed rasterized image. To reduce traffic, you might want to compare if your vector image files are even worth the trouble. :) – Chiru Mar 26 '14 at 08:32
  • It should be noted that because SVG are ASCII/XML files, they can often compress with GZIP much farther than traditional image files. So even if they are slightly larger on disk, they may actually use less bandwidth when transferring across the wire. – LocalPCGuy May 19 '15 at 14:20

1 Answers1

1

you can check the compatibility with Modernizr with jquery

if (!Modernizr.svg) {
  $("myimg").attr("src", "images/logo.png");
}else{
  $("myimg").attr("src", "images/logo.svg");
}

another possibility with html

<img src="image.svg" onerror="this.onerror=null; this.src='image.png'">

another plugin-solutions

svgeezy

WhiteLine
  • 1,919
  • 2
  • 25
  • 53