Pixelfans

Workflow für SVG

geschrieben von Pawel

Nachdem ich jetzt schon mehrere Vektorgrafiken für das Web optimiert habe, möchte ich meine Herangehensweise einmal kurz vorstellen. Auf den künstlerischen Prozess werde ich hier nicht eingehen, da es dafür gute Tutorials gibt.

Es beginnt mit einer Bildvorlage. Das kann ein Scribble sein aber auch ein Foto, wenn es ein (abstrahiertes) Portrait werden soll. Das Bild wird in Inkscape geladen und die Ebene als Hintergrund angelegt und entsprechend umbenannt. Eine weitere Ebene wird angelegt und die Transparenz auf 30% gesetzt. Nur auf dieser wird nun die Vorlage umgesetzt. Bei komplexen Grafiken ist es unbedingt erforderlich, die Elemente zu benennen, da sonst eine Postproduktion kaum möglich ist.

Grafik: SVG für das Web
Ab der Version 0.47 bietet Inkscape die Möglichkeit die Grafik als optimierte SVG abzuspeichern. Diese ist schon recht kompakt, kann aber noch weiter reduziert werden. Auf jeden Fall muss der background entfernt werden.

Es hat sich bei mir bewährt, in einem Fenster einen Editor offen zu haben und im anderen mit dem Firefox die Grafik ständig zu kontrollieren. Inkscape ist mit seinem Gleitkommazahlen für meinen Geschmack etwas zu genau. Meist reicht bei den Pfaden eine ganze Zahl und bei den Transformationen genügen zwei Ziffern nach dem Komma.

Folgendes kleine Zenityscript leistet mir unter Gnome/ Linux gute Dienste:

#!/bin/bash
zenity --info --text "With this tool, you can convert the float number in a SVG file in a integer numbers. This will important reduce the size of the file.The convertetd file will save in the same directory like this script."
input=`zenity --title="Select a file" --file-selection --text="name of the file"`
awk '{
line=$0
output=""
# for every float on the line
while (match(line,/[0-9]+[.]?[0-9]*/)) {
# extract the float from the line
number=substr(line,RSTART,RLENGTH)
# insert it into the output line
output=output substr(line,1,RSTART-1) int(number+0.5)
# save the rest of the line for further processing
line=substr(line,RSTART+RLENGTH)
}
output=output line
print output
}
' "$input" > output.svg
zenity --info --text 'finished '

Es rundet alle(!) Zahlen auf Ganzzahlen. Das Ergebnis ist deshalb nicht 1:1 zu verwenden, für die Pfade allerdings sehr nützlich.

Zuletzt bleibt nur, das Ergebnis in anderen Browsern zu vergleichen.

Kategorie: Ideen , Layout , SVG | Trackbacks (0) | Permalink