'Millimeter-Papier' mit SVG

Das Grafik-Objekt 'Millimeter-Papier' wird nach ihren Angaben Live gezeichnet.
Man kann es als Grafik-Datei speichern, mit einem ObjektGrafik-Programm bearbeiten, in andere Dokumente einsetzen (Textverarbeitung, Präsentation) usw.
Breite in cm 1 2 3 4 5 6 8 10
Höhe in cm 1 2 3 4 5 6
Auflösung in dpi  72 96 144
Skalenrand Links Rechts Oben Unten
LinienBreite 0.2 0.3 0.5 0.75 1
Farbe Rot Grün Blau Schwarz

Mit diesem Beispiel kann man den Austausch von Objekt-Grafik zwischen verschiedenen Programm-Typen zeigen, z.B.:
Objekt-Grafik, Pixel-Grafik, Büro-Programme, Text-Editor, PHP-Programme, ...

SVG-Quelltext der Raster-Grafik

◀   Ihr Browser hat diesen Text in der 'Programmiersprache' → SVG erhalten und daraus die ↑ Grafik erzeugt.
Mit diesem Link wird der ↗ SVG-Quelltext in einem eigenen Browser-Tab angezeigt.
Der Text entspricht allerdings der zuerst geladenen Grafik: Interaktive Änderungen sind hier nicht berücksichtigt.
Das Beispiel sieht einfach aus, bietet jedoch interessante Möglichkeiten zur Programmierung.

• Das <desc>-Element enthält beschreibenden Text (Meta-Daten). Das bietet die Möglichkeit, Objekt-Grafik-Dateien automatisch nach Stichworten zu durchsuchen.

• Das <style>-Element enthält → CSS-Regeln zur Formatierung der Grafik-Elemente.

• Das <defs>-Element definiert wiederverwendbare Grafik-Elemente - in diesem Fall die 6 verschiedenen Linien, aus denen die Grafik aufgebaut ist.

• Danach folgen die angezeigten Grafik-Elemente: Sie sind in <g>-Elementen zu Gruppen zusammengeschlossen.
Innerhalb der Gruppen werden in diesem Beispiel ausschließlich die bereits vorher definierten Elemente verwendet: Sie werden als <use>-Elemente eingetragen, in deren href-Attributen das jeweilige Element angegeben ist.

• Die Gruppen werden mit transform-Attributen in X- und Y-Richtung verschoben, sowie skaliert (verkleinert, vergrößert).


Alternative: Man könnte einen Ausschnitt von 1x1cm als wiederverwendbares Element definieren.
Danach könnte man beliebig viele dieser Elemente in Zeilen und Spalten zur gewünschten Grafik zusammensetzen.
Programm und SVG-Quelltext wären in diesem Fall einfacher und kürzer.
Die Ausgabe wäre jedoch wesentlich langsamer, weil die Anwendungs-Programme für jedes 1x1cm-Element 22 Linien zeichnen müssten.

Beispiel: Eine Grafik von 10x5cm wird mit 1100 Linien gezeichnet.

PHP-Quelltext der Raster-Grafik

◀   So sieht das Programm zur Erzeugung der Objekt-Grafik in der Programmiersprache → PHP aus, d.h. der Inhalt der Text-Datei raster.php
Mit diesem Link wird der ↗ PHP-Quelltext in einem eigenen Browser-Tabangezeigt.
Die Datei enthält sowohl SVG-Quelltext (schwarz) als auch mehrere Teile (Snippets) von PHP-Quelltext innerhalb der Marken <?php  ?>

PHP-Script-Programme brauchen zur Übersetzung und Ausführung der PHP-Anweisungen ein PHP-Interpreter-Programm, das auf jedem Standard Webserver installiert ist, nicht jedoch auf normalen Arbeits-PC. Sie können das Programm daher am eigenen Arbeits-PC normalerweise nicht ausführen.

• Das Programm beginnt mit der Funktion header() - Damit wird im → HTTP-Response-Header die MIME-Type der nachfolgenden Daten angekündigt - in diesem Fall → SVG, ein Mitglied der XML-Familie.

• Im Abschnitt 'Default parameters' werden die Standard-Werte der einstellbaren Parameter festgelegt. Sie gelten, solange sie nicht durch (vom User angegebene) GET-Argumente ersetzt werden.

• Es folgen einige Funktionen, die zur Validierung (Test und Korrektur) von empfangenen GET-Argumenten dienen.

• Im Abschnitt 'GET' werden allfällige GET-Argument-Daten gelesen, decodiert und geprüft (validiert). Dieser Programm-Teil wurde auf Grund praktischer Erfahrungen gegenüber dem notwendigen Minimum stark erweitert. Die Vorgaben für Größe und Aussehen der Grafik werden damit bei Bedarf geändert. Damit sind alle Vorbereitungen abgeschlossen und der 'eigentliche' SVG-Quelltext kann beginnen.


