Startseite » Entwickeln » Das SVG-Format

Das SVG-Dateiformat

Da das SVG-Dateiformat für Vektorgrafiken das zentrale Dateiformat in Inkscape ist, ist es hilfreich sich mit dessen Grundlagen auseinanderzusetzen, wenn man zur Entwicklung von Inkscape beitragen möchte. Um zum Beispiel Deine eigenen Erweiterungen zu schreiben brauchst Du einige Erfahrung darin, wie man im XML-Baum herumklettert - und für die Arbeit an einigen der Kernfunktionen von Inkscape musst Du vielleicht sogar tief in die Mathematik von Matrizen und Bézierkurven eintauchen.

Hier haben wir einige Informationen zusammengestellt, die Dir den Einstieg erleichtern sollen.

Was ist SVG?

SVG (Abkürzung für "Scalable Vector Graphics") ist ein freies, quelloffenes, standardisiertes Dateiformat für Vektorgrafiken. Es wird vom W3C (World Wide Web Consortium), der wichtigsten internationalen Standardisierungsinstanz für das Internet, entwickelt und gepflegt.

Es basiert auf XML (Extensible Markup Language), ebenfalls ein W3C-Standardformat, das eine generische Auszeichnungssprache darstellt, die entwickelt wurde, um beliebige Daten in einem menschen- und maschinenlesbaren Format darzustellen. Wenn Du je mit (X)HTML eine Webseite gebaut hast, dann kennst Du bereits die grundlegenden Strukturen: ein baumartiger Aufbau, Tags, Elemente und Attribute.

Im SVG-Dateiformat werden diese Strukturen verwendet, um Bilddaten zu repräsentieren. Die Tags, Elemente und Attribute, die von Vektorgrafikbearbeitungs- und -anzeigeprogrammen genutzt und verstanden werden können, werden in der SVG-Spezifikation festgelegt. Die zur Zeit (März 2015) gültige Spezifikation ist SVG 1.1, wobei SVG 2.0 sich allerdings mit großen Schritten nähert, und auch viele der neuen Funktionen, die diese mit sich bringen wird, bereits in Inkscape und vielen Darstellungsprogrammen (wie Webbrowsern) implementiert sind.

Die SVG 1.1 kennt Pfade, Grundformen (wie z.B. Kreise und Polygone), Text, Füllung, Kontur und Knotenmarkierungen, Farbe, Farbverläufe, Muster, Ausschneidepfade Masken und Compositing, Filtereffekte, Interaktivität, Verlinkung, Skripte, Animation, Schriftarten und Metadaten. Dem W3C ist es wichtig, die Rückwärtskompatibilität zu gewährleisten und es zu ermöglichen, dass das Format mit eigenen Elementen erweitert werden kann.

Schau Dir dieses Beispiel an, um das grundlegende Prinzip kennenzulernen:

<svg xmlns="http://www.w3.org/2000/svg" width="300" height="200">
  <rect x="50" y="50" width="200" height="100" style="fill:red"/>
</svg>

Wenn dieser Text von einem SVG-Darstellungsprogramm wiedergegeben wird, sieht er dann so aus (öffne die Seite auch im HTML-Quelltext-Modus Deines Browsers, um zu sehen, wie er direkt und ganz gemütlich mitten im HTML der Seite eingebettet ist):

