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

Im letzten Artikel hatte ich Argumente für SVG-Dateien im Netz genannt. Hier geht es nun an die Umsetzung. Am Beispiel eines Buttons zeige das Prinzip eine SVG zu erstellen und im Web zu verwenden.

Skills: Basics (1 / 5)
Plugin: Nein

Beispiel

Hier geht es zur Beispieldatei die beweist, das der Button als Vektorgrafik, im SVG-Format in jeder Größe, immer gleich gut ausschaut.

Button erstellen

Bisher habe ich Bilder von Inkscape, in meinen Tutorials immer als 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 %

Ich möchte einen 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 einzustellen (siehe Bild unten).

Dokumenteneinstellungen 120×40 in Pixel (px)

Ich ziehe dann ein Rechteck ohne Kontur auf und gebe in der Optionen-Leiste meine Maße für Breite und Höhe ein 120 x 40 Pixel (siehe Bild unten).

Fläche aufziehen, Größe eingeben

Als Füllfarbe wähle ich einen Rotton und ziehe mit einem Dreifachklick an den Anfassern abgerundete Ecken auf. Anschließend richte ich den Button über dem Ausrichten-Dialog zentriert auf der Seite aus (siehe Bild oben).

Jetzt lege ich eine neue Ebene an. Die Button-Ebene sperre am Ebenen-Schloss gegen Verschiebungen ab. Auf der neuen Ebene zeichne ich 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 (siehe Bild unten).

Button mit Text

Der Button wird nun als SVG-Datei abgespeichert.

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!

Noch kann nicht jeder Browser SVG darstellen. Der Einsatz im Web sollte also mit Bedacht gewählt werden.