SVG-Icons mit GIMP

Mit GIMP lassen sich SVG-Icons (Beispiel im Bild Vulcano.svg) sehr leicht herstellen.

Vulcano-SVG
Beispiel: Vulcano.SVG

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-Inside
SVG-Inside

SVG ist zunächst eine Abkürzung und steht für Scalable Vector Graphics.

Ö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

SVG-mit-GIMP-neue-Datei
SVG-mit-GIMP-neue-Datei

Ich zeige Ihnen die SVG-Erstellung mit GIMP anhand eines einfachen Icons.

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

SVG-mit-GIMP-Pfade-zeichnen
SVG-mit-GIMP-Pfade-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.

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.

SVG-mit-GIMP-Pfadanzeige
SVG-mit-GIMP-Pfadanzeige

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

SVG-mit-GIMP-Pfad-exportieren
SVG-mit-GIMP-Pfad-exportieren

Im WerkzeugDok Pfade klicken Sie bitte auf einen Pfad mit der rechten Maustaste. Es öffnet sich das Kontextmenü zum Pfad.

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.

SVG-mit-GIMP-Vulcano-inside
SVG-mit-GIMP-Vulcano-inside

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.

SVG-mit-GIMP-Vulcano-Fillmode
SVG-mit-GIMP-Vulcano-Fillmode

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.

Vulcano-SVG
Vulcano-SVG

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 (https://Inkscape.org/) empfehlen.

2 Antworten auf „SVG-Icons mit GIMP“

  1. Eine sehr gute Beschreibung!
    Ich habe das Problem SVG-Dateien mit Gimp fehlerfrei zu öffnen!
    Manchmal funktioniert das, oft aber sind Artefakte mitten im Bild zu sehen oder wie ich das nennen soll… Das Phänomen tritt z.B. o.B.d.A. beim Öffnen des Logos der Site
    http://www.yworks.com/
    auf. Wie kann ich da weiter kommen. Es ist einfach ärgerlich!
    Vielen Dank im Voraus!
    fi

  2. Hi fi,

    in der Regel handelt es sich bei den SVG-Icons deiner benannten Webseite um normale ASCII-Dateien die du mit einem Editor öffnen kannst, versuch mal den kostenlosen JEdit.

    Es kann durchaus sein, das die problematischen Icons Inhalte besitzen die nicht zum aktuellen XML-Standard passen, schmeiß sie einfach raus und speichere die Datei neu ab, dann sollte es gehen. Denke bitte daran, das viele Entitäten in XML mit einer spitzen Klammer anfangen müssen und auch mit einer spitzen Klammer beeindet werden müssen, sonst kann ein Fehler beim laden der Datei auftreten.

    Alternativ kannst du es auch mal mit dem kostenlosen Inkscape versuchen, diese Software ist extra für die Verarbeitung von Vektorgrafiken entwickelt worden und erfreut sich sehr großer Beliebtheit.

    Gruß
    Oliver

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.