SVGMagic demo page

The images on this page are all SVG files. SVGMagic normally only replaces that images if your browser doesn't support SVG files, but on this demo page it will run in every browser. Have you noticed that it replaced the images? No? Good!

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({
   testmode: true,
   secure: true
});

Sroll down for more demos.

Bigger demo

In the first demo we used one image. SVGMagic can ofcourse 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 preloader 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({
   testmode: true,
   preloader: "style/ajax-loader.gif",
   secure: {true/false},
   callback: placeTime
});

CSS background-image

Awesome huh? SVGMagic also supports CSS background images. Just parse in the element and the option backgroundimage and SVGMagic will do the rest!

Replace BG-image with SVGMagic

50% 100% 250%

Code used

$('.bgimage').svgmagic({
   testmode: true,
   backgroundimage: true
});