The transparency of PNGs for the file size of JPEGs
Drag a transparent PNG or GIF from your desktop onto this page or use the file picker and see how many kB ZorroSVG can save you.
Images created with ZorroSVG can be used like any other image. Simply embed the transparent bitmap in your html like this:
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:
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:
ZorroSVG has some minor pitfalls you should be a aware of:
AddType image/svg+xml .svg .svgz
Transparent PNGs are great, but they come at a price: file size. Wouldn't it be nice if there were transparent JPEGs instead? Unfortunately there is no such thing, but ZorroSVG gives you the power of transparent PNGs for the size of a JPEG.
The SVGs created by ZorroSVG can be used like any other image by simply using the <img> tag to embed it into your page.
The tool on this page helps you to convert your current PNGs to the ZorroSVG image format. Give it a try!