Kategorien
Design HTML/CSS

HTML5: Grafische Website-Header mit SVG auflösungsunabhängig realisieren

Die Zahl möglicher Bildschirmauflösungen, die wir als Webentwickler zu bedienen haben, steigt unaufhaltsam. Eben erst wurde bekannt, dass mittlerweile 40% der Chip-Produktion in Bereiche fließt, die nicht den klassischen Computer bedienen, sondern die Intelligenz von Kühlschränken und anderen Gegenständen des täglichen Lebens erhöhen sollen. Das sog. Internet der Dinge ist auf dem Vormarsch. Selbst wenn diese Entwicklung uns am heutigen Tage noch nicht zu hektischer Betriebsamkeit veranlassen muss, reichen die tatsächlich realisierten Veränderungen, etwa in den Bereichen der Mobilgeräte, wie Tablets oder Smartphones, aus, um uns klar werden zu lassen, dass wir an der Flexibilität und Skalierbarkeit unserer Websites dringend arbeiten müssen.

Das MacBook Pro Retina zeigt zudem, wohin die Reise auch im Desktop- und Notebook-Bereich gehen wird. HiDPI-Screens werden schneller Flächendeckung erreichen, als wir heute ahnen. Wir müssen also auf der einen Seite immer kleinere Geräte mit immer besseren Bildschirmen bedienen und auf der anderen Seite unschöne Rastereffekte auf großen Bildschirmen mit HiDPI-Display vermeiden. Ich zeige Ihnen heute anhand eines alltäglichen Beispiels, wie uns SVG bei dieser Herausforderung unterstützen kann.

SVG und dieser Beitrag: Was ich erreichen will

Ich entwickle eine Website für einen Kunden. Diese möchte ich mit einem Logo-Header versehen, der, wie man das unter UX-Aspekten seit fast zwanzig Jahren gewohnt ist, per Klick auf die Startseite zurückführt. Aus den erwähnten Gründen der Skalierbarkeit und relativen Geräteunabhängigkeit will ich eine Lösung auf der Basis von SVG realisieren. Da ich die Nutzer älterer Browser aber nicht bestrafen will, sollte meine Lösung ein Fallback auf PNG-Basis enthalten, das möglichst ohne JavaScript auskommt.

Das Problem erscheint einfacher, als die Lösung tatsächlich ist, wie ich herausfand. Ich entwickelte einige Lösungsansätze, die unterschiedlich gut funktionieren und alle ihre Vor- und Nachteile haben. Im folgenden schauen wir uns die einzelnen Varianten einmal unvoreingenommen an.

Damit Sie einen Eindruck davon haben, was wir hier bauen wollen, zeige ich Ihnen mal das Logo, um das es hier gehen soll:

Eine Demo finden Sie hier, der Code steht auf Github.

Auf Caniuse erfahren Sie näheres zum Browsersupport für SVG.

Das SVG-Logo: Was ist das für ein Format und wie kann ich es erstellen?

SVG steht für Scalable Vector Graphics. Hierbei handelt es um eine Markup-Sprache, die zwei-dimensionale Grafiken, die frei skalierbar sind, beschreibt. Da SVG auf einer XML-Syntax basiert, kann man derartige Dateien mit jedem Texteditor öffnen, bearbeiten und erstellen. In der Regel wird man das allerdings so nicht tun, etliche Grafikprogramme, oder auch die kleine Bibliothek http://raphaeljs.com/ erlauben einen weit komfortableren Produktionsprozess.

Sind Sie Designer, ist es höchstwahrscheinlich, dass auch Ihre bevorzugte Design-Software in der Lage ist, SVG zu exportieren.. Illustrator und Inkscape sind Profis in dieser Disziplin, für Fireworks existiert die kleine Extension http://fireworks.abeall.com/extensions/commands/Export/.

