Das könnte dich auch interessieren

Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Design

SVGMagic: Automatischer SVG-Fallback für deine Webseite

    SVGMagic: Automatischer SVG-Fallback für deine Webseite

SVGMagic. (Foto: yukop / flickr.com, Lizenz: CC-BY-SA)

SVG-Grafiken sind seit Responsive Webdesign und Retina-Display kaum hoch wegzudenken. Fall-Back-Lösungen sind jedoch ein hartes Stück Arbeit. Mit SVGMagic soll sich das ändern – wir zeigen euch wie.

SVGMagic: Fall-Back-Lösung für Browser ohne SVG-Unterstützung

Das SVG-Format hat in letzter Zeit ein wahres Comeback erfahren. Das teilweise für tot erklärte Vektor-Format erfreut sich spätestens seit Retina-Displays einer erhöhten Popularität, und auch für den Einsatz im Responsive Webdesign als verlustfrei skalierendes Grafikformat sind SVG eine gute Wahl.

Wie bei vielen schönen Dingen im Web hat auch diese Technologie ihre Schattenseiten. Insbesondere der Support von älteren Browsern, aber auch einigen mobilen Plattformen, lässt hier zu wünschen übrig. Der technische und organisatorische Aufwand für Fallback-Lösungen überwiegt hier nicht selten die Vorteile, die mit dem Einsatz von SVG erzielt werden können.

Das jQuery-Plugin SVGMagic nimmt dir diese Probleme ab und leistet dabei ganze Arbeit. Es untersucht deine Webseite und liefert bei Bedarf vollautomatisch eine Fall-Back-Lösung für Browser ohne SVG-Unterstützung. Hierfür sammelt SVGMagic die URIs der SVG-Grafiken und sendet sie an eigene Server. Diese laden die Grafiken runter und erstellen PNG-Grafiken, deren URIs dann im Austausch an den Client zurückgeschickt werden.

SVGMagic Funktionsweise
SVGMagic untersucht deine Webseite und tauscht bei Bedarf SVG-Grafiken durch PNGs aus. (Grafik: SVGMagic)

Die verarbeiteten Grafiken werden auf den Servern von SVGMagic gespeichert, um später eine schnellere Verarbeitung zu ermöglichen. SVGMagic beschränkt sich dabei nicht nur auf Elemente im DOM, sondern kann zusätzlich Grafiken im Stylesheet deiner Webseite austauschen.

SVGMagic einbinden

Das Einbinden von SVGMagic ist äußerst simpel. Nachdem das jQuery-Plugin eingebunden ist, muss es beim Document-Ready-Event aufgerufen werden. Alles andere passiert automatisch.

$(document).ready(function(){
$('img').svgmagic();
});

Um Ladezeiten bei der Verarbeitung der SVG-Grafiken zu überbrücken, bietet das Skript zusätzliche Konfigurationsmöglichkeiten, wie das automatische Einbinden einer Preload-Grafik. Bei Bedarf kann sämtliche Kommunikation mit SVGMagic über https erfolgen.

$('img').svgmagic({
preloader: "/style/ajax-loader.gif",
secure: {true/false},
callback: placeTime
backgroundimage: true
});

SVGMagic ist eine sehr bequeme Lösung für Webworker, die den Aufwand eines eignen Fallbacks scheuen, aber dennoch nicht auf die Vorteile von SVG verzichten können oder wollen. Auf der offiziellen Webseite von SVGMagic kannst du dir selbst ein Bild von der Bibliothek machen. Eine ähnliche Lösung für automatisch generierte Responsive Images bietet dir Mobify.

Finde einen Job, den du liebst zum Thema Webdesign

8 Reaktionen
Philipp Blum
Philipp Blum

@Benny Scheiße, habe gar nicht gesehen, dass Android 2.3 keine svgs kann. Was für ein Misst. Gerade mal geschaut, wie viele denn 2.3 noch haben. Sind schon einige.

Antworten

Thomas D.
Thomas D.

@Phillipp: Das Problem sind u.a. Firmen, die den IE einmal installiert haben und keine Alternativen bieten und auch nicht erlauben, dass man sich selbst eine Alternative sucht bzw. installiert.

