SVG-Bilder selbst zeichnen

Wer für das Web skalierbare Vektorgrafiken erstellen möchte, liegt mit Glips Graffiti richtig: Anders als die Konkurrenz bietet es auf das SVG-Format zugeschnittene Werkzeuge.

Der Start ins Leben war schwer: Bei ihrer Geburt feierten die Erfinder im World Wide Web Consortium (W3C) [1] die neuen Scalable Vector Graphics (SVG) noch als offenes und zukunftssicheres Format, doch außerhalb des Kreißsaals konnte sich der Newcomer zunächst nur schwer behaupten. Selbst seine Eltern Adobe und Sun verstießen das Kind und blieben altbekannten Formaten treuer als dem eigenen Nachwuchs. Erst in der jüngsten Vergangenheit gewinnt SVG doch noch an Fahrt und lernt sich im Leben zu behaupten. Diese beinahe wundersame Entwicklung verdankt es vor allem den vielen freien Internetbrowsern: Sie bringen SVG-Bilder direkt aus dem Internet auf den heimischen Bildschirm – immer häufiger sogar einigermaßen standardkonform.

Auch die Open-Source-Gemeinde entdeckte schließlich die Vorzüge des lizenzfreien Dateiformats. So akzeptieren etwa die Desktops KDE und Gnome Icons im SVG-Format. Auch die größte freie Clipart-Bibliothek, OpenClipart.org, speist sich ausschließlich mit SVG-Dateien. Die stammen durchweg aus geeigneten Konvertern oder speziell auf das SVG-Format zugeschnittenen Zeichenprogrammen.

Eines dieser Programme hört auf den Namen Glips Graffiti. Es kommt von der französischen Firma Itris [2], die das kleine und leichte Werkzeug im Rahmen ihres Glips-Projekts (es beschäftigt sich mit der Programmentwicklung für Echtzeitsysteme) entwickelt hat. Dessen Ergebnisse sind – anders als das Zeichenprogramm selbst – allerdings kostenpflichtig. Glips Graffiti dagegen untersteht der LGPL.

Abbildung 1: Beispiel-Schaf: Solche und viele andere SVG-Bilder finden Sie in der OpenClipart-Bibliothek.

Installation

Auf der Glips Graffiti-Homepage [3] stand zum Redaktionsschluss neben der letzten stabilen Version 1.4 auch eine erste Testversion der kommenden Version 1.5 zur Verfügung. Letztere enthielt jedoch noch einen gravierenden Programmfehler, der jegliche Startversuche scheitern ließ. Abhilfe verspricht bislang nur eine umständliche Operation am offenen Quellcode. Aus diesen Gründen erhält im Folgenden die zwar etwas ältere, dafür aber funktionierende Fassung den Vorzug. Die einzelnen Arbeitsschritte lassen sich aber ohne Mühe auf den Nachfolger übertragen.

Um Glips Graffiti in Betrieb zu nehmen, entpacken Sie als erstes das Archiv in ein Verzeichnis Ihrer Wahl. Kontrollieren Sie anschließend in Ihrem Paketmanager, ob das Java Runtime Environment installiert ist. Diese Software benötigen alle in Java geschriebenen Anwendungen. Glips Graffiti verlangt mindestens nach der Version 1.4.2; von der neuen Beta an ist sogar das neue Java 1.6 nötig. Sollte Ihrer Distribution keine passende Java-Umgebung beiliegen, finden Sie alle benötigten Pakete unter [4].

Öffnen Sie nach dem Einrichten von Programm und Umgebung ein Terminalfenster. Wechsel Sie in das Glips-Graffiti-Verzeichnis und starten dort das Zeichenprogramm (Version 1.4.2) per java -jar GlipsGraffiti.jar. In der neuen Version 1.5 führt ein java -jar GlipsGraffitiSVGOnly.jar ans Ziel. Nach ein paar Sekunden erscheint das Hauptfenster aus Abbildung 1.

Bedienung, bitte!

