SVG Objektgrafik


 Animation
Wo immer das möglich und sinnvoll ist, werden die Beispiele mit Programmen in der Programmiersprache → Javascript gesteuert und animiert.

 Live-Herstellung mit PHP
In einigen Beispielen wird der SVG-Quelltext mit einem Programm in der Programmiersprache → PHP erzeugt. Die meisten dieser Beispiele wurden jedoch auf Javascript portiert.

SVG in 3 Absätzen


Die links gezeigte Grafik besteht aus 4 Objekten:
<circle>, <rect>, <polygon>, <text>
Mit diesen Links kann man die ↗ Grafik oder den ↗ SVG-Quelltext in einem eigenen Browser-Tab laden. Man kann den Text (=das SVG-Programm) als Datei *.svg am eigenen Arbeits-PC speichern und mit jedem geeigneten Programm (z.B. Browser) anzeigen.
Details dieses Beispiels auf der Seite → Minimal-Grafik.


• 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 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



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 die Grafik skalieren (verkleinern oder vergrößern): 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.



Alternativen:
Grafik in das Objekt-Grafik-Format EPS ( Encapsulated Postscript) umwandeln (z.B. mit LibreOffice oder Inkscape).
Grafik in Pixel-Grafik (Bildpunkte) umwandeln, z.B. in eines der Formate PNG, GIF, JPEG (mit LibreOffice, 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.


Beachten sie für Büro-Anwendungen die Hinweise zum → viewBox-Attribut von SVG


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.



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


Gerade auf diesem Gebiet findet eine rasche Entwicklung statt. Daher sind die Tipps dieses Kapitels evtl. nicht aktuell.


Objekt-Grafik

Traditionell wird Objekt-Grafik vorwiegend im technischen Bereich angewendet, z.B. von allen CAD-Programmen. Mit CAD 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 Büro-Grafik (Säulen- oder Balken-Diagramme, Kreis-Diagramme, ...) heute praktisch nur mehr als ObjektGrafik verwendet wird.

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



Speichern sie den Quelltext ja nach Typ des Beispiels in einer Text-Datei *.svg oder *.html
Man kann die Datei mit jedem modernen Browser öffnen und anzeigen, in eigene Webseiten einbetten, in Büro-Programme importieren, 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 und wertvoller, weil sie in jeder Größe optimal angezeigt wird.



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.


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 144 dpi, für den Ausdruck je nach Leistung des Druckers mindestens 300, besser 600 dpi.
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