Als komplexeres Beispiel haben wir hier nun einen Ausschnitt aus dem Inkscape-Logo im SVG-Format, das einige der anderen Eigenschaften demonstriert. Beachte, wie andere, nicht bildliche Daten, z.B. der Autor oder die Lizenz der Datei, einfach mit eingebunden werden können, ohne dadurch das Aussehen des Bildes zu verändern:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   id="svg2"
   height="128"
   width="128"
   version="1.0">
  <title
     id="title7387">Inkscape Logo</title>
  <defs
     id="defs4">
    <clipPath
       id="clipoutline1"
       clipPathUnits="userSpaceOnUse">
      <path
         d="M 54.1,12.5 L 12.9,54.7 C -2.7,70.3 23,69 32.3,74.9 C 36.6,77.7 18.5,81.3 22.2,85 C 25.8,88.7 43.9,92.1 
            47.5,95.7 C 51.1,99.4 40.2,103.3 43.8,107 C 47.3,110.7 55.7, 107.2 57.2,115.6 C 58.3,121.8 72.6,118.7 
            79,113.4 C 83,110 72.1,110 75.7,106.3 C 84.7,97.2 92.7,102.2 96,93.8 C 97.8,89.3 82.4,86.1 86.5,83.2 C 
            96.3,76.3 132.3,72.8 115.7,56.2 L 73,12.5 C 67.7,7.5 59,7.5 54.1,12.5 z M 44.2,77.2 C 45.1,77.2 75,81.2 
            63.5,84.3 C 59.1,85.5 38.9,77.2 44.2,77.2 z M 101.4,93.8 C 101.4,95.9 117.7,97.1 116.8,93.3 C 115.5,86.9 
            103.2,87.4 101.4,93.8 z M 31.9,104.9 C 35.6,108.1 41.2,104.2 43,99.7 C 39.4,95 26.1,100 31.9,104.9 z M 
            99.4,98.2 C 94.8,102.4 100.2,106.8 104.7,103.9 C 105.9,103.1 104.6,99.2 99.4,98.2 z "
         id="outline1" />
    </clipPath>
    <filter
       id="filter6017"
       color-interpolation-filters="sRGB">
      <feGaussianBlur
         id="feGaussianBlur6019"
         stdDeviation="0.80546496" />
    </filter>
    <linearGradient
       y2="40"
       x2="60"
       y1="20"
       x1="82.11859"
       gradientUnits="userSpaceOnUse"
       id="linearGradient9175"
       xlink:href="#linearGradient5785" />
  </defs>
  ...
  <metadata
     id="metadata49">
    <rdf:RDF>
      <cc:Work
         rdf:about="etiquette-icon">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:creator>
          <cc:Agent>
            <dc:title>Andy Fitzsimon</dc:title>
          </cc:Agent>
        </dc:creator>
        <dc:rights>
          <cc:Agent>
            <dc:title>Andrew Michael Fitzsimon</dc:title>
          </cc:Agent>
        </dc:rights>        
        ...
    </rdf:RDF>
  </metadata> 
  ...
  <g
     id="g9139"
     transform="matrix(0.9965784,0,0,0.9962666,0.2205497,-1.598221)"
     style="display:inline;enable-background:new">
    <g
       id="g6035"
       transform="translate(3.68968e-7,0.4883067)"
       style="opacity:0.7832512">
      <path
         id="path5987"
         d="m 54.1,12.98831 -41.2,42.2 c -15.6,15.6 10.1,14.3 19.4,20.2 4.3,2.8 -13.8,6.4 -10.1,10.1 3.6,3.7 21.7,7.1 
            25.3,10.7 3.6,3.69999 -7.3,7.59999 -3.7,11.29999 3.5,3.7 11.9, 0.2 13.4,8.6 1.1,6.2 15.4,3.1 21.8,-2.2 4,
            -3.4 -6.9,-3.4 -3.3,-7.1 9,-9.09999 17, -4.1 20.3,-12.49999 1.8,-4.5 -13.6,-7.7 -9.5,-10.6 9.8,-6.9 
            45.8,-10.4 29.2,-27 l -42.7,-43.7 c -5.3,-5.000003 -14,-5.000003 -18.9,0 z m 47.3,81.3 c 0,2.1 16.3,3.3 
            15.4,-0.5 -1.3,-6.4 -13.6,-5.9 -15.4,0.5 z M 31.9,105.3883 c 3.7,3.2 9.3,-0.7 11.1, -5.2 -3.6,-4.69999 
            -16.9,0.3 -11.1,5.2 z m 67.5,-6.69999 c -4.6,4.19999 0.8,8.59999 5.3,5.69999 1.2,-0.8 -0.1,-4.7 -5.3,
            -5.69999 z"
         style="fill:#000000;fill-opacity:1;filter:url(#filter6017)" />
      <path
         style="opacity:0.5763547;fill:#000000;fill-opacity:1;filter:url(#filter6031)"
         d="m 54.1,13.96492 -41.2,42.2 c -15.6,15.6 10.1,14.3 19.4,20.2 4.3,2.8 -13.8,6.4 -10.1,
         ...         
         id="path6021" />
    </g>
  ...
  </g>
</svg>

Das Bild dazu sieht dann so aus:

Warum verwendet Inkscape SVG?

SVG ist ein menschenlesbares Format, das mit einem einfachen Texteditor bearbeitet werden kann. Man kann es durchsuchen und komprimieren, man kann es automatisiert erstellen und verändern, es kann, unter (X)HTML gemischt, ein integraler Bestandteil einer Webseite sein, man kann es animieren, es kann zum Erstellen von Desktopumgebungen verwendet werden - oder aber, natürlich, um damit fantastische Kunstwerke zu erstellen.

SVG erlaubt es auch, auf einfache Weise Metadaten des Bearbeitungsprogrammes mit einzubetten. Das Inkscape-Programm verwendet diese Funktion ausgiebig, und speichert direkt darin z.B. die Rohdaten für Dinge wie sternförmige Pfade, und auch die eigenen Einstellungen für die entsprechende Datei.