Gemäß SVG-Standard arbeitet Glips Graffiti mit Vektorgrafiken. Solche Bilder bestehen aus einzelnen geometrischen Formen, die erst zusammen ein fertiges Bild ergeben. Vektorgrafikprogramme eignen sich primär für das Gestalten von Illustrationen oder technischen Zeichnungen. Prominente Anwendungen aus der Windows-Welt sind beispielsweise Corel Draw oder Adobe Illustrator. Unter Glips Graffiti gibt die Symbolleiste einen kleinen Einblick in die dort zur Verfügung stehenden Grundfiguren.

Bevor Sie den Zeichenstift zücken dürfen, müssen Sie erst einmal eine Leinwand aufziehen. Die wählen Sie aus dem Menü File | New…. Glips Graffiti möchte nun die Größe der neuen Grafik wissen. Die Angabe px für Pixel ist etwas irreführend: Genau genommen kennt der SVG-Standard überhaupt keine konkreten Maßangaben, sondern nur eine abstrakte und nicht näher bezeichnete Längeneinheit. Wie groß eine solche Einheit in der Realität ausfällt, hängt allein vom Ausgabemedium ab. Nur auf dem Bildschirm entspricht eine Einheit genau einem Pixel. Standardmäßig erstellt Glips Graffiti eine 400 mal 400 Pixel große Grafik. Falls Sie später mehr Platz benötigen, hilft der Menüpunkt Transforms | Canvas | Resize beim Umwandeln.

Klicken Sie auf Ok, erscheint ein neues, leeres Fenster (Abbildung 2). Am oberen und linken Rand sehen Sie ein Lineal. Die kleinen roten Dreiecke in den Linealen befinden sich dabei immer auf Augenhöhe mit dem Mauszeiger. So können Sie die einzelnen geometrischen Objekte exakt positionieren. Das graue Kästchenmuster im Hintergrund dient dem gleichen Zweck. Es gehört nicht zur Grafik, sondern hilft beim Ausrichten. Falls Sie diese beiden Hilfen stören, schalten Sie sie unter Display | Show grid und Display | Rulers | Hide rulers ab.

Abbildung 2: Das Hauptfenster von Glips Graffiti mit einem neuen, leeren Dokument.

In der Statusleiste am unteren Rand gibt Ihnen Glips Graffiti Informationen zum Dateinamen, dem Vergrößerungsfaktor und der aktuellen Mausposition.

Farbspiele

Mit einer neuen Zeichenfläche aktivieren Sie auch die Symbolleiste. Fast alle Werkzeuge, die Sie dort finden, erreichen Sie auch über das Menü Drawing. Klicken Sie als kleine Übung einmal auf den Kreis (viertes Symbol von links) und fahren mit der Maus in die linke obere Ecke der Zeichenfläche. Halten Sie die linke Maustaste gedrückt und ziehen einen Kreis auf, wie Sie ihn in Abbildung 3 sehen. Im Gegensatz zu anderen Grafikprogrammen unterscheidet Glips Graffiti explizit zwischen Kreis und Ellipse (fünftes Symbol von links in der Symbolleiste). Um die Symmetrie des Kreises müssen Sie sich daher nicht kümmern.

Abbildung 3: Über die blauen Pfeile können Sie den Kreis dehnen oder strecken. Rechts im <code srcset=

Properties-Fenster sehen Sie sämtliche Attribute der markierten Figur.” width=”300″ height=”234″ /> Abbildung 3: Über die blauen Pfeile können Sie den Kreis dehnen oder strecken. Rechts im Properties-Fenster sehen Sie sämtliche Attribute der markierten Figur.

Um aus dem Kreis ein Smiley mit lachendem Gesicht zu zaubern, ändern Sie zunächst seine Farbe in einen frischen Ton. Dazu wählen Sie den Kreis aus, falls er nach dem Zeichnen nicht mehr markiert ist: Klicken Sie ihn einfach mit dem Zeigerwerkzeug (zweites Symbol von links) einmal kurz an. Am Rand erscheinen kleine Pfeile, über die Sie den Kreis dehnen und stauchen können. Ein weiterer Klick auf das markierte Objekt ändert die Funktion der Pfeile. Jetzt verzerren und drehen sie die Figur.

