ZorroSVG (live rendered)

Change JPEG Compression Quality here to find the optimum quality/size ratio:

Images created with ZorroSVG can be used like any other image. Simply embed the transparent bitmap in your html like this:

<img src="yourImage.svg" />

If you want to be on the safe side you can add a fallback which will display the old png in case the browser does not support SVG. Your html tag would look like this:

<img src="yourImage.svg" onerror="this.src='yourOriginal.png'"/>

And if you really care about users that still use mobile-Safari on iOS 7 you will have to use an object tag instead of the img tag: