WWW HTTP HTML CSS SVG
Beispiel Struktur Umriss Pfade Text Schrift Farbverlauf Animation Filter Verweis
XML
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 symbol structural * 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 switch structural {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
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 tref structural 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 glyphRef structural 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 glyph presentation * 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-glyph presentation * 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
…Gradient structural 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
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