1. Index
  2. HTML
  3. LaTeX
  4. Hardware
  5. Legende

Scalable Vector Graphics

SVG ist für Grafik, was HTML für Text ist: ein XML-Dialekt zur Beschreibung zweidimensionaler Vektor-Grafiken.

Beispiel

Als eigenständige Grafikdatei:

hello.svg
<?xml version="1.0"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg version="1.1" baseProfile="full" width="210mm" height="297mm" xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink"> <ellipse cx="50%" cy="50%" rx="45%" ry="45%" stroke-width="3pt" stroke="orange" fill="white"/> <text x="50%" y="2em" text-anchor="middle"> Hello, World!</text> </svg>

Eingebettet in ein HTML-Dokument:

hello.html
<!DOCTYPE html> <html> <body> <svg width="12em" height="3em"> <ellipse cx="50%" cy="50%" rx="45%" ry="45%" stroke-width="3pt" stroke="orange" fill="white" onmouseover="evt.target.setAttribute('fill', 'yellow');" onmouseout="evt.target.setAttribute('fill', 'white');" /> <text x="50%" y="2em" text-anchor="middle"> Hello, World! </text> </svg> </body> </html>

Ergibt:

Hello, World!

Struktur

Eine Vektorgrafik enthält typischerweise eine Reihe vordefinierter Objekte sowie Hierarchien von Gruppen, die entweder eigene Objekte enthalten oder auf die vorher definierten Objekte verweisen.