• Im <defs>-Element werden die 6 wiederverwendbaren Linien-Elemente dieses Beispiels definiert. Ihre Position und Länge wird mit PHP nach dem Vorgaben für die Breite und Höhe in cm berechnet.
Zusätzliche Korrekturen werden angebracht, wenn Skalenränder angefordert sind.


• Zur Formatierung der Linien-Breite wird ein Trick verwendet: Alle Linien werden mit einer Breite von 1px angegeben. Wenn schmälere Linien gewünscht sind, dann wird die Grafik in größerem Maßstab konstruiert und zuletzt die gesamte Gruppe mit dem Attribut transform="scale()" verkleinert.


Anregung: Man kann das Programm etwas modifizieren und damit andere Raster-Typen erzeugen, z.B. halb-logarithmisches oder doppelt logarithmisches 'Papier', solches mit Zoll-Einteilung, usw...


In diesem Beispiel soll jedoch ausdrücklich ein SVG-Quelltext nach User-Angaben erzeugt werden, damit man die Grafik anschließend weiter verwenden kann (nächstes ↓ Kapitel).
Diese Anforderung kann man mit PHP einfach und unabhängig vom Betriebssystem erfüllen.
Eine andere Lösung wäre ein alleinstehendes Programm (App), das man jedoch in getrennten Versionen für jedes Betriebssystem herstellen müsste.
Eine weitere Alternative wäre ein Java-Programm, das zwar System-unabhängig ist, jedoch nur läuft, wenn Java ( JRE) installiert ist.

Herstellung beliebig großer Millimeterpapiere

Breite in cm
Höhe in cm
Auflösung in dpi 
Skalenrand Links Rechts Oben Unten 
Linien-Breite
Farbe Rot Grün Blau Schwarz
viewBox
 



Speichern sie den SVG-Quelltext in einer Text-Datei am eigenen Arbeits-PC, z.B. als raster.svg

Test: Die SVG-Datei lässt sich mit jedem modernen Browser öffnen und anzeigen.

Bearbeitung von Objekt-Grafik


Text-Editor

Öffnen sie die SVG-Quelltext-Datei (z.B. raster.svg):
Mit Kenntnis einiger → CSS-Regeln kann man z.B. die Farben der Linien im <style>-Element der Datei beliebig ändern.



RechtsKlicken sie die Grafik und verwenden sie den Befehl Aufbrechen
Damit wird die Gruppierung der importierten Grafik aufgelöst.

In diesem Zustand kann man jedes einzelne Element der Grafik verändern, z.B. Farbe, Strichstärke, Position, Länge usw.

Zuletzt sollten sie alle Elemente der Grafik markieren und mit RechtsKlick erneut Gruppieren.

Man kann das Grafik-Objekt in jedem anderen Programm-Teil von LibreOffice verwenden, z.B. in ein Text-Dokument oder in eine Präsentation einsetzen usw.

Man kann die Grafik markieren und in viele verschiedene Formate (Pixel- und Objekt-Grafik) umwandeln: Menü Datei / Exportieren, Kästchen Selektion markieren, Export-Format wählen.


Die Kompatibilität für Objekt-Grafik ist jedoch begrenzt:
Je nach Grafik und Software-Version kann ein Objekt-Grafik enthaltendes Dokument auch mit MS-Office funktionieren, darauf sollte man sich jedoch nicht verlassen:
Es ist empfehlenswert solche Dokumente mit LibreOffice zu drucken oder als PDF-Datei zu exportieren: In diesem Fall kann man die PDF-Dateien in jedem Betriebssystem und mit jeder gängigen Software verwenden.



Mit Inkscape kann man Objekt-Grafik-Dateien in vielen verschiedenen Formaten erzeugen, öffnen, bearbeiten und (auch als Pixel-Grafik / Bitmap) exportieren.

Der erzeugte SVG-Code ist allerdings nicht optimiert, sondern wesentlich größer als bei manueller Programmierung.

Wikipedia: Objektgrafik-Editor-Programme (en)

Verwendung von SVG Objekt-Grafik in einem Office-Dokument


Aus der Praxis haben sich einige Tipps ergeben, die man anwenden kann, wenn eine Grafik nicht so angezeigt wird wie gewünscht:

RechtsKlicken sie die Grafik und verwenden sie das Kontext-Menü Umlauf. Experimentieren sie mit den Optionen.

Bei Umlauf fließt der Text in transparente Stellen der Grafik. Wenn das nicht erwünscht ist, dann kann man die Grafik im Programm-Teil Zeichnung (Draw) ändern:

Zeichnen sie den gewünschten Umriss mit dem Rechteck-Werkzeug. Verwenden sie für seine Fläche die Farbe weiß und für die Umriss-Linie Stil=kein.
Senden sie das Umriss-Objekt mit Rechtsklick / Anordnung / Ganz nach hinten in den Hintergrund
Markieren sie alle Objekte (Grafik + Hintergrund) und gruppieren sie:
Dieses Objekt wird entlang des neu gezeichneten Hinterund-Rechtsecks vom Text umlaufen.