SVG ist ein XML-Dialekt zur Gestaltung zweidimensionaler Vektor-Grafiken.
Als eigenständige Vektorgrafik-Datei
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full" width="210mm" height="297mm"> <!--Inhalt der Datei --> </svg>
Eingebettet in HTML-Dokument
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="10em"> <ellipse cx="50%" cy="50%" rx="45%" ry="45%" stroke="green" fill="yellow" stroke-width="3pt"/> <text text-anchor="middle" x="50%" y="2em">Hello, World!</text> </svg>
| Element | Inhalt | Beschreibung | ||
| svg | defs *(g object ) | |||
| viewport-fill | = | none/ inherit/ currentColor/ color |
= | Füllung des Sichtbereichs |
| viewport-opacity | = | opacity | = | Transparenz des Sichtbereichs |
| defs | ||||
| g | g / object | Gruppierung von Objekten mit Default-Eigenschaften | ||
| color | = | inherit/ color | Farbvorgabe | |
| Formen | ||||
|---|---|---|---|---|
| line | ||||
| x1, y1 | = | measure | Startpunkt | |
| x2, y2 | = | measure | Endpunkt | |
| rect | ||||
| width | = | measure | Breite | |
| height | = | measure | Höhe | |
| x, y | = | measure | Position | |
| rx, ry | = | measure | Eckenradius | |
| circle | ||||
| cx, cy | = | measure | Mittelpunkt | |
| r | = | measure | Radius | |
| ellipse | ||||
| cx, cy | = | measure | Mittelpunkt | |
| rx, ry | = | measure | Radius | |
| text | ||||
| x, y | = | numberlist | Absolute Position einzelner Glyphen | |
| dx, dy | = | numberlist | Einzelne Glyphen um ihre Position tanzen lassen | |
| rotate | = | degrees | Einzelne Glyphen rotieren | |
| textLength | = | measure | ||
| lengthAdjust | = | FIXME | ||
| font-family | = | family | Schriftart | |
| font-size | = | size | Größe | |
| font-weight | = | weight | Gewichtung (fett) | |
| font-style | = | style | Stil (kursiv) | |
| font-variant | = | variant | Variante (Kapitälchen) | |
| font-stretch | = | stretch | ||
| font-size-adjust | = | none/ inherit/ number | ||
| unicode-bidi | = | unicode-bidi | ||
| direction | = | direction | ||
| writing-mode | = | inherit/ lr-tb/ lr/ rl-tb/ rl/ tb-rl/ tb | ||
| glyph-orientation-vertical | = | inherit/ auto/ degree | ||
| glyph-orientation-horizontal | = | inherit/ degree | ||
| text-anchor | = | inherit/ start/ end/ middle | ||
| dominant-baseline | = | inherit/ auto/ use-script/ no-change/ reset-size/ ideographic/ alphabetic/ hanging/ mathematical/ central/ middle/ text-after-edge/ text-before-edge | ||
| alignment-baseline | = | inherit/ auto/ baseline/ before-edge/ text-before-edge/ after-edge/ text-after-edge/ ideographic/ alphabetic/ hanging/ mathematical/ central/ middle | ||
| baseline-shift | = | inherit/ baseline/ sub/ super/ measure | ||
| kerning | = | inherit/ auto/ measure | ||
| letter-spacing | = | inherit/ normal/ measure | ||
| word-spacing | = | inherit/ normal/ measure | ||
| text-decoration | = | text-decoration | ||
| Eigenschaften von Formen | ||||
| * | ||||
| fill | = | none/ inherit/ currentColor/ color / paintservice | Füllung der aufgespannten Fläche | |
| fill-rule | = | nonzero/ evenodd/ inherit | Verhalten bei mehreren oder überschneidenden Rändern | |
| fill-opacity | = | inherit/ opacity | Transparenz | |
| stroke | = | none/ inherit/ currentColor/ color / paintservice | Linienfarbe | |
| stroke-width | = | measure | Liniendicke | |
| stroke-opacity | = | opacity | Transparenz | |
| stroke-linecap | = | butt/ inherit/ round/ square | Linienenden | |
| stroke-linejoin | = | miter/ inherit/ round/ bevel | Linienverbindungen | |
| stroke-miterlimit | = | number = 4 / inherit | Grenze für Umschaltung auf bevel. | |
| stroke-dasharray | = | none/ inherit/ numberlist | Strichmuster | |
| stroke-dashoffset | = | measure | Versatz für das Strichmuster | |
| vector-effect | = | none/ inherit/ non-scaling-stroke | Strichstärken skalieren oder nicht | |
| display | = | none/ inherit/ inline/ block/ list- item/ run- in/ compact/ marker/ table/ inline-table/ table-row-group/ table-header-group/ table-footer-group/ table-row/ table-column-group/ table-column/ table-cell/ table-caption | Anzeigeeigenschaften | |
| visibility | = | visible/ inherit/ hidden/ collapse | Sichtbarkeit des Objekts | |
| opacity | = | inherit/ opacity | Transparenz des gesamten Objekts | |
| overflow | = | visible/ inherit/ hidden/ scroll/ auto | ||
| color-interpolation | = | inherit/ auto/ sRGB/ linearRGB | ||
| color-interpolation-filters | = | inherit/ auto/ sRGB/ linearRGB | ||
| color-rendering | = | inherit/ auto/ optimizeSpeed/ optimizeQuality | ||
| shape-rendering | = | inherit/ auto/ optimizeSpeed/ crispEdges/ geometricPrecision | ||
| text-rendering | = | inherit/ auto/ optimizeSpeed/ optimizeLegibility/ geometricPrecision | ||
| image-rendering | = | inherit/ auto/ optimizeSpeed/ optimizeQuality | ||
| buffered-rendering | = | inherit/ auto/ dynamic/ static | ||
| pointer-events | = | inherit/ none/ visiblePainted/ visibleFill/ visibleStroke/ visible/ painted/ fill/ stroke/ all/ boundingBox | ||
| cursor | = | inherit/ auto/ crosshair/ default/ pointer/ move/ e-resize/ w-resize/ n-resize/ s-resize/ ne-resize/ nw-resize/ se-resize/ sw-resize/ text/ wait/ help/ url-list | ||