ZorroSVG - Put a Mask on it

The transparency of PNGs for the file size of JPEGs

Try it

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.

Original Transparent PNG
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:

<object data="yourImage.svg" type="image/svg+xml"/>

The small print

ZorroSVG has some minor pitfalls you should be a aware of:

  • It only runs on browsers that support SVG 1.1 - which all the latest browsers do.
  • Right now there are some subtle brightness differences in semi-transparent areas (maybe you can spot them in the example image's soft shadow). They might be gamma or color-profile related and I am still trying to improve on this.
  • Some (older) servers do not serve the correct response headers for SVG files. In that case you have to add a .htaccess file to your image folder which contains the line:
    AddType image/svg+xml .svg .svgz
  • There are cases where the size of the original PNG is actually smaller than the SVG version. That is usually the case with images that have large monochrome areas or certain types of linear gradients. In these cases PNG can use some very efficient compression methods that are better suited than JPEG. Well, you can't win all the time.
  • Before somebody points it out: I am not a big fan of the base64 encoding that I have to use to embed the JPEG inside the SVG since it increases the size of the data by a factor of 1.37. For that reason I originally had allowed the option to save the JPEG as a separate file which gets loaded automatically by the SVG code. The problem was that the handling of relative image paths inside of SVGs does not seem to be consistent across browsers. But feel free to check out the Javascript of this page - the code to generate a two map version is still there.
  • Right now this map creation tool does not work on Internet Explorer (something weird with jQuery I still have to figure out - any pointers how to fix it are more than welcome).
  • The SVG file download does not seem to work in Safari. Well, this can fortunately be avoided by using a proper browser instead.

A few more examples:

Version History

v1.0

  • Initial Release

v1.1

  • Applying gamma correction to the alpha mask to correct opacity differences between the original PNG and the SVG

v1.2

  • Removed the gamma correction code for iPad and iPhone - it looks like the behaviour of the semi-transparent pixels is platform specific - any feedback on browsers that still show different results for the PNG and the SVG is more than welcome.

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.

It achieves this by converting your PNG to an SVG which uses the compositing capabilites of SVG to create a masked bitmap on-the-fly using JPEGs for both the image and its mask - achieving most of the time a much better compression than PNG. Since all the compositing and masking happens inside the SVG there is no JavaScript required. And it will work on any current browser.

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!