Für den markierten Kreis rufen Sie nun Dialogs | Show Properties auf. In einem Dialogfenster sehen Sie dann alle zum Kreis gehörenden Einstellungen, unter anderem die für die Farbe. Aber Vorsicht: Jede Änderung, die Sie in diesem Fenster vornehmen, führt Glips Graffiti umgehend aus. Damit sehen Sie zwar sofort das Ergebnis Ihrer Experimente, das Ausprobieren mit verschiedenen Werten ist auf diese Weise aber ein bisschen kompliziert.

Die Farbe für die Füllung finden Sie im Register Fill unter Color. Klicken Sie dort auf die Schaltfläche mit der aktiven Farbe. Daraufhin erscheint das Fenster aus Abbildung 4. Dort suchen Sie einen neuen Farbton aus. Im Register SVG Colors finden Sie eine im SVG-Standard definierte Farbpalette. Die Vorschau in der unteren Fensterhälfte gibt Ihnen einen groben Eindruck vom späteren Ergebnis. Der Name der Farbe taucht direkt oberhalb der Vorschau auf.

Abbildung 4: Das Fenster zur Farbauswahl. Was Sie hier einstellen, übernimmt Glips Graffiti sofort in Ihre Grafik.

Sofern Ihnen die hier angebotene Auswahl zu spärlich erscheint, dürfen Sie sich auch selbst einen neuen Farbton aus den Grundfarben Rot, Grün und Blau zusammenmischen. Dazu wechseln Sie in das Register RGB, wo Sie mit den Schiebereglern die entsprechenden Anteile der drei Grundfarben einstellen. Haben alle Regler den Wert 255, erhalten Sie in der additiven Farbmischung Weiß (Abbildung 5); stehen die Regler alle auf 0, bekommen Sie Schwarz. Wählen Sie für Ihr Gesicht einen fröhlichen Gelbton und bestätigen Sie anschließend auf Ok. Der Kreis sollte nun ungefähr wie in Abbildung 6 aussehen.

Abbildung 5: Die Regler im Register <code srcset=

RGB geben an, wie stark der Anteil einer Farbe an der Mischfarbe ist. Stehen alle Regler auf Maximum, ergibt das weiß.” width=”300″ height=”225″ /> Abbildung 5: Die Regler im Register RGB geben an, wie stark der Anteil einer Farbe an der Mischfarbe ist. Stehen alle Regler auf Maximum, ergibt das weiß.

Abbildung 6: Der gelb eingefärbte Kreis.

Damit Sie nicht für jedes neue Objekt die Farbe nachtragen müssen, klicken Sie in der Symbolleiste auf das erste Symbol von links. Es öffnet sich wieder das Fenster zur Farbauswahl. Hier stellen Sie nun aber den die Standard für die Zeichenfarbe Ihres Malstiftes ein. Entscheiden Sie sich für schwarz und malen Sie anschließend nach der bereits bekannten Methode zwei kleinere Kreise für die Augen. Falls Sie dabei nicht auf Anhieb die richtige Position treffen, ziehen Sie das gezeichnete Objekt einfach per Drag & Drop an die passende Stelle. Das Ergebnis sollte wie in Abbildung 7 aussehen.

Abbildung 7: Das Gesicht nimmt Form an. Die Augen des Smileys bestehen aus zwei schwarzen Kreisen.

Nasenstrich

Dem Smiley fehlen nun noch Mund und Nase. Das Riechorgan modellieren wir in unserem Beispiel einfach aus einer senkrechten Linie. Dafür ist das Linienwerkzeug zuständig, das Sie in der Symbolleiste hinter dem sechsten Symbol von links finden. Um mit ihm eine Linie zu zeichnen, klicken Sie einmal für den Anfangspunkt, halten die linke Maustaste gedrückt, fahren zum Endpunkt und lassen erst dort die Maustaste wieder los. Wie Abbildung 8 zeigt, fällt die Nasenlinie allerdings noch ziemlich schmal aus. Um sie zu verbreitern, wechseln Sie über Dialogs | Show Properties zum Properties-Fenster und rufen das Register Stroke auf. Dort bestimmt die Einstellung Width die Breite der Linie; ein Wert von 6 Einheiten sollte für unser Beispiel genügen.

Abbildung 8: Die Linienbreite beträgt in der Voreinstellung nur eine Einheit. Für die Nasenlinie ist das aber zu dünn.

Mit den Listen im unteren Bereich verändern Sie übrigens das Aussehen der Linie. Per Dash Array machen Sie beispielsweise aus der durchgezogenen Linie eine gepunktete, während Sie mit Line Cap die Kanten des Strichs rund feilen.

Der Trick mit der Linie

Auch bei geometrischen Formen, wie Kreis oder Rechteck, besteht der Rahmen aus einer Linie, deren Breite Glips Graffiti jedoch standardmäßig auf 0 setzt. Indem Sie unter Width im Eigenschaftsfenster den Wert erhöhen, verpassen Sie beispielsweise Ihrem Smiley einen schwarzen Rand. Wenn Sie zusätzlich im Register Fill die Transparenz der Füllung bei Opacity auf Null setzen, erhalten Sie einen durchsichtigen, schwarzen Ring.

Lach doch

Den Mund erstellen Sie am schnellsten über eine Polygonform. Die versteckt sich in der Symbolleiste hinter dem achten Symbol von links. Ein Polygon erzeugen Sie ähnlich wie eine Linie: Jeder Mausklick fügt einer bestehenden Kette eine weitere Linie hinzu. Zeichnen Sie auf diese Weise analog zur Abbildung 9 einen lachenden Mund nach. Den Schlusspunkt setzen Sie per Doppelklick. Alternativ zur Polylinie können Sie auch die beiden Bezier-Kurven-Werkzeuge verwenden, die Sie über das vierte und fünfte Symbol von rechts ansteuern. Sie funktionieren wie die Polylinie, hinterlassen aber normalerweise eine Kurve. In unseren Tests konnten wir Glips Grafitti allerdings immer nur eine Polylinie entlocken.

Abbildung 9: So leicht entlocken Sie Ihrem Smiley ein Lächeln: Ziehen Sie aus drei einzelnen Liniensegmenten einfach eine Polylinie.

Zusätzliche Werkzeuge

Das war’s dann aber auch schon fast: Weitere Zeichenhilfen oder Effekte sucht man in der jetzigen Version von Glips Graffiti genau so vergebens, wie eine Dokumentation der Funktionen. Immerhin gönnen die Entwickler dem Programm eine Exportmöglichkeit ins PDF-Format, die Sie über File | Export erreichen.

Fazit

Glips Grafitti ist ein kleiner Zeichenkasten für das schnelle Erstellen von SVG-Grafiken. Dank des DOM-Inspektors (siehe Kasten “SVG-Format unter der Lupe”) eignet sich das Programm besonders für Webseitengestalter. Ein echtes Vektorzeichenprogramm ist Glips Grafitti aber nicht, dafür fehlen der Software wichtige Funktionen und Effekte seiner großen Brüder.

SVG-Format unter der Lupe

Eine SVG-Datei besteht aus der lesbaren Beschreibung einer Vektorgrafik. Beispielsweise entspricht <circle cx="75" cy="50" r="33"> einem Kreis mit den Koordinaten x=75, y=50 und einem Radius von 33 Einheiten. Ein Anzeigeprogramm, wie der Internetbrowser Firefox, wertet diese Angaben aus und zeigt so das SVG-Bild.

Der SVG-Standard definiert neben dem Kreis weitere geometrische Elemente. Deren kryptische Notation basiert wiederum auf dem XML-Standard. Der stellt sicher, dass sich auch in Zukunft SVG-Bilder in andere Dateiformate umwandeln lassen.

Falls Sie sich für den Aufbau einer SVG-Datei interessieren, schauen Sie sich in Glips Graffiti den DOM Viewer an (Abbildung 10). Er versteckt sich hinter dem Menüpunkt Dialogs. Der DOM-Viewer zeigt auf der linken Seite den hierarchischen Aufbau der Grafik mit seinen einzelnen Elementen. Gruppierte Objekte fasst der Viewer zu einem Knoten zusammen. Sobald Sie eine der Figuren markieren, sehen Sie auf der rechten Seite alle Attribute dieser Figur.

Neben ihrer X- und Y-Position finden Sie hier auch Angaben zu Größe und Farbe sowie die id des Objekts. Die ID ist schlicht der Name, unter dem die Figur in der Übersicht eingetragen ist. Sie ist für Webseitenprogrammierer interessant, die eine SVG-Grafik in ihre Internetseite einbetten möchten.