Inkscape 036 – SVG-Grafik für Web (Praxistest)

Nachdem im letzten Artikel hatte Argumente für die Verwendung des SVG-Format genannt wurden, geht es in diesem Beitrag um die Umsetzung. Das Beispiel eines einfachen Buttons zeigt die Vorteile eine SVG Datei zu verwenden.

Skills: Basics
Plugin: Nein

Beispiel

Die Beispiel-HTML-Seite mit eingebundener SVG-Grafik zeigt  das der Button als Vektorgrafik, im SVG-Format in jeder Größe, immer gleich gut ausschaut.

Button erstellen

Bisher wurden Inkscape-Grafiken immer als Endfomate in Form von PNG-Files exportiert. Möchte man aber Bilder für das Web als SVG-Dateien (Scalable Vector Graphic) speichern, dann sollte man unbedingt eine korrekte Dokumentengröße in Inkscape angeben, um Seitenränder zu vermeiden.

Button 120×40 Pixel, Größe: 140 %

Erstellt werden soll hier ein Button mit der Größe von 120×40 Pixel erstellen. Der erste Schritt ist daher im Hauptmenü, unter Datei – Dokumenteneinstellung eine feste Größe in der Größe des Button als Dokumenteigenschaft einzustellen (siehe Bild unten).

Dokumenteneinstellungen 120×40 in Pixel (px)

Dann zieht ihr ein Rechteck ohne Kontur auf und gebt die Maße für Breite und Höhe ein 120 x 40 Pixel. Als Füllfarbe wird ein Rotton verwendet und die Ecken abgerundet auf. Über Ausrichten/Verteilen wird das Objekt genau mittig auf der Seite platziert (siehe Bild unten).

Fläche aufziehen, Größe eingeben

Die Button-Ebene wird gesperrt und eine neue Ebene angelegt. Auf der neuen Ebene zeichnet ihr ein weiteres Rechteck, für einen Lichtreflex. Nicht ganz so breit wie der Button selbst und ungefähr halb so hoch. Mit abgerundeten Ecken und einem Farbverlauf von Weiß (oben) nach Transparent (unten) (siehe Bild unten).

Lichtreflex

Jetzt kann noch eine Textebene in etwas dunklerem Rot darüber gelegt werden, um den Button zu beschriften. Der Button als SVG-Datei abgespeichert. (siehe Bild unten).

Button mit Text

In der Beispiel HTML sieht man immer den gleichen Button. In Originalgröße und dann immer größer werdend skaliert. Es gibt keinen Qualitätsverlust, wie es ansonsten bei einer Pixelgrafik üblich wäre. Daher ist eine SVG-Datei, mit solchen Grafikelementen, für die Webseite sehr geeignet!

Nachteil des SVG-Format

Noch kann nicht alle Browser gleich gut mit SVG-Dateien umgehen beziehungsweise darstellen. Der Einsatz im Web sollte also immer noch mit Bedacht gewählt werden. Vorherige Kompatibilitätstests sind angebracht. Es ist in diesem Sinne also kein Nachteil des Formats, sondern die Unflexibilität der einzelnen Browser die Probleme macht.