SVGMagic documentation and demo page

The images on this page are all SVG files. SVGMagic normally only replaces these images if your browser doesn't support SVG, but on this demo page they will always be replaced thanks to the forceReplacements mode.

50% 100% 250%

If you use the buttons above you will see that the image on the left has been replaced by a PNG image. The image on the right is the original vector image (assuming you are now using a browser that does support SVG images).

Code used

$('img.replace').svgmagic({
   forceReplacements: true
});

Sroll down for more demos.

Bigger demo

In the first demo we replaced one image. SVGMagic can of course replace multiple images at the same time. In the demo below we added some extra SVG images. Click on the button to start the script. We also added an extra parameter to the options that shows a temporaryHoldingImage on the place of the images if replacing takes to long.

Start SVGMagic (normal) Start SVGMagic (secure) Reset images to SVG

50% 100% 250%

Runtime: 0 MS

Code used

$('img.seconddemo').svgmagic({
   forceReplacements: true,
   temporaryHoldingImage: "./style/ajax-loader.gif",
   additionalRequestData: {secure: true/false},
   postReplacementCallback: placeTime
});

CSS background-image

SVGMagic also supports CSS background images. Just parse in the element and the option handleBackgroundImages and the script will do the rest!

Replace BG-image with SVGMagic

50% 100% 250%

Code used

$('.bgimage').svgmagic({
   forceReplacements: true,
   handleBackgroundImages: true
});

Data URIs

SVGMagic also automatically supports inline data-uris. You don't have to specify any extra options for this to work.

Replace datauri image with SVGMagic

50% 100% 250%

Code used

$('.datauri').svgmagic({
   forceReplacements: true
});