Ein paar Regeln sollten Sie beim Generieren von SVG allerdings beachten:

  • Verwenden Sie keine komplexen Verläufe in Illustrator.
  • Verwenden Sie die Photoshop-Effekte aus Illustrator nicht.
  • Strukturieren Sie die Grafik gut. Benennen und gruppieren Sie die Ebenen.
  • Formen sollten stets zusammengeführt werden, wenn Pathfinder genutzt wird.
  • Text muss stets in Vektoren überführt werden, damit sichergestellt ist, dass die SVG auf allen Geräten identisch aussieht und nicht von der Verfügbarkeit des verwendeten Fonts abhängig ist.

Vereinfacht ausgedrückt: Halten Sie SVGs stets so simpel wie möglich, exportieren Sie sie und testen sie in so vielen Browsern wie möglich.

Für mein Beispiel verwende ich ein einfaches SVG-Logo ohne Verläufe und mit einfachen Farben. (Vielen Dank an Geeks and the City , die mir erlauben, ihr Logo hier zu verwenden. Das Logo ist deren Eigentum, ich verwende es mit ausdrücklichem Einverständnis. Sie können gern alle folgenden Codebeispiele frei verwenden, aber nicht das Logo.)

1. Die < object > embed Lösung

Hierbei handelt es sich um die konventionelle Lösung, SVG in Websites einzubetten. Der große Vorteil dieser Methode liegt darin, dass ein Fallback simpel dadurch erreicht wird, dass man die entsprechende PNG innerhalb eines IMG-Tags definiert:

Für eine Demo hier klicken

Der Quellcode:

<a href="#" >

<object class="logo" data="logo.svg" width="186" height="235"  type="image/svg+xml">

<img src="logo.png" width="186" height="235"  alt="Logo Geeks and the City" />

</object>

</a>

Vorteile:

  • Der Fallback für ältere Browser ist sehr einfach…
  • …und benötigt kein JavaScript.

Nachteile:

  • Der LInk wird nicht angezeigt in Browsern, die SVG unterstützen. Hier muss dieser um display:block ergänzt werden.
  • Zudem liegt der Link hinter dem SVG-Objekt, so dass man das Logo nicht direkt anklicken kann, sondern nur die Fläche drumherum.
  • Moderne Browser mit SVG- und PNG-Support laden beide Dateien herunter.

2. Die <svg> Tag Lösung mit foreignObject als Fallback

Mit HTML5 kommt der neue <svg> Tag. Dieser ermöglicht es, das komplette SVG-Markup in den Tag zu kopieren. Das foreignObject wird mit dem PNG-Fallback ausgestattet.

Für eine Demo hier klicken

Der Quellcode:

<a href="#svg_technique" >

<svg  class="logo" width="186" height="235">

<g id="nyt_x5F_exporter_x5F_info">

</g>

<g id="nudged">

<path style="fill:none;stroke:#000000;stroke-miterlimit:10;" d="M46.397,121.92"/>

……

<foreignObject width="0" height="0" overflow="hidden">

<img src="logo.png" width="186" height="235"  alt="Logo Geeks and the City" />

</foreignObject>

</svg>

</a>

Vorteile:

  • Der Link funktioniert jetzt.
  • Der Fallback funktioniert ohne JavaScript.

Nachteile:

  • Dadurch, dass das SVG komplett einkopiert wird, ist die Lösung nicht sehr flexibel. Jede kleine Änderung am SVG erfordert das erneute Einkopieren. Da verliert man schnell die Übersicht.
  • Nicht alle Browser implementieren die Syntax korrekt, da der Tag noch verhältnismäßig neu ist.

3. Die <img> Lösungen mit unterschiedlichen Fallbacks

Eine letzte Möglichkeit, SVG einzubetten, besteht in der Nutzung des IMG-Tags. Beachten Sie, dass der Tag hierfür nicht geschaffen wurde. Es kann also zu Problemem kommen, insbesondere wenn man umfangreich mit JavaScript an den Objekten manipuliert.

