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)?](https://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement/11978996) 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