Embedded SVG (with fallback) without using jQuery

Question

I need a way to 1) embed an SVG with a PNG fallback, and 2) use CSS in an external stylesheet to style colors on certain parts of the SVG while 3) without using jQuery.

Background:
At work we link to the same resources on our servers across multiple websites, so this way if we have an update to the resource we don't have to individually update it on 20 sites. An external stylesheet is used so we can make the resource (in this case the SVG) mimic the theme of whatever website we place it on.

My Solution:
I originally did it with jQuery but then was told by my boss that we need a plain JS solution since he doesn't want to have to load jQuery on some of the old sites we have (this sounds silly to me, but I'm not the boss).

My original solution used:

1. http://www.noupe.com/tutorial/svg-clickable-71346.html (solution 3a.) for the SVG fallback, and

2. How to change color of SVG image using CSS (jQuery SVG image replacement)? for embedding an SVG.

   <a href="link-to-another-page" >  
   <img class="svg" src="awesome.svg" alt="An awesome SVG" width="186" height="235" onerror="this.removeAttribute('onerror'); this.src='not-as-awesome.png'" /> 
   </a>  
   <!--followed by the jQuery code in item #2-->
   

It works great, but uses jQuery. I am a JS beginner, so trying to convert the jQuery code over to regular JS has proved too confusing for me.

Any suggestions would be helpful, but like I said, this needs to:

1. Be clickable
2. Not use jQuery
3. Allow for SVG styling in an external stylesheet

Answer 1

I would suggest you remove your <img/> tag completely and use some tag with background image instead

for example you could use some your link instead:

<style>

.logo {
    display: inline-block;
    width: 400px;
    height: 200px;
    background-color: #some-color;
    background-image: url('url.png');
    background-image: url('url.svg'); //browsers that not support svg should ignore it completely and .png background would be applied and modern browsers would reassign background image
}

</style>

<a class="logo" href=""></a>

another method would be to embed svg directly since it's no problem in html5:

<style>

​svg {
    background: #f7f7f7;
    border: 1px solid #efefef;
}
​.logo {
    display:inline-block;
    width: 400px;
    height: 200px;
    background: yellow url('some iamge url here');
}​

</style>

<a class="logo" href="">
    <svg xmlns="http://www.w3.org/2000/svg"
        version="1.1" baseProfile="full"
        width="100%" height="100%" viewBox="0 0 700 400">
        <rect x="100" y="100" width="500" height="200" fill="white" stroke="black" stroke-width="20px"/>
    </svg>
</a>​

the good thing is that html5 has no issues applying display: block to link elements i think there shouldn't be any with inline-block and since you wanted to wrap your logo with a link tag it should be perfect solution even ie7 has no problems applying display: block with link elements like with any other inline elements. I prefer the first method since it has better browser support you can check it embed inline SVG and SVG as background image

P.S style tags have no place within your html but i think everyone knows it:) and if you don't know how to use inline svg just open inkscape it has xml editor and there you can just copy your svg and paste it within html.

Answer 2

SVGeezy is just what you are looking for:

https://github.com/benhowdle89/svgeezy

it's a js file that's just a few lines that deals with bitmap fallbacks in pure javascript.