t3n News Design

SVGMagic: Automatischer SVG-Fallback für deine Webseite

SVGMagic: Automatischer SVG-Fallback für deine Webseite

SVG-Grafiken sind seit 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: Automatischer SVG-Fallback für deine Webseite

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

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.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
8 Antworten
  1. von Heinz44 am 06.04.2014 (10:41 Uhr)

    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 Teilen
    • von hipp.ms_Webdesigner_Stuttgart am 28.02.2015 (15:20 Uhr)

      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 Teilen
  2. von Philipp Blum am 06.04.2014 (11:44 Uhr)

    @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 Teilen
  3. von tollwerk am 06.04.2014 (14:09 Uhr)

    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 Teilen
  4. von Benny Lava am 06.04.2014 (14:16 Uhr)

    @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 Teilen
  5. von Karsten am 06.04.2014 (18:36 Uhr)

    @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 Teilen
  6. von Thomas D. am 06.04.2014 (19:05 Uhr)

    @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 Teilen
  7. von Philipp Blum am 07.04.2014 (03:24 Uhr)

    @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 Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Responsive Webdesign
Content first: Workflows im Zeitalter von responsive Webdesign
Content first: Workflows im Zeitalter von responsive Webdesign

Auch in diesem Jahr drehte es sich auf der Developer Week um UX- und UI-Design. Im Panel von Patrick Lobacher haben wir uns inspirieren lassen. » weiterlesen

Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite
Responsive Webdesign: 18 kostenlose Tools und Extensions zum Testen deiner Seite

Beim Responsive Webdesign können Tools und Test-Werkzeuge viel Zeit sparen. Das einfache Umschalten zwischen Viewport-Größen vereinfacht die Arbeit enorm. Wir stellen euch 18 kostenlose Tools, … » weiterlesen

Responsive Design: Zehn kostenlose Webdesign-Templates
Responsive Design: Zehn kostenlose Webdesign-Templates

Das Web findet längst nicht mehr nur auf dem Desktop statt und so ist es kein Wunder, dass Responsive Design in aller Munde ist. Damit passen sich die Webseiten dem Endgerät des Besuchers an und … » weiterlesen

Alle Hefte Jetzt abonnieren – für nur 35 €

Kennst Du schon unser t3n Magazin?