a. Die <img> Lösung mit JavaScript On Error-Fallback

Ehre, wem Ehre gebührt. Ich fand diese Technik auf Tavmjong Bah’s Blog, das übrigens eine großartige Lektüre darstellt, wenn Sie tiefer in die Technik der Manipulation von SVG mittels JavaScript einsteigen wollen. Die vorgeschlagene Lösung basiert darauf, den Error-Handler zu verwenden, um die SVG-Fähigkeit festzustellen. Wirft dieser einen Fehler aus, also unterstützt der Browser SVG nicht, wird in diesem Moment das SVG gegen ein PNG ausgetauscht.

Für eine Demo hier klicken

Der Quellcode:

<a href="#catching_error" >

<img class="logo" src="logo.svg" alt="A sample SVG button." width="186" height="235"  alt="Logo Geeks and the City"  onerror="this.removeAttribute('onerror'); this.src='logo.png'" />

</a>

 

Vorteile:

  • Der Link funktioniert zufriedenstellend.
  • Der Code ist sehr einfach und wir benötigen nur ein IMG-Tag.

Nachteile:

  • Der Fallback funktioniert nur bei aktiviertem JavaScript.

b. Die <img> Lösung mit Fallback auf Basis eines CSS-Hintergrundes

Bei dieser Lösung betten wir das SVG in HTML ein und verlassen uns auf Modernizr, um den SVG-Support zu ermitteln. Ist SVG unterstützt, fügt das Script die Klasse .svg hinzu, wenn nicht entsprechend eine Klasse .no-svg.

Für eine Demo hier klicken

Der HTML-Code:

<a href="#modernizr_css_fallback" >

<img class="logo" src="logo.svg" width="186" height="235"  alt="Logo Geeks and the City" />

</a>

Der CSS-Code:

/*** specific for fallbacks **/

#modernizr_css_fallback img.logo {

display:none;

}

#modernizr_css_fallback a{

display:block;

width:186px;

height:235px;

background-image: url(logo.png);

background-color:transparent;

text-indent:-999px;

color:transparent;

margin:0 auto;

}

.svg #modernizr_css_fallback img.logo {

display:block;

}

.svg #modernizr_css_fallback a{

background: none;

}

Hier müssen wir etwas tricksen. Damit die Lösung auch funktioniert, wenn JavaScript abgeschaltet ist, verwenden wir die Klasse .no-svg nicht. Zunächst verstecken wir das Bild aus einem einfachen Grund: Der Internet Explorer 8, sowie andere nicht unterstützende Browser würden sonst den Bildtitel anzeigen. Legen wir nun den Hintergrund auf den IMG-Tag, sehen wir sowohl den Hintergrund, wie auch das darüber angezeigte Alt-Attribut.

Stattdessen verstecken wir das Bild und legen das PNG in den A-Tag.

Wird SVG nun unterstützt, erhalten wir die Klasse .svg class im HTML. Dann zeigen wir den IMG-Tag mit dem enthaltenen SVG an und verstecken den CSS-Hintergrund des A-Tag.

Vorteile:

  • Der Link funktioniert.
  • Der Fallback benötigt kein JavaScript

Nachteile:

  • Den Hintergrund auf den A-Tag anzuwenden ist keine saubere Vorgehensweise.
  • Wenn JavaScript deaktiviert ist, erhalten auch Browser, die SVG im Grunde unterstützen, den PNG-Fallback.

c. Die <img> Methode mit SVG-Ermittlung via Modernizr und Fallback mittels HTML5 Data-Attributen

Diese Methode verwendet die neuen HTML5 Data-Attribute in Kopplung mit Modernizr, mit dessen Hilfe die Bilder erforderlichenfalls ausgetauscht werden, um den Fallback zu realisieren.

Für eine Demo hier klicken

Der HTML-Code:

<a href="#img_modernizr_js_remplacement_bis" >

