Tutorials

SVG-Grafik mit Inkscape

Vorbereitung

Die Seite auf einer Homepage sollte im Ganzen Einheitlich sein und zueinander Harmonieren. Die Seite soll bestimmt ein Hintergrundbild, Buttons, Fußzeile, Rahmen, und verschiedene Schriftfarben haben. Da nütz es nichts ein toller Banner zu haben, wenn sich die Farben mit dem Hintergrund nicht vertragen.

Software

Für die Gestaltung gibt es zwei bekannte freie Programme: Gimp und Inkscape.
Gimp für die Bildbearbeitung und Inkscape für Vektorgrafiken.
Hier möchte ich über Inkscape und das .svg Format schreiben.

SVG-Format

Scalable Vector Graphics (SVG, deutsch Skalierbare Vektorgrafiken) beschreibt in einer Textdatei 2D Grafiken, die dann auch über ein Sript animert werden können.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="400"
   height="400"
   id="svg2"
   sodipodi:version="0.32"
   inkscape:version="0.46"
   version="1.0"
   sodipodi:docname="Schild.svg"
   inkscape:output_extension="org.inkscape.output.svg.inkscape">
  <g
     inkscape:label="Ebene 1"
     inkscape:groupmode="layer"
     id="layer1">
    <circle
       style="fill:#ff0000;fill-opacity:1"
       id="rand"
       sodipodi:cx="200"
       sodipodi:cy="200"
       sodipodi:r="180" />
    <circle
       style="fill:#ffffff;fill-opacity:1"
       id="innen"
       sodipodi:cx="200"
       sodipodi:cy="200"
       sodipodi:r="140" />
    <circle
       style="fill:#000000;fill-opacity:1"
       id="punkt"
       sodipodi:cx="200"
       sodipodi:cy="290"
       sodipodi:r="25" />
    <rect
       style="fill:#000000;fill-opacity:1;stroke:#000000;stroke-width:50;stroke-linejoin:round"
       id="strich"
       width="2"
       height="100"
       x="199"
       y="110" />
  </g>
</svg>

Farbverlauf

Mit Inkscape ein Rechteck erstellen (F4). Farbverlauf anwählen (Strg+F1), Start- und Endpunkt markieren. Es wird ein Farbverlauf zwischen Hintergrund und Vordergrundfarbe sichtbar. Mit dem Menü "Füllung und Kontur (Umschalt+Strg+F)" kann die Farbe geändert werden.

Silouette erstellen:

Bei einem .jpg Bild werden beim Vergrößern die Kanten unschaft, so gibt es die Möglichkeit das Bild in das .svg Format zu vektoriesieren.
Es wird ein jpg Bild vom einem z.B. Wappen benötigt.
- .jpg importieren, anklicken, Mit Path-->Bitmap vektoriesieren, Kantenerkennung aktivieren
- das .jpg Bild löschen, es bleiben die Pfade
- nachbearbeiten, Farben zuweisen

Darstellung im Web

Das .svg Format wird noch nicht überall im Web unterstützt. Internet Explorer 9 bekommt eventuell SVG-Kompatibilität.

- (Einfach)Datei/Bitmap exportieren, am bestem im PNG Format.
- (Schwierig) Über Java und Apache Batik aufgerufen.

Animation

Das svg Bild kann über ein Sript animiert werden. Wie hier das Uhrwerk.

3D-Bild

Um einen 3D-Bild aus einer .svg Grafik zu erstellen, kann diese in Bender importiert werden. Mit eine Textur überzogen und ausgeleuchtet werden, muß dann als 3D geredert werden, so das eine Grafik entsteht.
Wird benotigt um z.B. einen 3D-Text zu erstellen.
Ich habe hier mit Inkscape einen Text erstellt (F8), danach das Objekt in einen Pfad umgewandelt (Umschalt+Strg+C) und gespeichert.
MarkusH mit Blender