Über Inkscape: Einführung | Was ist ein SVG? | Warum SVG, was kann man damit tun? | Geschichtlicher Hintergrund | Meilensteine

Installation und Updates: Installation und Updates unter Windows | Installation unter Linux

Inkscape Grundlagenbuch

Startseite

Mithilfe willkommen! Dieses Kapitel wurde für eine ältere Version von Inkscape geschrieben und muss noch für die derzeitige Version 1.0.1. aktualisiert werden.

SVG – Skalierbare Vektor Grafik

Ein SVG ist erstmal nur eine Textdatei, in der mit vordefinierten Befehlen eine Grafik mathematisch zusammengesetzt wird. Die Umsetzung von Text in Grafik übernimmt dabei das SVG-Anzeigeprogramm. Das ist in den meisten Fällen der Browser am heimischen Rechner, manchmal jedoch auch schon ein Mobiltelefon, Smartphone oder PDA, denn SVG wird mittlerweile (2014) von vielen Darstellungsprogrammen interpretiert, einschließlich der aktuellen Versionen aller gängiger Browser, allerdings von keinem Programm vollständig und fehlerfrei.

Der SVG-Standard wurde von dem W3C Konsortium festgelegt und wird ständig weiterentwickelt. Es gibt verschiedene Entwicklungsstufen die von der W3C für SVG festgelegt wurden. Darunter:

SVG 1.0

Dies ist der erste festgelegte Standard von SVG gewesen. Die Version ist veraltet, bietet technisch aber nicht weniger als SVG 1.1.

SVG 1.1

Die verbesserte Version. Beginnend mit dieser Version wurde auch eine Aufspaltung in Teilgruppen unternommen, um andere Geräte mit Bildschirm für die Anzeige von Vektorgrafiken vorzubereiten. Deshalb wurden die Profile SVG 1.1 Tiny und der SVG 1.1 Basic ins Leben gerufen. Mittlerweile hat sich allerdings herausgestellt, daß sich kaum eine Implementierung nach solchen Profilen richtet, daher wurden solche Bemühungen mit dem in Planung befindlichen SVG 2 wieder eingestellt.

SVG 1.2 tiny

Das ist der momentan aktuellste Entwicklungsstand der drei Versionen. 1.2 gibt es nur in der Variante tiny, hat gegenüber tiny 1.1 und basic 1.1 einen erweiterten Funktionsumfang und auch einige Elemente und Funktionalitäten wie Audio und Video, die es in 1.1 nicht gibt. Gegenüber der Vollversion 1.1 fehlen aber auch einige Funktionalitäten, weil tiny 1.2 auf mobile Geräte zugeschnitten ist. Anzeigeprogramme, welche sich als mit SVG 1.2 tiny kompatible Programme bezeichnen wollen, müssen alle Möglichkeiten, welche diese Definition beinhaltet, komplett unterstützen.

Dann gibt es noch verschiedene Geschmacksrichtungen

Diese Unterscheidungen wurden eingeführt, um nicht einem Mobiltelefon mit nur begrenzten Ressourcen den kompletten SVG-Standard abzufordern. Deshalb wurde unter dem Begriff SVG Mobile zwei verschiedene Abstufungen der kompletten SVG 1.1 Definition geschaffen. Dadurch kann man in der SVG-Datei bestimmen, dass man nur einen bestimmten Teil benutzen möchte.

SVG Mobile
- SVG Basic
- SVG Tiny

Bei der in Vorbereitung befindlichen Version SVG 2 wird es keine solchen Unterprofile mehr geben.

Was ist der Unterschied von Skalierbarer Vektorgrafik zur Rastergrafik?

Skalierbare Vektorgrafik ist ein spezielles Dateiformat für Grafik, das es ermöglicht, Umrisse zu definieren, indem man mit Vektoren Punkte, Radien, Drehungen usw. festlegt. Das heißt, dass es auch nachträglich ohne weiteres möglich und ganz einfach ist, die verschiedenen Formen zu bearbeiten. Ein Rasterisierungsverfahren benützt diese Informationen, um zu entscheiden, wie jede Linie und Kurve zu drucken ist.

Eine andere gebräuchliche Art von Grafik ist eine Rastergrafik. Rastergrafiken (Bitmaps) sind einfach Mengen von Pixeln verschiedener Farben. Wenn man mal etwas in ein Bitmap gezeichnet hat, kann man es nicht mehr ohne weiteres vergrössern oder sonstwie bearbeiten. Wenn man das Bild vergrössert oder verkleinert, vermindert sich die Qualität des Bildes, weil die Pixel jedes mal neu interpoliert werden, was normalerweise viele Fehler mit sich bringt.

