EnglishРусскийTürkçeDeutschFrançais Über · RSS
WebInterface.org
WebInterface.org

Notizen zu Zeichnung, Druck, Fotografie und Bildern aus dem Computer.

Start · Computergrafik · Was in einer SVG-Datei steht

Was in einer SVG-Datei steht

Ein SVG-Dokument kann drei Arten grafischer Objekte halten: Vektorformen, darunter Pfade aus geraden Linien und Kurven; Bitmap-Bilder; und Text. Objekte lassen sich gruppieren, gestalten, transformieren und auf das setzen, was schon gezeichnet ist. Zum Umfang der Merkmale gehören verschachtelte Transformationen, Beschneidungspfade, Alphamasken, Filtereffekte und Vorlagenobjekte. Eine Zeichnung kann interaktiv sein. Animation kann in die SVG-Elemente selbst geschrieben werden oder in ein Skript, das in das Objektmodell des Dokuments greift.

Gestaltet wird mit CSS. Skript kommt von JavaScript. Der Text steht im Dokument als wirkliche Zeichen. Deshalb lässt eine Zeichnung sich durchsuchen, und deshalb ist internationaler Text, gemischte Schreibrichtungen eingeschlossen, ein normaler Fall und keine Notlösung. Die Spezifikation zielt auf Auszeichnung in Vektoren. Ihr Entwurf deckt auch die grundlegenden Pflichten einer Seitenbeschreibungssprache, die Art von Aufgabe, die PDF erledigt: genug Information, um jede Glyphe und jedes Bild an eine gewählte Stelle auf einer gedruckten Seite zu setzen. CSS gestaltet es trotzdem. Die beiden Tatsachen sitzen bequemer beieinander, als zu erwarten wäre. Eine Datei kann am Montag ein Bild auf einer Website sein und am Dienstag eine Abbildung in einem Drucklauf, aus demselben Text.

Die Spezifikation SVG 1.1 gliedert sich in vierzehn Funktionsbereiche. Was folgt, sind diese Bereiche in einer Reihenfolge zum Lesen, nicht eine vierzehnte Abschrift der Überschriften.

Pfade, Formen und Text

Pfade sind die kompakte Art, einen Umriss zu beschreiben. Ein Pfad kann gefüllt werden, konturiert oder als Grenze einer Beschneidung benutzt werden. Die Befehle sind einzelne Buchstaben. M bedeutet move to, also gehe zu diesem Punkt, und danach stehen ein x und ein y. L bedeutet line to, also Linie zu diesem Punkt. C, S, Q, T und A leiten verschiedene Bézier-Kurven und elliptische Kurven ein. Z schließt den Pfad. Ein Großbuchstabe bedeutet, dass die folgenden Zahlen absolute Koordinaten sind. Derselbe Buchstabe als Kleinbuchstabe bedeutet, dass sie relativ zum aktuellen Punkt sind. Darin besteht die ganze Kompaktheit. Ein verwickelter Umriss ist eine kurze Zeichenkette, keine Liste von XML-Elementen mit einer Koordinate in jedem.

Grundformen gibt es, damit die häufigen Fälle nicht als Pfade geschrieben werden müssen. Gerade Linien, Polylinien, Polygone, Kreise, Ellipsen, Rechtecke und Rechtecke mit abgerundeten Ecken sind allesamt Elemente erster Klasse. Jede davon lässt sich aus einem Pfad bauen. Nötig sollte das nicht sein.

Text besteht aus Zeichendaten nach Unicode innerhalb des XML. Viele visuelle Effekte sind möglich. Die Spezifikation behandelt bidirektionalen Text, sodass ein Stück Englisch und ein Stück Arabisch sich eine Zeile teilen können, vertikalen Text von der Art, wie er für Chinesisch oder Japanisch benutzt wird, und Text, der entlang einer Kurve liegt. Die klassische Vorführung ist Schrift um ein Siegel. Die nützliche Vorführung ist eine Beschriftung im Diagramm, die Text bleibt und die man kopieren kann, und nicht eine Beschriftung, die in Pfade aufgelöst wurde und nur angesehen werden kann.

Farbauftrag

Formen lassen sich mit einer Farbe füllen und konturieren, mit einem Verlauf oder mit einem Muster. Eine Füllung kann deckend sein oder in jedem Grad durchsichtig. Marker sind Zierde an den Eckpunkten oder an den Enden einer Linie: Pfeilspitzen sind der naheliegende Fall. Farbe wird angegeben wie in CSS. Ein Name wie blue, ein kurzer oder langer Hexadezimalwert, ein dezimales Tripel rgb() oder Prozentangaben. Verläufe können linear oder radial sein, können beliebig viele Stopps enthalten, können sich wiederholen und können die Deckkraft ebenso ändern wie die Farbe. Muster werden aus einem Rasterobjekt oder einem Vektorobjekt gebaut und entlang x und y wiederholt. Verläufe und Muster lassen sich animieren und per Skript steuern.

Seit 2008 gibt es in der Fachwelt eine Debatte darüber, ob Verlaufsnetze (Gradient Meshes) oder Diffusionskurven hinzukommen sollten. Eine schlichte Darstellung durch Diffusionskurven kann feine Schattierung halten, und sie lässt sich aus einer Bitmap automatisch gewinnen. Wer Netze und Diffusionskurven benutzt hat, fand die Kurven einfacher zu bauen. Der Entwurf von SVG 2 enthält Verlaufsnetze. Bis Browser das verbreitet zeichnen, bleibt als praktischer Vorrat die einfache Farbe, lineare und radiale Verläufe, und Muster.

