Demonstration einer minimalen SVG Objektgrafik

SVG-Quelltext = Das 'Programm' zur Herstellung der Objekt-Grafik

<?xml version="1.0" encoding="utf-8" ?>
<svg xmlns="http://www.w3.org/2000/svg">

<circle cx="120" cy="140" r="60" fill="red"/>
<rect x="15" y="35" width="90" height="90" fill="blue"/>
<polygon points="90,113  210,113  150,11" fill="lime"/>
<text font-size="48" x="150" y="80">SVG</text>

</svg>


▲   Das Beispiel zeigt eine besonders einfache SVG Objektgrafik aus 4 Elementen:
Kreis, Rechteck, Polygon (hier: Dreieck), Text.

Jedes Objekt wird durch seine Eigenschaften (Attribute) beschrieben, z.B. Position, Größe, Randlinie (Art, Breite Farbe), Füllung (Farbe, Muster, Transparenz), usw.

Die Objekte überlagern einander in der Reihenfolge des Programms.
Mit diesem ↗ Link wird die Grafik in einem eigenen Browser-Tab angezeigt.
Man kann die Ansicht beliebig vergrößern: Linien und Kanten werden stets absolut scharf angezeigt.
Man kann den SVG-Quelltext als Text-Datei *.svg speichern und mit jedem modernen Browser-, Grafik- oder Büro-Programm (z.B. LibreOffice, OpenOffice) weiter verarbeiten.

Der hier gezeigte Quelltext ist auf ein Minimum gekürzt. Im nächsten ↓  Kapitel wird der Original-Quelltext gezeigt und kommentiert.
Das jeweils ausführende Programm (hier: ihr Browser-Programm) setzt die SVG-Anweisungen in die optimale Anzahl von Bildpunkten (Pixel) um. Aus der gleichen SVG-Datei erzeugt ein Drucker-Treiber wesentlich mehr Bildpunkte, weil Drucker eine höhere Auflösung bieten.

SVG-Quelltext der Minimal-Grafik

◀   Ihr Browser hat diesen Text in der 'Programmiersprache' → SVG erhalten und daraus die Grafik erzeugt. Alle modernen Browser und Mobil-Telefone bieten diese Möglichkeit seit vielen Jahren.

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

• Das <circle>-Element beschreibt einen Kreis mit den Koordinaten des Mittelpunkts, dem Radius und roter Füllung.

• Das <rect>-Element beschreibt ein Rechteck mit Koordinaten, Breite, Höhe und blauer Füllung.

• Das <polygon>-Element beschreibt ein Dreieck. Es ist hier in ein Gruppen-<g>-Element eingeschlossen, welches mit der Methode translate um die angegebenen Werte nach rechts/unten verschoben wird.

• Das <text>-Element dient zur Anzeige des darin eingeschlossenen Textes   (Details)

Inline-Einbettung in HTML-5

In Webseiten-Dokumente ab der Version → HTML-5 kann man SVG Objektgrafik direkt (Inline, d.h. in den Quelltext) einbetten.
Diese Methode wird von allen modernen Browsern und Smartphones beherrscht.

Mit Klick auf diesen ↗ Link wird das links gezeigte (Minimal)-Beispiel in einem eigenen Browser-Tab geöffnet.

Alternative mit Canvas

HTML-5 bietet mit → Canvas eine weitere Grafik-Technologie:
Das gleiche Beispiel wird auch als → Canvas-Grafik vorgestellt: Als Programmiersprache wird Javascript eingesetzt, das Produkt ist eine Pixel-Grafik. Beide Programme (SVG und Canvas) werden am Client-PC ausgeführt.


Allgemeine Einbettung in HTML

Das links gezeigte Beispiel funktioniert in allen gängigen HTML-Versionen und wird auch in dieser Webseite verwendet:
Der SVG-Quelltext wird in eine eigene Text-Datei (hier demo.svg) eingetragen und mit einem <iframe>-Element (Innenrahmen) in den HTML-Quelltext eingebettet.
Damit ist die Objekt-Grafik von der Webseite getrennt und mehrfach verwendbar.

Man kann den SVG-Quelltext in einer Datei *.svg am eigenen PC speichern und mit jedem modernen Browser-Programm öffnen (Blenden sie dazu die hier angezeigten Zeilen-Nummern mit Mausklick aus).

• Man kann jede SVG Objekt-Grafik in eigene Webseiten oder in Büro-Dokumente (z.B. Textverarbeitung, Präsentation, ...) einbetten.