Vektorgrafiken haben diese Probleme nicht, weil sie aus voneinander getrennten grafischen Elementen bestehen - Ellipsen, Kurven, Linien und Text. Weil sie auf diese Weise beschrieben sind, kann die Darstellung an jede Bildschirm- oder Papiergrösse angepasst werden.

Vektorgrafiken sind keine Alternative zu Rastergrafiken - jede Art hat ihren eigenen Zweck und ist nützlich für unterschiedliche Dinge. Rastergrafiken sind eher besser für Fotografien und für Situationen, in denen ein Vektorgrafik-Renderverfahren unpraktisch oder zu langsam ist.

Grundsätzlicher Aufbau einer SVG Datei

Hier ein blankes Grundgerüst einer SVG (Die Nummerierungen wurden nur wegen der besseren Lesbarkeit eingefügt):

 <?xml version="1.0" encoding="UTF-8"?>

 <!-- Created with Inkscape (http://www.inkscape.org/) -->

  <svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   width="210mm"
   height="297mm"
   viewBox="0 0 420 594">
   <title>Titel der Datei</title>
   <desc>Beschreibung der Datei</desc>
   <defs>
   <!-- hier kommt nicht darzustellender Inhhalt rein, 
        der etwa vom Rest referenziert werden kann. -->
   </defs>

   <g>
   <!-- ein Element g für irgendwelchen Inhalt -->
   </g>

 </svg>

Ist eine XML-Verarbeitungsanweisung. Da SVG ein XML-Format ist, sollte eine solche als erster Inhalt in der ersten Zeile jeder SVG-Datei stehen. Mittels encoding wird die verwendete Kodierung für die Datei angegeben, hier UTF-8.
Ein Kommentar. Solch ein Kommentar kann in jeder Zeile des Dokuments eingefügt werden und dient nur der besseren Lesbarkeit des Quelltextes. Der Inhalt eines Kommentares wird nicht präsentiert, ist also nur im Quelltext sichtbar.
Die Anfangsmarkierung des Elementes svg reicht bis Zeile 11. Die ist das Wurzelelement einer SVG-Datei. In der Anfangsmarkierung können zum Beispiel die Version mit dem Attribut version angegeben werden, der Anzeigebereich mit dem Attribut viewBox, die Seitengröße und diverse Angaben, welche die gesamte Datei betreffen. Zusätzlich sind hier noch in Zeile 6 und 7 die Namensräume für SVG und XLink festgelegt . Ohne eine Namensraumangabe für SVG handelt es sich um irgendein XML, Darstellungsprogramme können dies ohne eine solche Angabe nicht als zu präsentierende Graphik identifizieren.
Hier wird die unterstützte Version des benutzten SVG-Standards eingetragen. Möglich wären hier 1.0, 1.1 und 1.2
width beschreibt die Breite des Präsentationsbereiches. Sofern nicht angegeben, wird 100%, also die verfügbare Breite angenommen, was meist eine sinnvolle Annahme ist, weswegen man das Attribut meist nicht zu notieren braucht.
height beschreibt die Höhe des Präsentationsbereiches. Sofern nicht angegeben, wird 100%, also die verfügbare Breite angenommen, was meist eine sinnvolle Annahme ist, weswegen man das Attribut meist nicht zu notieren braucht. Es sind auch andere Masseinheiten wie in, %, mm, px, em, ex gemäß CSS möglich. Ohne Einheit wird px angenommen, was zumeist
mit viewBox wird in lokalen Einheiten angegeben, welcher Bereich der Graphik darzustellen ist. viewBox sollte immer angegeben werden, sonst hängt es vom verfügbaren Darstellungsbereich oder der angegebenen Höhe und Breite ab, was dargestellt wird.
Ein SVG-Dokument sollte immer einen Titel haben, schon damit man sich im Bedarfsfalle über das Dokument unterhalten kann und dies dafür mit einem Namen bezeichnen kann. Elemente title' können auch in anderen Elementen notiert werden und dienen dort ebenfalls dafür, eine bezeichnende Textalternative für das Element bereitzustellen.
In einem Element desc kann eine Beschreibung des Dokumentes als Textalternative folgen. Bei anderen Elementen kann diese ebenfalls verwendet werden, um eine Beschreibung von Inhalt, Bedeutung und Funktion eines Elementes als Textalternative anzubieten. Ansonsten unverständlicher Inhalt kann so zugänglich und barrierefrei gestaltet werden.
Hierin werden später Objekte auf Vorrat eingetragen. Diese können dann von anderen Elementen referenziert und wiederverwendet werden.
Ein Element g dient dazu, anderen, darin enthaltene Elemente zu gruppieren. Hier steht es pauschal für normalen Inhalt.
In dieser Zeile steht die Abschlussmarkierung des Wurzelelementes svg. In einer XML-Datei muss jedes Element geschlossen sein.

Weitere Details über SVG kann man im Wikibuch SVG lernen.