Aber vor allen Dingen, und zusätzlich dazu, dass das Format nutzer- und entwicklerfreundlich ist, ist es ein offener Standard, der ohne weitere Konvertierung direkt in vielen verschiedenen Anwendungen eingesetzt werden kann. Standardkonformität war einer der Gründe, warum das Inkscape-Projekt überhaupt entstanden ist (siehe FAQ).

Das Inkscape-Projekt verwendet jedoch nicht nur SVG als natives Dateiformat, es beteiligt sich auch an der weiteren Entwicklung und Verfeinerung der SVG-Eigenschaften, indem es einen Vertreter zu den Treffen der W3C-SVG-Arbeitsgruppe entsendet.

Wie verwendet Inkscape SVG?

Das Inkscape-Projekt ist stolz darauf, einen vollständig standardkonformen SVG-Editor zu entwickeln. Zur Zeit (März 2015), unterstützt es sogar bereits die Darstellung von SVG-Eigenschaften, die noch nicht offiziell standardisiert sind, jedoch einen stabilen Endzustand im Entwurf der SVG-Arbeitsgruppe für SVG 2.0 erreicht haben. Dies beinhaltet unter anderem Schraffurmuster, die Zeichenreihenfolge von Füllung und Kontur und CSS-Mischmodi. Über die Benutzeroberfläche können diese Dinge derzeit noch nicht bearbeitet werden - außer natürlich mittels des XML-Editors.

Verlaufsgitter sind auch bereits in der Entwicklerversion von Inkscape implementiert, aber in Version 0.91 noch nicht verfügbar. Der Standardisierungsprozess für diese Eigenschaft hat sich erst kürzlich stabilisiert, und es gibt noch eine Menge an der Benutzeroberfläche zu tun, damit die Bearbeitung von Verlaufsgittern auf eine bequeme Art und Weise erfolgen kann.

Es wird auch bereits an der Implementation von CSS-basiertem Text in Formen gearbeitet.

Obwohl all diese Funktionen Inkscape zu einem fast perfekten Spiegel des aktuellen und des zukünftigen SVG-Standards machen, gibt es auch ein paar Funktionen, die aus dem ein oder anderen Grund 'fehlen'. Inkscape kennt keinen Kachelfilter, es gibt keine Animationen (und derzeit wird auch nicht daran gearbeitet, Inkscape zu einem Bearbeitungsprogramm für Animationen zu machen - dies würde sehr viel Arbeit an der Benutzeroberfläche und den zu Grunde liegenden Animationsfunktionen erfordern). SVG-Schriftarten, die Teil der SVG1.1-Spezifikation sind, wurden aus dem Entwurf für SVG 2.0 gestrichen. Sie werden durch SVG in OpenType fonts ersetzt werden.

Das einzige in Inkscape, was im Moment wirklich nicht standardkonform ist, ist Fließtext. Das liegt daran, dass der Standardisierungsprozess für SVG 1.2, das Fließtext enthalten sollte, unterbrochen wurde. Zu dem Zeitpunkt war die Funktion jedoch schon im Programm drin, und viele Benutzer waren sehr froh darüber, sie nutzen zu können. Schließlich haben sich die Inkscape-Entwickler dazu entschieden, den Fließtext nicht einfach wieder herauszunehmen, sondern ihn dringelassen, damit die Benutzer ihre Texte innerhalb von Inkscape dynamisch bearbeiten können.

SVG lernen

Technische Informationen

Allgemeine Informationen

  • SVG-Grundlagen von David Dailey
  • SVG-Themen im Blog von Peter Collingridge
  • Learn SVG - Umfassendes Lehrbuch über die fortgeschrittenen SVG-Aspekte von Jon Frost, Stefan Goessner und Michel Hirtzler, frei verfügbar zum Lesen online. Wegen des Alters des Werkes sind möglicherweise nicht mehr alle vorgestellten Techniken ganz zeitgemäß, die Erklärungen zu den grundlegenden Eigenschaften und Prizipien sind jedoch immer noch sehr nützlich.
  • Tavmjong Bahs Blog gibt eine Menge Hintergrundinformationen zur Entwicklung der SVG-Spezifikation (und enthält auch viele weitere Informationen zu SVG- und Inkscape-Themen)

Tutorials

Dies ist nur eine kleine Auswahl von all den vielen Tutorials, die im Internet zu finden sind:

Weitere Tutorials kannst Du leicht finden, indem Du Deine bevorzugte Suchmaschine zu Rate ziehst.

Inkscape ist freie und quelloffene Software und steht unter der GPL.