Abbildung...
Mit GIMP lassen sich SVG-Icons (Beispiel im Bild Vulcano.svg) sehr leicht herstellen.
In diesem Beitrag zeige ich, wie die praktischen Icons mit nur wenigen Handgriffen schnell selbst erstellt sind.
So funktioniert es in GIMP
Für die Arbeit an SVG-Icons sollte Ihnen das Werkzeug Pfad geläufig sein, auch der Umgang mit einem ASCII-Editor sollte kein Problem für Sie darstellen.
Was ist SVG?
SVG ist zunächst eine Abkürzung und steht für Scalable Vector Graphics**.
Abbildung...
Öffnen Sie eine SVG-Grafik mit Hilfe eines ASCII-Editors (nicht Word!), dann können Sie in etwa den Inhalt im Bild wiedererkennen.
Es handelt sich lediglich um Zeichenanweisungen für den Browser (meistens werden sie im Webbrowser verwendet) der diese Grafik läd. Simpel formuliert stehen dort Anweisungen wie: "zeichne von 0,0 bis 100,100 eine schwarze Linie der Stärke 5".
Der Vorteil dieser Technik ist, das der Browser die Grafik immer in Echtzeit neu mit der aktuellen Bildschirmauflösung zeichnet, dadurch haben SVG-Grafiken keinen Qualitätsverlust beim vergrößern oder verkleinern, sie sind immer scharf dargestellt.
SVG mit GIMP erstellen
Ich zeige Ihnen die SVG-Erstellung mit GIMP anhand eines einfachen Icons.
Abbildung...
Starten Sie beispielsweise mit einer vollkommen neuen Grafikdatei in GIMP, indem Sie im Menü Datei - Neu... anklicken.
Eine Größe von 200x200px sollte zunächst ausreichend sein.
Schalten Sie auf jeden Fall das Raster über das Menü Ansicht - Raster anzeigen und Ansicht - magnetisches Raster ein. Dadurch stellen Sie sicher, das der Pfad sauber an den gewünschten Positionen einrastet.
Mit dem Pfad zeichnen
Wählen Sie aus dem Werkzeugkasten das Werkzeug Pfad aus oder drücken auf der Tastatur das Kürzel B um den Pfad einzuschalten.
Abbildung...
Versuchen Sie in etwa eine Zeichnung zu erstellen wie ich sie hier im Bild habe.
In diesem Zusammenhang ist es auch wichtig, dass Sie den WerkzeugDok Pfad aktivieren.
Sie können ihn im Werkzeugkasten des GIMP über den kleinen Pfeil rechts als weiteren Reiter hinzufügen. Der Dialog Pfad wird für die Erstellung von SVG-Grafiken wichtig.
Abbildung...
Die Anzeige der Ebenen (Reiter Ebene) können Sie vollständig ignorieren, da Sie diese nicht brauchen werden.
Wenn Sie mögen, können Sie für jedes einzelne Element das Sie mit dem Pfad erzeugen auch eine eigene Pfadebene erstellen - ich empfehle dies immer, da Sie dadurch viel flexiebler sind.
Zeichnen Sie zunächst die geometrischen Figuren nach und bringen die benötigten Kurven des Pfades zum Schluss mit ziehen am Pfad in Form.
Es kann hier durchaus hilfreich sein, wenn Sie für diesen Arbeitsschritt den Magnetismus des Rasters ausschalten.
Pfade als SVG exportieren
Im WerkzeugDok Pfade klicken Sie bitte auf einen Pfad mit der rechten Maustaste. Es öffnet sich das Kontextmenü zum Pfad.
Abbildung...
Wählen Sie die Option Pfad exportieren... aus. Es öffnet sich der Dialog Pfade nach SVG exportieren, in dem Sie einen Dateinamen eintragen müssen.
Tragen Sie beispielsweise Vulcano.svg ein und speichern.
Öffnen Sie nun die Datei Vulcano.svg mit einem ASCII-Editor, zum Beispiel mit JEdit (www.jedit.org).
Verwenden Sie bitte kein Textverarbeitungsprogramm wie MS-Word oder OpenOffice-Writer, diese Programme sind dafür vollkommen ungeeignet.
Abbildung...
In etwa sollten Sie als Dateianzeige wie im Bild gezeigt erhalten.
Der blau markierte Bereich (Zeile 1 bis 7 und Zeile 22) stellt den Rahmen der Grafik dar, diesen dürfen Sie nicht mehr verändern.
im roten Bereich (Zeile 8 bis 21) können Sie bereits den ersten exportierten Pfad mit dem Namen Vulcano sehen. Lassen Sie die Datei einfach im Editor offen.
Abbildung...
Exportieren Sie nun alle weiteren Pfade in eine Zwischendatei, zum Beispiel temp.svg, dort kopieren Sie die neuen Pfade heraus und hängen Sie diese ab Zeile 22 in die Datei Vulcano.svg ein (Copy Paste).
Den Parameter fill="none" habe ich durch fill="#444444" ersetzt (Achtung: HTML-Schreibweise für RGB-Farben).
Den Parameter stroke-width="1" habe ich durch stroke-width="0" ersetzt.
Speichern Sie am Ende der Kopierarbeiten die Datei Vulcano.svg nochmals ab und werfen diese via Drag and Drop in einen Webbrowser, zum Beispiel Firefox.
Abbildung...
Der Browser sollte Ihnen dann das Icon wie im Bild anzeigen.
Natürlich sollte Ihr Webbrowser das Format SVG unterstützen. Die Browser Safari, Google Chrome und Firefox unterstützen dieses Format von Hause aus.
Wenn Sie die Grafik nun mit Hilfe der Tastatur Strg + [+] vergrößern, werden Sie feststellen, das die Grafik nicht verpixelt wie Sie es eventuell von Bitmaps (JPG, PNG, GIF, ...) kennen. Die Kanten bleiben immer scharf gezeichnet.
Sie können also mit SVG riesige Grafiken in das Web stellen ohne das dabei die Ladezeit im Browser steigt, denn es werden lediglich eine Hand voll Zahlenpaare übertragen, das Zeichnen übernimmt der Browser.
Nachteilig an SVG ist natürlich, das Sie keine Urlaubsfotos damit darstellen können. Geometrische, farbige Flächen funktionieren jedoch sehr gut mit SVG.
Tipp | Die Browser des mobilen Betriebssystems ANDROID von Google, unterstützen SVG ebenfalls, somit können Sie Grafiken Ihrer Webseite auf die strengeren Datenraten und Bandbreiten noch besser anpassen und Bitmaps durch SVG ersetzen (z.B. Buttons oder große Farbflächen). Die Anwender mobiler Endgeräte werden dankbar über kürzere Ladezeiten sein.
Tipp | Wenn Sie viel auf dem Gebiet der Vektorgrafiken machen möchten, dann würde ich eher das ebenfalls kostenlose Inkscape (http://Inkscape.org/) empfehlen.