Drei Grundformen. Das Markup darunter ist die ganze Zeichnung.
<rect x="16" y="28" width="90" height="70" fill="#2070e0"/>
<circle cx="160" cy="74" r="36" fill="#f07000"/>
<line x1="210" y1="30" x2="264" y2="122" stroke="#1858b8" stroke-width="4"/>

Beschneiden, Filter und der Stapel

Grafische Elemente, Text eingeschlossen, können ein Innen und ein Außen festlegen, und diese Gebiete lassen sich unabhängig voneinander bemalen. Vollständig deckende Beschneidungspfade und halbdurchsichtige Masken werden so zusammengesetzt, dass Farbe und Deckkraft jedes Pixels des fertigen Bildes entstehen, mit Alphamischung (Alpha Blending). Ein Clip sagt, was sichtbar ist. Eine Maske sagt, wie sichtbar. Im Gespräch sind sie leicht zu verwechseln, und in der Datei sind sie verschiedene Elemente.

Ein Filtereffekt ist eine Reihe grafischer Operationen, angewendet auf eine Ausgangsgrafik, mit einem veränderten Bitmap als Ergebnis. Die Quelle kann ein Vektor bleiben. Die gefilterte Ausgabe sind Pixel. Weichzeichnen ist das Beispiel, das schon alle benutzt haben. Der Mechanismus ist allgemeiner als das Weichzeichnen: eine Kette von Operationen, und jede nimmt das vorige Ergebnis. Filter sind auch die Stelle, an der eine „Vektordatei“ für einen Teil ihres Lebens still zu einem Raster wird. Wird die Seite skaliert, zeichnen die Vektoren sich neu. Der Filter läuft erneut. Deshalb kann ein weichgezeichnetes SVG scharf bleiben, wo ein vorher weichgezeichnetes PNG es nicht kann, und deshalb ist ein schwerer Filter nicht umsonst zu haben.

Interaktion, Verweise, Skripte, Animation

SVG-Bilder können auf mehrere Arten auf eine Person antworten. Neben Hyperlinks kann jeder Teil einer Zeichnung auf Ereignisse der Oberfläche hören: Wechsel des Fokus, Klicks, Scrollen, Zoomen und andere Ereignisse von Zeiger, Tastatur und Dokument. Eine Behandlung kann eine Animation starten, anhalten oder ändern, oder ein Skript ausführen. Verweise benutzen XLink. Über ein Element view oder einen Fragmentbezeichner kann eine URL eine SVG-Datei schon auf ein Gebiet gezoomt öffnen oder auf ein Element begrenzt. Das ist ein praktischer Weg, aus einer einzigen Zeichnung ein Sprite-Sheet zu bauen. Zusammen mit use lässt XLink eine Datei auch auf ein Element zeigen, in ihr selbst oder außerhalb, und es wiederverwenden. Weniger Markup, und eine Definition, wenn das Zeichen sich ändern muss.

Jeder Teil des Dokuments ist von einem Skript aus zu erreichen, im selben Geist wie bei HTML. Für jedes Element und jedes Attribut gibt es ein Objekt des Dokumentobjektmodells. Skripte stehen in Elementen script und können auf Ereignisse von Zeiger, Tastatur und Dokument hin laufen. Animation hat eigene Elemente, darunter animate, animateMotion und animateColor, und sie kann auch dadurch entstehen, dass ein Skript das Dokument nach einem Zeitgeber verändert. Der Entwurf der Animation sollte mit SMIL verträglich bleiben, der Synchronized Multimedia Integration Language, der Sprache für die Integration synchronisierter Multimedia. Das W3C empfiehlt SMIL ausdrücklich als die Norm für Animation in SVG. Animationen können fortlaufend sein, sie können sich wiederholen, und sie können der Person am Gerät antworten. Eine Zeichnung, die sich bewegt, bleibt eine Zeichnung. Eine gute Idee ist sie damit nicht von selbst. Bewegung, die die Geometrie nur wiederholt, lehrt nichts, was die ruhende Datei nicht schon gesagt hat.

Schriften, Metadaten, Wiederverwendung

Text in SVG kann auf eine externe Schrift verweisen, auch auf eine Schrift, die auf dem Rechner installiert ist. Fehlt diese Schrift dort, wo die Datei gezeichnet wird, sieht der Text nicht so aus, wie er gestaltet wurde. Ein Gegenmittel, in der älteren Spezifikation, ist eine SVG-Schrift: die Glyphen sind in der Datei definiert und werden vom Textelement aus angesprochen. SVG 2 schiebt diese Aufgabe zu WOFF. Das zugrunde liegende Problem rückt nicht mit. Eine Zeichnung, die von einer Schrift abhängt, welche die lesende Person nicht hat, ist eine Zeichnung, die ersetzt wird, und die Ersetzung ändert die Zeilenlängen.

Metadaten passen zum weiteren Interesse des W3C an Beschreibung. Das Element metadata kann Eigenschaften aus Dublin Core tragen: title, creator, subject, description, also Titel, Urheber, Thema, Beschreibung. Andere Schemata sind erlaubt. title und desc geben eine Beschreibung in Klartext innerhalb des Bildes. Das hilft beim Indizieren und hilft auch einer lesenden Person, die das Bild nicht sehen kann. Ein Dokument kann eine Form oder einen Verlauf einmal festlegen und viele Male benutzen. Es kann auch Rasterbilder aufnehmen, PNG oder JPEG, und weitere SVG-Dokumente. Das Format ist eine Zeichnung. Es ist auch ein kleines Archiv der Stücke einer Zeichnung. Browser, Telefone und Druckwerkzeuge sind es, die es ausliefern.

Vorher: Skalierbare VektorgrafikenNachher: SVG auf der Seite, dem Telefon und im Druck