CODEWITHSUNDEEP
javascripthtmlimagecsssvg
Schneider
Schneider

Reputation: 2496

What is best practice to use SVG on page?

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?

Upvotes: 0

Views: 1911

Answers (1)

WhiteLine
WhiteLine

Reputation: 1991

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

Upvotes: 1

Related Questions