SVGMagic ist ein jQuery Plugin, dass eine automatische Fallback Lösung für SVG Grafiken bietet. Da SVG Grafiken noch nicht komplett Browser abdeckend benutzt werden können bedarf es eine gute Fallback Lösung, wenn man Vektor Grafiken einsetzen möchte.
Da Vektor Grafiken für hochauflösende Displays und auch für mobile Endgeräte einen enormen Vorteil gegenüber normalen Grafiken haben. SVGMagic bietet genau dafür eine durchaus gute Lösung.
Unterstützt der Browser keine SVG Dateien durchsucht SVGMagic dein HTML und deine Stylesheets nach URI's zu SVG Dateien. Findet es welche so werden diese an einen Server gesendet, der daraus ein PNG generiert. Beides wird auf den SVGMagic Server gespeichert damit die nächste Verarbeitung schneller funktioniert. Auf Wunsch kann die Verbindung auch per HTTPS stattfinden.
Um SVGMagic zu benutzen müsst ihr euch nur von der Website das Javascript runterladen und so einbinden:
$(document).ready(function(){
$('img').svgmagic();
});Es kann noch einiges konfiguriert werden, wie zum Beispiel ein Preloader, der solange angezeigt wird bis das Bild generiert ist.
$('img').svgmagic({
preloader: {url-to-preloader/false}, // Preloader before the image gets replaced, default: false
testmode: {false/true}, // SVGMagic works in every browser if set to true, default: false
secure: {false/true}, // Images are sent via https:// if set to true, default: false
backgroundimage: {false/true}, // Check given div for backgroundimages, default: false
callback: {false/function} // Function to run after images are changed, default: false
dumpcache: {false/true} // Force to remove the cache and create a new .PNg, default: false
});Alle Informationen könnt ihr auch auf der Website von SVGMagic finden.