Antworten

Karsten
Karsten

@Heinz44 Ich finde Hundekacke auf dem Gehweg auch Scheisse und überlege ebenfalls, auf meiner Webseite Popups für Hundebesitzer einzubauen. Aber hier geht's doch jetzt darum, wie man die User von nicht-SVG-fähigen Browsern glücklich macht. Weitere Möglichkeiten:
https://code.google.com/p/svgweb/
http://raphaeljs.com/
http://benhowdle.im/svgeezy/

Antworten

Benny Lava
Benny Lava

@Philipp: Der IE ist nicht das Problem. Die XP-Benutzer, die nicht über IE8 hinauskommen, werden jetzt nach dem Ende des Supports eh updaten müssen.

Wer aber noch mit Android 2.3 unterwegs ist, hat keine Chance für ein Update.

Antworten

tollwerk
tollwerk

Ich denke, Tools wie SVGMagic sollten tatsächlich nur als äußerster Notnagel zum Einsatz kommen, wenn keine andere Lösung realisierbar ist, aus mehreren Gründen:

* Die betroffenen Browser (und Heinz44 hat Recht: So viele sind es gar nicht) werden in der Regel überflüssige HTTP-Requests zu bewältigen haben, weil Sie dennoch die SVG-Dateien herunterladen werden (zusätzlich zu den nachträglich zugeladenen PNG-Fallbacks). Das wird speziell im mobilen Netz zur Strafe.
* Es ist unklar, inwieweit bei dieser Technik sinnvolles Caching der generierten PNG-Fallbacks genutzt wird / werden kann.
* Weshalb sollte ich den Server eines mir nicht näher bekannten Drittanbieters durch Abruf der PNG-Fallbacks wissen lassen, dass ich eine bestimmte Website besuche? Hier entsteht sicher dieselbe Datenschutzproblematik, die auch für Google Analytics gilt. Als nächsten brauchen wir einen Opt-Out für PNG-Fallbacks ...
* Und schließlich bleibt die jQuery-Abhängigkeit, die aus meiner Sicht streitbar ist ...

Tatsächlich gibt es mittlerweile einige Lösungen, mit denen PNG-Fallbacks selbst für Laien bequem vorzubereiten sind und die sich elegant in jeden Workflow integrieren lassen. Ich darf in diesem Zusammenhang auf mein iconizr-Projekt hinweisen, das sowohl als webbasierter Dienst (http://iconizr.com), als auch als PHP-Kommandozeilen-Tool (http://github.com/jkphl/iconizr), als auch Node.js-Modul (https://github.com/jkphl/node-iconizr) und Grunt-Plugin (https://github.com/jkphl/grunt-iconizr) zur Verfügung steht. Alternativ kommt für Grunt auch das bekannte Grunticon (https://github.com/filamentgroup/grunticon) in Frage.

Antworten

Philipp Blum
Philipp Blum

@Heinz44: Es ist halt einfach wieder der IE der Probleme macht. Was neues ist das ja nicht... Ich bin echt am überlegen allen IE Usern Pop-Up anzeigen zu lassen, auf dem steht: "Ey Leute, mal ernsthaft: Microsoft verarscht euch. Der Internet Explorer ist der schlechtes Browser den es gibt. Warum das so ist: Das kannst du hier lesen. Bitte wechsel zu einem anderen Browser. Egal welchen. Das erspart uns und auch dir sehr viel Ärger.

Antworten

Heinz44
Heinz44

So schlimm steht es um SVG-Support gar nicht. http://caniuse.com/svg Die alten IE-Versionen und Android Devices werden nach und nach abgebaut.

Antworten

hipp.ms
hipp.ms

Ich hatte jetzt bei der letzten Webseite auch bewusst auf einen Fallback verzichtet ( http://hipp.ms/ ), vor allem für Mobilgeräte ist genug Support vorhanden, auch im Desktop-Bereich sieht es nicht so schlimm aus. Kann mich da @tollwerk nur anschließen: Für mich überwiegen bei SVGMagic die Nachteile.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen