SVG Objektgrafik

• SVG ( Scalable Vector Graphics) ist eine Technologie zur Beschreibung von Objekt-Grafik.

• Objekt-Grafik beschreibt ein Bild mit Anweisungen in einfachem Text. Jedes moderne Programm (Browser, ↓ Textverarbeitung, ↓ Grafik, Drucker-Treiber, ...) erzeugt aus den SVG-'Befehlen' das jeweilige Bild.

SVG in 3 Absätzen


SVG ( Scalable Vector Graphics) beschreibt eine Grafik mit einem 'Programm' in einer einfachen Programmiersprache.

Alle modernen Programme (Browser, ↓ Büro, ↓ Grafik, ...) beherrschen SVG-Grafik.

Die rechts oben gezeigte Grafik besteht aus 4 Objekten:
<circle>, <rect>, <polygon>, <text>

Mit diesem ↗ Link wird die Grafik in einem eigenen Browser-Tab geladen, mit diesem der ↗ SVG-Quelltext (=das SVG-Programm), mit dem die Grafik von ihrem Browser erzeugt wurde.
Man kann den Quelltext als Text-Datei *.svg am eigenen PC speichern und danach mit jedem Browser anzeigen.
Details dieses Beispiels auf der Seite → Minimal-Grafik.

• SVG ist ein offener Standard, die Verwendung ist kosten- und lizenzfrei.
Wikipedia enthält besonders viele Beispiele, die meist jedoch nicht programmiert, sondern wenig professionell aus Pixel-Grafik ungewandelt wurden.

• SVG-Anweisungen ('Programme') bestehen aus einfachem Text. Man kann sie daher leicht kontrollieren, ändern oder mit einem Programm automatisch erzeugen.

SVG-Grafik ist u.a. für Büro-Grafik (Säulen, Balken, Kreise, ...) besonders geeignet. Man kann auch Live-Daten aus einer Datenbank grafisch darstellen.

• SVG ist Mitglied der XML-Familie und daher mit allen modernen Standard-Technologien kompatibel:
Man kann SVG mit → CSS formatieren und mit der Programmiersprache → Javascript programmieren. Das ermöglicht z.B. Animationen oder interaktive Steuerung der Grafik.

• SVG wird - so wie → HTML - als Klartext übertragen. Erst das Ausgabe-Programm (z.B. Browser) erzeugt daraus ein Bild (als Pixel-Grafik). Die Auflösung (Anzahl der verwendeten Pixel) wird automatisch an das jeweilige Medium angepasst. Daher ist SVG in jeder Vergrößerung, nach jeder Drehung oder Verzerrung und insbesondere auch im Druck absolut randscharf.

Büro-Programme & SVG


LibreOffice, OpenOffice

Diese modernen Büro-Programme sind besonders gut zur Herstellung und Verwendung von SVG Objekt-Grafik geeignet.

Man kann SVG-Dateien in jedes Büro-Dokument einsetzen. Dazu werden die gleichen Menü-Befehle wie zum Einfügen von Pixel-Grafik verwendet: Einfügen / Bild / Aus Datei

Man kann Grafik-Objekte in die Zwischenablage kopieren und in alle Büro-Programme einsetzen. Beispiel: In der Tabellen-Kalkulation ein Diagramm herstellen, dieses in das Zeichen-Programm kopieren und dort weiter bearbeiten, zuletzt in eine Präsentation oder Textverarbeitung einsetzen.

Je nach Version kann es kleine Unterschiede in Ansicht und Verarbeitung geben. Öffnen sie die SVG-Datei im Zweifel mit dem Programm-Teil Draw (Zeichnung).

Man kann jede Objekt-Grafik verlustfrei skalieren (vergrößern, verkleinern): Grafik markieren, Shift-Taste gedrückt halten, Grafik an einem der 8 'Anfasser' ziehen.

Zur Bearbeitung Grafik mit RechtsKlick Aufbrechen. Einzelteile bearbeiten, zuletzt alle Teile markieren und mit RechtsKlick wieder zu einem einzigen SVG-Objekt Gruppieren.

MS-Office

Die Unterstützung für lizenzfreie standardisierte Datei-Formate ist traditionell schlecht, jedoch von der jeweils verwendeten Version abhängig.

Einfachste Lösung:
Datei (z.B. Textverarbeitung) mit LibreOffice oder OpenOffice öffnen, Objekt-Grafik einsetzen, Datei in einem MS-Format (*.doc, *.docx) speichern.
Das funktioniert meistens, ist jedoch von den verwendeten Versionen, von sauberer SVG-Programmierung und manchmal auch von der Komplexität der Grafik abhängig.

Alternativen:
Grafik in das Objekt-Grafik-Format EPS ( Encapsulated Postscript) umwandeln (mit LibreOffice, OpenOffice, Inkscape)
Grafik in Pixel-Grafik (Bildpunkte) umwandeln, z.B. in eines der Formate PNG, GIF, JPEG (mit LibreOffice, OpenOffice, GIMP, Inkscape) - Details zu → Pixel-Grafik-Formaten.
Gesamtes Dokument in das Format PDF ( Portable Document Format) umwandeln (LibreOffice, OpenOffice): Man kann die *.pdf-Datei in allen Betriebssystemen verwenden, jedoch nicht mehr bearbeiten.

Umwandlung in Pixel-Grafik

Man kann jede Objekt-Grafik in Pixel-Grafik umwandeln. Bei der Übersetzung in Bildpunkte sollte man die gewünschte Größe und die → Auflösung des Ausgabe-Mediums (Bildschirm 72, 96, 144 dpi, Drucker 300, 600,... dpi) beachten.

LibreOffice oder OpenOffice:
Programm-Teil Draw (Zeichnung) öffnen, Menü Einfügen / Bild / Aus Datei. Gewünschte Teile markieren und mit RechtsKlick Gruppieren.
Zum Export Grafik-Objekt markieren, Menü Datei / Exportieren, Option Selektion ankreuzen, Format auswählen (PNG, GIF, JPEG). Im danach folgenden Fenster Einstellung die Details der Umwandlung einstellen (→ Pixel-Grafik-Formate)

GIMP
Beim Öffnen einer SVG-Datei wird das Fenster Rendern geöffnet. Hier werden die Optionen zur Umwandlung in Pixel-Grafik eingestellt. Beachten sie die Auflösung des Ausgabe-Mediums (Bildschirm, Drucker).
Export mit Menü Datei / Export als, Format PNG, GIF oder JPEG.
Details zum Programm → GIMP

Inkscape
Grafik öffnen, die gewünschten Teile markieren, Menü Objekt / Gruppieren.
Objekt markieren, Menü Datei / Bitmap exportieren.
Im Fenster Exportbereich / Auswahl die Details der Umwandlung in das Format PNG auswählen.
Achten sie auf den Datei-Namen, der ohne ausdrückliche Angabe nach der laufenden Nummer der Objekt-Gruppe (z.B. g1234.png) gewählt wird.

Umwandlung in EPS

Dieses Datei-Format beschreibt Objekt-Grafik. EPS eignet sich zur Verwendung mit MS-Office und professionellen Objekt-Grafik-Programmen, jedoch nicht für das Internet.

LibreOffice oder OpenOffice:
Programm-Teil Draw (Zeichnung) öffnen, Menü Einfügen / Bild / Aus Datei. Gewünschte Teile markieren und mit RechtsKlick Gruppieren.
Zum Export Grafik-Objekt markieren, Menü Datei / Exportieren, Option Selektion ankreuzen, Format EPS auswählen. Im danach folgenden Fenster Einstellung die Details der Umwandlung angeben.

Inkscape
Grafik öffnen, die gewünschten Teile markieren, Menü Objekt / Gruppieren.
Objekt markieren, Menü Datei / Speichern unter.
Aus der Liste (rechts unten) das Format 'Encapsulated Postscript (EPS) wählen..
Beachten sie im folgenden Fenster die Optionen: Gesamte Seite und Gesamte Zeichnung sollten nicht markiert sein, Export-Objekt sollte markiert sein.

Grafik-Programme & SVG


Die Anzahl der angebotenen Grafik-Programme ist so groß, dass man keine allgemein gültigen Regeln zur Verwendung von (SVG)-ObjektGrafik angeben kann.

Die Tipps dieses Kapitels sind daher nicht immer zutreffend. Außerdem findet gerade auf diesem Gebiet eine rasche Entwicklung statt.

Pixel-Grafik

Die meisten gängigen Grafik-Programme sind zur Bearbeitung von Pixel-Grafik ausgelegt, d.h. von Bildern aus vielen einzelnen Punkten (Pixeln). Die Mehrzahl einfacher AnwenderInnen kennt überhaupt nur diese Art von Grafik.

Einfache oder veraltete PixelGrafik-Programme können mit Objekt-Grafik überhaupt nicht arbeiten.

Professionelle PixelGrafik-Programme (z.B. → GIMP) bieten beim Öffnen von Objekt-Grafik an, diese in Pixel-Grafik umzuwandeln.
Das kann - je nach dem Ziel der Bearbeitung - sinnvoll sein, diese Umwandlung (Rendern) ist jedoch nicht umkehrbar.

Details zu unterschiedlichen → Grafik-Datei-Formaten

Objekt-Grafik

Traditionell wird Objekt-Grafik vorwiegend im technischen Bereich angewendet, z.B. von allen CAD-Programmen. Damit wurden historisch viele verschiedene Standards für ObjektGrafik entwickelt. Moderne CAD-Programme können die meisten dieser Datei-Formate importieren und/oder exportieren, darunter natürlich auch SVG.

Die populären ↑ Büro-Programme LibreOffice und OpenOffice haben entscheidend dazu beigetragen, dass auch Büro-Grafik heute fast nur mehr als ObjektGrafik verwendet wird, z.B. Säulen- oder Balken-Diagramme, Kreis-Diagramme, usw.

Tipp: Man kann jede Pixel-Grafik als eigenständiges Objekt in ein ObjektGrafik Dokument einsetzen (→ Beispiel). Umgekehrt kann man eine Objekt-Grafik nur nach Umwandlung in Pixel-Grafik einsetzen.

Internet

Objekt-Grafik kann man aus Webseiten nicht mit RechtsKlick speichern (wie Pixel-Grafik).

Mit RechtsKlick in die SVG Objekt-Grafik kann man meist den Quelltext (SourceCode) anzeigen.
Alternativ kann man die Grafik mit RechtsKlick in einem eigenen Browser-Tab laden und danach (mit Menü-Befehl oder RechtsKlick) den SVG Quelltext anzeigen.

Von allen ↑ SVG-Beispielen dieses Webs wird der Quelltext entweder direkt oder mit Klick auf einen entsprechenden Link angezeigt.

Speichern sie den SVG-Quelltext in einer Text-Datei *.svg
Man kann die Datei mit jedem modernen Browser öffnen und anzeigen, in eigene Webseiten einbetten, in Büro-Programme einsetzen, mit einem Grafik-Programm öffnen und bearbeiten, usw.

Wikipedia bietet dazu geeignete Bilder fast immer auch im Format SVG an, z.B. SVG, HTML5, CSS, Linux, Microsoft, diverse Beispiele...
Die SVG-Datei ist meist kleiner, in jedem Fall jedoch wertvoller, weil sie in jeder Größe optimal angezeigt wird.

 Das ObjektGrafik-Programm Draw

Man kann jede SVG-Datei mit dem in LibreOffice und OpenOffice enthaltenen Zeichen-Programm Draw öffnen und bearbeiten.

Tipp: Komplexe Grafik-Objekte sind aus mehreren Teil-Objekten zusammengesetzt. Markieren sie das Objekt und verwenden sie Menü- oder RechtsKlick-Befehle wie Gruppierung aufheben oder Aufbrechen. Danach lassen sich die Teile getrennt bearbeiten oder fallweise weiter zerlegen.

Man kann jede mit dem in LibreOffice enthaltenen → Tabellen-Kalkulations-Programm Calc erstellte Grafik in die anderen Büro-Programme kopieren, z.B. in die Textverarbeitung oder Präsentation.
Wenn man eine Kalkulations-Grafik in das Zeichen-Programm Draw einsetzt und die Gruppierung auflöst, dann kann man alle darin enthaltenen Objekte beliebig bearbeiten oder ergänzen.
Die geänderte Objekt-Grafik lässt sich wieder gruppieren und in allen anderen Programmen von LibreOffice weiter verwenden.

Das in LibreOffice enthaltene Zeichen-Programm Draw kann zahlreiche verschiedene Grafik-Formate verarbeiten:

Zum Speichern einer Grafik als SVG-Datei markieren sie den gewünschten Teil der Grafik und verwenden den Menü-Befehl Datei / Exportieren.
Markieren sie die Option Auswahl (Selektion) und wählen sie aus der Filter-Liste das Format SVG. Die exportierte SVG-Datei lässt sich u.a. in jede Webseite einbetten.

Umwandlung von Objekt-Grafik in Pixel-Grafik:
Markieren sie den gewünschten Teil der Grafik und verwenden sie den Menü-Befehl Datei / Exportieren.
Markieren sie die Option Auswahl (Selektion).
Wählen sie aus der Filter-Liste ein Pixel-Grafik Format, z.B. PNG, GIF oder JPEG.

Inkscape

Dieses Programm ist auf die Herstellung und Verarbeitung von SVG-Objektgrafik spezialisiert. Es ist für alle gängigen Betriebssysteme kostenfrei verfügbar.

Derzeit erzeugt es allerdings noch sehr umfangreiche Dateien. Wenn man den erzeugten SVG-Quelltext manuell überarbeitet, dann kann man ihn oft auf weniger als 10% der Original-Dateien verkürzen. Das gilt auch für die meisten anderen derzeit verfügbaren kommerziellen SVG-Editor-Programme.

GIMP

Das professionelle Pixel-Grafik-Programm ist kostenfrei für alle gängigen Betriebssysteme. GIMP bietet u.a. die Umwandlung mit frei wählbarer → Auflösung an. Wählen sie für die Verwendung an Bildschirmen 72, 96 oder 144dpi, für den Ausdruck je nach Leistung des Druckers mindestens 300dpi.
Hinweis: GIMP ist für professionelle Ansprüche ausgelegt und bietet sehr umfangreiche Möglichkeiten. Das Programm erfordert daher zur sinnvollen Anwendung wenigstens einige Stunden Training.
Details zum Pixel-Grafik-Programm → GIMP