Grundelemente
svg * Wurzelelement
version 1.1 Spezifikation
baseProfile none | full | tiny
x, y Coord Position einer eingebetteten Untergrafik
width Length Breite
height Length Höhe
preserveAspectRatio xMidYMid meet Seitenverhältnis
contentScriptType application/ecmascript MIME-Typ für eingebettete Skripte
contentStyleType text/css MIME-Typ für eingebettete Stilvorlagen
zoomAndPan disable | magnify
g structural * Gruppe von Objekten
presentation Schablone für alle Objekte in dieser Gruppe
defs structural * Sammlung von Eigenschaften
symbolstructural * Semantische Gruppe
preserveAspectRatio xMidYMid meet Seitenverhältnis
viewBox x y width height Ausschnitt
use structural {desc} [animate] Verwendung eines vorher definierten Objekts
xlink:href url(#id) Verweis auf Symbol, Definition, Gruppe oder Grafik
x, y Coord Position
width Length Breite
height Length Höhe
image structural {desc} [animate] Externe Raster- oder Vektorgrafik
preserveAspectRatio xMidYMid meet Seitenverhältnis
xlink:href Url Pfad
x, y Coord Position
width Length Breite
height Length Höhe
switchstructural {desc} [animate] [shape] Bedingte Verarbeitung
presentation Darstellung
requiredFeatures {Name}
requiredExtensions {Name}
systemLanguage {de | en | …}
foreignObject structural * XHTML-Elemente mit automatischem Zeilenumbruch etc.
presentation Darstellung
conditional Bedingt Verarbeitung
x, y Coord Position
width Length Breite
height Length Höhe
Deskriptive Elemente
title Text Beschriftung für Gruppe oder Objekt
class {Name} CSS-Klassen
style Text CSS-Eigenschaften
desc Text Beschreibung einer Gruppe oder eines Objekts
class {Name} CSS-Klassen
style Text CSS-Eigenschaften
metadata * Elemente aus anderen XML-Namensräumen
Stilvorlagen
style Text Eingebettete Stilvorlage
type text/css MIME-Typ der Stilvorlage
media all | screen | print | … Ausgabemedien
title String Beschriftung
script Text Eingebettete Funktionen
type application/ecmascript MIME-Typ der Skriptsprache
xlink:href Url Ziel
externalResourcesRequired false | true Abhängigkeit von anderen Dateien
Strukturelle Attribute
class {Name} CSS-Klassen
style Text CSS-Eigenschaften
externalResourcesRequired false | true Abhängigkeit von anderen Dateien
transform matrix(a b c d e f) Transformationsmatrix
translate(x [y]) Verschiebung
scale(x [y]) Skalierung
rotate(angle [x] [y]) Drehung
skewX(angle) Neigung
skewY(angle) Neigung

Umrisse

Formen
rect structural {desc} [animate] Rechteck
presentation Darstellung
x, y Coord Position
rx, ry Coord Eckenradius
width Length Breite
height Length Höhe
circle structural {desc} [animate] Kreis
presentation Darstellung
cx, cy Coord Mittelpunkt
r Length Radius
ellipse structural {desc} [animate] Ellipse
presentation Darstellung
cx, cy Coord Mittelpunkt
rx, ry Coord Radius
line structural {desc} [animate] Gerade Linie
presentation Darstellung
x1, y1 Coord Startpunkt
x2, y2 Coord Endpunkt
polyline structural {desc} [animate] Linienzug
presentation Darstellung
points {x,y} Koordinatenpaare
polygon structural {desc} [animate] Gefülltes Vieleck
presentation Darstellung
points {x,y} Koordinatenpaare
Pfeile
markerstructural * Umriss zur Verwendung als End-Markierung
presentation
viewBox x y width height
preserveAspectRatio xMidYMid meet
refX Coord
refY Coord
markerUnits strokeWidth | userSpaceOnUse
markerWidth Length
markerHeight Length
orient auto | angle

Pfade

Pfade
path structural {desc} [animate] Pfad
d {M|L|… x y} [z] Linien und Bézier-Kurven
pathLength Number Berechnete Länge
Darstellungsattribute
Füllung
fill none Keine Füllung
currentColor
Color Farbe für Füllung
Paintservice Füllung der aufgespannten Fläche
fill-rule nonzero Verhalten bei mehreren oder überschneidenden Rändern
evenodd
fill-opacity 0…1 Transparenz
Umrandung
stroke none Keine Umrandung
currentColor
Color Farbe für Umradung
Paintservice
stroke-width Length Linienstärke
stroke-opacity 0…1 Transparenz
stroke-linecap butt
round Abgerundete Enden
square Rechtwinklige Enden
stroke-linejoin miter
round
bevel Linienverbindungen
stroke-miterlimit 4 | Number Grenze für Umschaltung auf bevel.
stroke-dasharray none
{Number} Strichmuster
stroke-dashoffset Length Versatz für das Strichmuster
Sichtbarkeit
display none | inline | block | … CSS-Anzeigeeigenschaften
visibility visible | hidden | collapse CSS-Sichtbarkeit
opacity 0…1 Transparenz des gesamten Objekts
overflow auto | visible | hidden | scroll
cursor auto | default
pointer | crosshair
move | text | wait | help
[e|w|n|s|ne|nw|se|sw]-resize
Url
Feineinstellungen
color-interpolation auto | sRGB | linearRGB
color-interpolation-filters auto | sRGB | linearRGB
color-rendering auto
optimizeSpeed
optimizeQuality
shape-rendering auto
optimizeSpeed
crispEdges
geometricPrecision
text-rendering auto
optimizeSpeed
optimizeLegibility
geometricPrecision
image-rendering auto
optimizeSpeed
optimizeQuality
buffered-rendering auto
dynamic
static
pointer-events none | boundingBox
visible[Painted|Fill|Stroke]
painted | fill | stroke | all
Maskierung
clipPath structural {desc | animate | shape | text | use}
presentation
conditional Bedingt Verarbeitung
clipPathUnits userSpaceOnUse | objectBoundingBox

Text

text structural {tspan | tref | altGlyph | textPath | a} Text Schriftzug
tspan structural {tspan | tref | altGlyph | a} Text Schriftzug
Position
x, y {Number} Einzelne Glyphen absolut positionieren
dx, dy {Number} Einzelne Glyphen um ihre Position tanzen lassen
rotate {angle} Einzelne Glyphen rotieren
textLength Length
lengthAdjust spacing[AndGlyphs]
Schrift
font-family String Schrift
font-size Length Größe
font-weight normal | light | bold | 100 | … | 900 Gewicht
font-style normal | italic | oblique Aufrecht, Kursiv oder Geneigt
font-variant normal | small-caps Kapitälchen
font-stretch normal | narrower | wider | … Laufweite
font-size-adjust none
Number
Internationalisierung
unicode-bidi unicode-bidi
direction direction
writing-mode lr[-tb] | rl[-tb] | tb[-rl] Schreibrichtung
glyph-orientation-vertical auto Ausrichtung in der Senkrechten
angle
glyph-orientation-horizontal angle Ausrichtung in der Waagerechten
text-anchor start
middle
end
dominant-baseline auto
use-script
no-change
reset-size
alphabetic | ideographic | mathematical
hanging | middle | central
text-[before|after]-edge
alignment-baseline auto
baseline
alphabetic | ideographic | mathematical
hanging | middle | central
text-[before|after]-edge
baseline-shift baseline
sub
super
Length
Mikrotypographie
kerning auto | Length Kerning
letter-spacing normal | Length Zusätzlicher Raum zwischen Buchstaben
word-spacing normal | Length Zusätzlicher Raum zwischen Wörtern
text-decoration none | Line Style Color Linienstil, Muster und Farbe
Verweise
trefstructural Wiederverwendung
xlink:href url(#id) Verweis auf einen Text
textPath structural Verweis auf anderen Text
startOffset Length V
method align | stretch V
spacing auto | exact V
xlink:href url(#id) Verweis auf einen Pfad
altGlyph structural Text | * Alternative Glyphe
x, y Number Absolute Position
dx, dy Number Relative Position
rotate {angle} Einzelne Glyphen rotieren
glyphRef String Name der Glyphe
format svg | woff | truetype | … Dateiformat
xlink:href url(#id) Verweis auf eine Glyphe
altGlyphDef {glyphRef} | {altGlyphItem}
altGlyphItem {glyphRef} Liste von Glyphen
glyphRefstructural
x, y Number Absolute Position
dx, dy Number Relative Position
glyphRef String Name der Glyphe
format svg | woff | truetype | … Dateiformat
xlink:href url(#id) Verweis auf eine Glyphe

Schrift

SVG-Schriften können in Dokumente eingebettet, als eigenständige Schriften verwendet und in andere Formate konvertiert werden.

font {desc} font-face Meta-Informationen
{glyph} [missing-glyph] Schriftzeichen
{hkern} {vkern} Kerning-Paare
structural
presentation
horiz-origin-[x|y] Number
horiz-adv-[x|y] Number
vert-origin-[x|y] Number
font-face CSS-Schriftinformationen
glyphpresentation * Einzelne Glyphe
class {Name} CSS-Klassen
style Text CSS-Eigenschaften
d {M|L|… x y} [z]Linien und Bézier-Kurven
vert-origin-[x|y] Number
horiz-adv-x Number Senkrechter Fortschrit
vert-adv-y Number Waagerechter Fortschritt
unicode String Zeichen oder Zeichenfolge, zum Beispiel ffl für Ligaturen
glyph-name Name
orientation h | v Progression
arabic-form initial | medial | terminal | isolated Variante
lang de | en | … Sprachcodes
missing-glyphpresentation* Ersatzzeichen für undefinierte Glyphen
class {Name} CSS-Klassen
style Text CSS-Eigenschaften
d {M|L|… x y} [z] Linien und Bézier-Kurven
vert-origin-[x|y] Number
horiz-adv-x Number Waagerechter Fortschrit
vert-adv-y Number Senkrechter Fortschritt
hkern Waagerechtes Kerning
vkern Senkrechtes Kerning
u1, u2 {Character | Number}, Buchstabenpaarung anhand Unicode
g1, g2 {Name} Buchstabenpaarung anhand des Glyphnamens
k Number Unterschneidung im Koordinatensystem der Schrift

Farbverläufe

…Gradientstructural Alle Farbverläufe
gradientUnits userSpaceOnUse Koordinatensystem
objectBoundingBox Koordinatensystem
gradientTransform {Transform} Transformationen
spreadMethod pad
reflect
repeat
xlink:href url(#ID) Eigenschaften von anderem Gradienten erben
linearGradient{desc} [animate] stop
x1, y1, x2, y2 Coord Koordinaten
radialGradient {desc} [animate] stop
cx, cy Coord Mittelpunkt
fx, fy Coord Fokalpunkt
r Length Radius
stop Text
presentation Darstellung
offset Length
stop-color Color Farbe
stop-opacity 0…1 Transparenz

Animation

Elemente
animate presentation{desc}
event
target
timing
value
addition
set {desc}
event
target
timing
to
animateColor presentation {desc} [mpath]
target
timing
value
addition
animateMotion presentation {desc}
event
timing
value
addition
path
keyPoints
rotate
origin
animateTransform {desc}
event
target
timing
value
addition
type
* conditional Bedingt Verarbeitung
xlink:href url(#id) Verweis auf Symbol, Definition, Gruppe oder Grafik
externalResourcesRequired false | true Abhängigkeit von anderen Dateien
Ereignisse
onbegin
onend
onrepeat
onload
Ziel
attributeType
attributeName
Zeit
begin
dur
end
min
max
restart
repeatCount
repeatDur
fill
Wert
calcMode
values
keyTimes
keySplines
from
to
by
Addition
additive
accumulate

Filter

filter structural {desc} [animate] {fe*} Filter
presentation Darstellung
xlink:href url(#id) Verweis auf Symbol, Definition, Gruppe oder Grafik
x, y Coord Position
width Length Breite
height Length Höhe
filterRes Number
filterUnits userSpaceOnUse | objectBoundingBox
primitiveUnits userSpaceOnUse | objectBoundingBox
Primitiven
x, y Coord Position
width Length Breite
height Length Höhe
result Name
in SourceGraphic
SourceAlpha
BackgroundImage
BackgroundAlpha
FillPaint
StrokePaint
Name
feDistantLight
fePointLight
feSpotLight
feBlend
feColorMatrix
feComponentTransfer
feComposite
feConvolveMatrix
feDiffuseLighting
feDisplacementMap
feFlood
feGaussianBlur
feImage
feMerge
feMergeNode
feMorphology
feOffset
feSpecularLighting
feTile
feTurbulence
feFuncA
feFuncB
feFuncG
feFuncR

Verweise

XLink-Attribute
xlink:href Url Ziel
xlink:show new | replace
xlink:actuate onRequest
a presentation * Verweis
conditional Bedingt Verarbeitung
xlink:* Verweise
target _self | _replace Aktueller Anzeigebereich
_parent Übergeordneter Rahmen
_top Aktuelles Fenster
_blank Neues Fenster
Name Benannter Anzeigebereich
view {desc}
viewTarget Name [Name]
viewBox x y width height Ausschnitt
preserveAspectRatio xMidYMid meet Seitenverhältnis
zoomAndPan disable | magnify

Literatur