<img class="logo" src="logo.svg" alt="A sample SVG button." width="186" height="235" data-fallback="logo.png"  alt="Logo Geeks and the City" />

</a>

Der JavaScript-Code:

window.onload = function(){

if(!Modernizr.svg) {

var imgs = $('img[data-fallback]');

imgs.attr('src', imgs.data('fallback'));

}

}

Modernizr ermittelt die SVG-Unterstützung. Ist die Unterstützung nicht gegeben, ersetzen wir mit JavaScript das Logo durch die PNG-Variante.

Vorteile:

  • Der Link funktioniert.
  • Der Code ist simpel und nachvollziehbar.

Nachteile:

  • Der Fallback funktioniert nur bei aktiviertem JavaScript.

d. Die <img> Methode mit JavaScript und < noscript > als Fallback

Auch bei dieser Variante verwenden wir den IMG-Tag, nur dass wir in diesem Fall einen noscript-Tag mit dem PNG darin verwenden, für den Fall, dass JavaScript deaktiviert sein sollte.

Für eine Demo hier klicken

Der HTML-Code:

<a href="#img_modernizr_js_remplacement_nojs">

<noscript><img class="logo" src="logo.png" alt="A sample SVG button." width="186" height="235" alt="Logo Geeks and the City" /></noscript>

</a>

Der JavaScript-Code:

window.onload = function(){

if(Modernizr.svg) {

$('#img_modernizr_js_remplacement_nojs .header a').html('<img src="logo.svg" width="186" height="235" alt="Logo Geeks and the City"/>');

}

else {

$('#img_modernizr_js_remplacement_nojs .header a').html('<img src="logo.png" width="186" height="235" alt="Logo Geeks and the City">');

}

}

Wir prüfen den SVG-Support, und setzen das SVG-Logo ein, wenn es unterstützt wird, anderenfalls das PNG.

Vorteile:

  • Der Link funktioniert.
  • Der Fallback klappt auch bei deaktiviertem JavaScript.

Nachteile:

  • Bei deaktiviertem JavaScript zeigen auch Browser, die SVG unterstützen, den PNG-Fallback.

Weitere Schritte: Iconfonts und .htaccess

In diesem Beitrag gehe ich nicht auf die Methode der Nutzung von Iconfonts ein. Erste Eindrücke kann man auf der Seite Icon Fonts are Awesome sammeln, hier finden Sie eine schöne Liste möglicher Icons. Ich habe mich nicht für diese Variante entschieden, weil ich sie im Zusammenhang mit der Anzeige eines Logos für ungeeignet halte. Insbesondere dürfte der Aufwand, für ein einzelnes Zeichen einen ganzen Iconfont zu erstellen, übertrieben sein. Außerdem sollten Logos stets Grafiken sein.

Falls bei Ihnen trotz genauer Befolgung aller Anweisungen die SVG-Anzeige nicht so funktioniert, wie sie sollte, könnte es sein, dass Sie das SVG-Format erst noch in der .htaccess deklarieren müssen, damit der Server den korrekten Header ausliefert. Das schreiben Sie in die Datei:

AddType image/svg+xml svg svgz

AddEncoding gzip svgz

Mehr zur Nutzung von SVG aus dem Weltennetz:

Zum Schluss

Ich habe Ihnen in diesem Beitrag verschiedene Möglichkeiten gezeigt, wie man ein klickbares SVG-Logo mit Rücklink zur Startseite implementieren kann. Ich persönlich verwende die zuletzt vorgestellte Variante, aber das ist letztlich eine Sache der persönlichen Vorliebe. Sicherlich gibt es noch weitere Wege, das gleiche Ziel zu erreichen. Vielleicht haben Sie eine noch bessere Lösung, die Sie direkt aus dem Ärmel schütteln können. Wäre schön, wenn Sie sie dann mit uns teilen würden. Wie sehen Ihre Planungen bezogen auf den SVG-Einsatz in Ihrer Webdesignpraxis aus?

(dpe)