SVG-Referenz
SVG-Zeichnungen und Bilder werden mit verschiedenen Elementen erstellt. Hier finden Sie eine Tabelle der SVG-Elemente mit den entsprechenden Beschreibungen und Attributen.
SVG-Elemente
| Element | Beschreibung | Attributes |
|---|---|---|
<a> | Erstellt einen Link zu anderen Webseiten, Dateien, E-Mail-Adressen, Positionen auf derselben Seite oder einer anderen URL. | href target |
<altGlyph> | Steuert die Glyphen, die zum Rendern bestimmter Zeichendaten verwendet werden. In SVG 2 veraltet. | x y dx dy rotate glyphRef format href |
<altGlyphDef> | Gibt einen Ersetzungssatz für Glyphen an. In SVG 2 veraltet. | id |
<altGlyphItem> | Gibt einen Kandidatensatz für Glyphenersetzungen an. In SVG 2 veraltet. | id |
<animate> | Gibt an, wie sich ein Attribut eines Elements im Laufe der Zeit ändert. | attributeName="the name of the target attribute" by="a relative offset value" from="the starting value" to="the ending value" dur="the duration" repeatCount="the number of times the animation will take place" |
<animateMotion> | Lässt ein referenziertes Element entlang eines Bewegungspfads wandern. | calcMode="interpolation mode for the animation. Can be 'discrete', 'linear', 'paced', 'spline'" path="motion path" keyPoints="how far the object will move along the motion path for each keyTimes values" rotate="rotation transformation" href = URI reference to the <path> element specifying the motion path |
<animateTransform> | Animiert ein Transformationsattribut am Zielelement und ermöglicht so Animationen für Verschiebung, Drehung, Skalierung und/oder Scherung. | by="relative offset value" from="starting value" to="ending value" type="transformation type which is to have its values change in time. Can be 'translate', 'scale', 'rotate', 'skewX', 'skewY'" |
<circle> | Gibt einen Kreis an. | cx="x-axis center of the circle" cy="y-axis center of the circle" r="radius of the circle". Required. presentation attributes: Color, FillStroke, Graphics |
<clipPath> | Gibt einen Clipping-Pfad an. | clipPathUnits="'userSpaceOnUse' or 'objectBoundingBox'. default: 'userSpaceOnUse' |
<color-profile> | Gibt eine Beschreibung des für das Bild verwendeten Farbprofils an. | local="unique ID for a color profile stored locally" name="" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" href = URI of an ICC profile resource |
<cursor> | Gibt einen plattformunabhängigen benutzerdefinierten Cursor an. In SVG 2 veraltet. | x="x-axis top-left corner of the cursor (default is 0)" y="y-axis top-left corner of the cursor (default is 0)" href = URI of the image to use as the cursor |
<defs> | Speichert grafische Objekte, die später verwendet werden. | |
<desc> | Liefert eine rein textuelle Beschreibung für jedes SVG-Grafikelement oder Containerelement. | |
<ellipse> | Gibt eine Ellipse an. | cx="x-axis center of the ellipse" cy="y-axis center of the ellipse" rx="length of the ellipse's radius along the x-axis". Required. ry="length of the ellipse's radius along the y-axis". Required. presentation attributes: Color, FillStroke, Graphics |
<feBlend> | Mischt zwei Objekte miteinander. | mode="image blending modes normal|multiply|screen|darken|lighten" in="identifies input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="the second input image to the blending operation" |
<feColorMatrix> | SVG-Filterprimitive. | in type="matrix|saturate|hueRotate|luminanceToAlpha" values result |
<feComposite> | SVG-Filterprimitive. | in="identifies the first input image" in2="identifies the second input image" operator="over|in|out|atop|xor|arithmetic" k1="arithmetic coefficient" k2="arithmetic coefficient" k3="arithmetic coefficient" k4="arithmetic coefficient" result |
<feConvolveMatrix> | SVG-Filterprimitive. | in="identifies the input image" order="number of columns and rows in the kernel matrix" kernelMatrix="list of kernel values" divisor="divisor for the kernel values" bias="bias value" targetX="x position of the convolution matrix" targetY="y position of the convolution matrix" edgeMode="duplicate|wrap|none" kernelUnitLength="length of the kernel" preserveAlpha="true|false" result |
<feDiffuseLighting> | SVG-Filterprimitive. | in="identifies the input image" surfaceScale="surface scale factor" diffuseConstant="diffuse reflection constant" kernelUnitLength="length of the kernel" result |
<feDisplacementMap> | SVG-Filterprimitive. | in="identifies the first input image" in2="identifies the second input image" scale="scale factor" xChannelSelector="R|G|B|A" yChannelSelector="R|G|B|A" result |
<feDistantLight> | SVG-Filterprimitive. | azimuth="azimuth angle" elevation="elevation angle" |
<feFlood> | SVG-Filterprimitive. | flood-color="flood color" flood-opacity="flood opacity" result |
<feFuncA> | SVG-Filter. Unterelement von feComponentTransfer. | |
<feFuncB> | SVG-Filter. Unterelement von feComponentTransfer. | |
<feFuncG> | SVG-Filter. Unterelement von feComponentTransfer. | |
<feFuncR> | SVG-Filter. Unterelement von feComponentTransfer. | |
<feGaussianBlur> | SVG-Filter. Erzeugt eine Gaußsche Unschärfe auf dem Bild. | in="identifies the input image" stdDeviation="standard deviation for the blur" edgeMode="duplicate|wrap|none" result |
<feImage> | SVG-Filter. | href = URI reference to the image preserveAspectRatio="'none' or any of the 9 combinations of 'xVALYVAL'" result |
<feMerge> | SVG-Filter. Erzeugt Bildebenen. | result |
<feMergeNode> | SVG-Filter. Unterelement von feMerge. | in="identifies the input image" |
<feMorphology> | SVG-Filter. Führt ein „Ausdünnen“ oder „Verdicken“ aus. | in="identifies the input image" operator="erode|dilate" radius="radius of the effect" result |
<feOffset> | SVG-Filter. Versetzt das Eingabebild. | in="identifies the input image" dx="horizontal offset" dy="vertical offset" result |
<fePointLight> | SVG-Filter. | x="x position of the light source" y="y position of the light source" z="z position of the light source" |
<feSpecularLighting> | SVG-Filter. | in="identifies the input image" surfaceScale="surface scale factor" specularConstant="specular reflection constant" specularExponent="specular exponent" kernelUnitLength="length of the kernel" result |
<feSpotLight> | SVG-Filter. | x="x position of the light source" y="y position of the light source" z="z position of the light source" pointsAtX="x coordinate of the point at which the light points" pointsAtY="y coordinate of the point at which the light points" pointsAtZ="z coordinate of the point at which the light points" specularExponent="specular exponent" limitingConeAngle="limiting cone angle" |
<feTile> | SVG-Filter. | in="identifies the input image" result |
<feTurbulence> | SVG-Filter. | baseFrequency="base frequency" numOctaves="number of octaves" seed="seed value" stitchTiles="stitch|noStitch" type="fractalNoise|turbulence" result |
<filter> | Gibt einen benutzerdefinierten Filtereffekt an. | |
<font> | Gibt eine Schriftart an. In SVG 2 veraltet. | |
<font-face> | Beschreibt die Eigenschaften einer Schriftart. In SVG 2 veraltet. | |
<font-face-format> | Gibt den vom übergeordneten <font-face-uri> referenzierten Schriftarttyp an. | |
<font-face-name> | Verweist auf eine lokale Schriftart über ihren Namen. | |
<font-face-src> | Entspricht dem src-Deskriptor innerhalb von CSS @font-face-Regeln. | |
<font-face-uri> | Gibt eine entfernte Definition der aktuellen Schriftart an. | |
<foreignObject> | Ermöglicht es Benutzeragenten, grafische Rendering-Funktionen zusätzlich zu den in der Spezifikation definierten anzubieten. | |
<g> | Gruppiert Elemente. | id="name of the group" fill="fill color for the group" opacity="opacity for the group" presentation attributes: All |
<glyph> | Gibt die Grafik für eine bestimmte Glyphe an. In SVG 2 veraltet. | |
<glyphRef> | Gibt eine mögliche zu verwendende Glyphe an. In SVG 2 veraltet. | |
<hkern> | Gibt Kerning-Paare und Anpassungswerte im horizontalen Vorschub an. In SVG 2 veraltet. | |
<image> | Gibt ein Bild an. | x="x-axis top-left corner of the image" y="y-axis top-left corner of the image" width="width of the image". Required. height="height of the image". Required. href = path to the image. Required. presentation attributes: Color, Graphics, Images, Viewports |
<line> | Gibt eine Linie an. | x1="x start point of the line" y1="y start point of the line" x2="x end point of the line" y2="y end point of the line" presentation attributes: Color, FillStroke, Graphics, Markers |
<linearGradient> | Gibt einen linearen Verlauf an, der das Objekt mithilfe eines Vektors füllt. | id="a unique id used to reference this pattern. Required to reference it" gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. (Default 'objectBoundingBox')" gradientTransform="the transformation to apply to the gradient" x1="x start point of the gradient vector (number or % - 0% is default)" y1="y start point of the gradient vector. (0% default)" x2="x end point of the gradient vector. (100% default)" y2="y end point of the gradient vector. (0% default)" spreadMethod="'pad' or 'reflect' or 'repeat'" href = reference to another gradient attribute values of which are used as defaults and stops included. Recursive |
<marker> | Gibt die Grafik an, die zum Zeichnen von Pfeilspitzen verwendet werden soll. Diese Elemente können die folgenden Marker-Attribute verwenden: „marker-start“, „marker-mid“ und „marker-end“. Definieren Sie den Marker, bevor Sie ihn über seine URI referenzieren. | markerUnits="'strokeWidth' or 'userSpaceOnUse'. If 'strokeWidth' is used, one unit is equal to one stroke width. Otherwise, the marker will not scale and will use the same view units as the referencing element (default 'strokeWidth')" refx="the position where the marker connects with the vertex (default 0)" refy="the position where the marker connects with the vertex (default 0)" orient="'auto' or an angle to always display the marker at. 'auto' will compute an angle making the x-axis a tangent of the vertex (default 'auto')" markerWidth="width of the marker (default 3)" markerHeight="height of the marker (default 3)" viewBox="SVG viewport’s bound for the current SVG fragment. 4 values are separated by white space or commas. (min x, min y, width, height)" presentation attributes: All |
<mask> | Gibt eine Alphamaske an, die eine Kombination aus Deckkraftwerten und Clipping ist. Maskierung ist eine Kombination aus Deckkraftwerten und Clipping. Sie können Text, Formen oder Pfade verwenden, um die Maskenbereiche zu definieren. Der Standardzustand der Maske ist vollständig transparent. Die Grafiken in einer Maske bestimmen, wie opak die Maskenbereiche sind. | maskUnits="'userSpaceOnUse' or 'objectBoundingBox'. Specifies the coordinate system for x, y, height, and width on the <mask>. (default: 'objectBoundingBox')" maskContentUnits="Specifies the coordinate system for the content of <mask>. 'userSpaceOnUse' or 'objectBoundingBox' (default: 'userSpaceOnUse')" x="clipping plane of the mask (default: -10%)" y="clipping plane of the mask (default: -10%)" width="clipping plane of the mask (default: 120%)" height="clipping plane of the mask (default: 120%)" |
<metadata> | Gibt Metadaten an. | |
<missing-glyph> | Gibt die Glyphe an, die verwendet wird, wenn ein Zeichen nicht angezeigt werden kann. | |
<mpath> | Verweist auf ein externes <path>-Element als Definition eines Bewegungspfads. | |
<path> | Gibt einen Pfad an. | d="a set of commands specifying the path" pathLength="the total length for the path" transform="a list of transformations" presentation attributes: Color, FillStroke, Graphics, Markers |
<pattern> | Gibt ein Grafikobjekt an, das in wiederholten Koordinatenabständen neu gezeichnet werden kann. | id="unique id used for referencing this pattern." Required. patternUnits="'userSpaceOnUse' or 'objectBoundingBox'. The second value makes units of x, y, height, width a fraction (or %) of the object bounding box that uses the pattern." patternContentUnits="'userSpaceOnUse' or 'objectBoundingBox'" patternTransform="the whole pattern can be transformed" x="pattern's offset from the top-left corner (default 0)" y="pattern's offset from the top-left corner. (default 0)" width="width of the pattern tile (default 100%)" height="height of the pattern tile (default 100%)" viewBox="the points "seen" in this SVG drawing area. 4 values are separated by white space or commas. (min x, min y, width, height)" href = reference to another pattern attribute values of which are used as defaults and any children are inherited. Recursive |
<polygon> | Gibt eine Grafik an, die mindestens drei Punkte enthält. | points="the points of the polygon. At least three points are required." fill-rule="part of the FillStroke presentation attributes" presentation attributes: Color, FillStroke, Graphics, Markers |
<polyline> | Gibt jede Form an, die nur aus geraden Linien besteht. | points="the points on the polyline". Required. presentation attributes: Color, FillStroke, Graphics, Markers |
<radialGradient> | Gibt einen radialen Verlauf an. | gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. (Default 'objectBoundingBox')" gradientTransform="transformation to apply to the gradient" cx="center point of the gradient (number or % - 50% is default)" cy="center point of the gradient. (50% default)" r="radius of the gradient. (50% default)" fx="focus point of the gradient. (0% default)" fy="focus point of the gradient. (0% default)" spreadMethod="'pad' or 'reflect' or 'repeat'" href = Reference to another gradient attribute values of which are used as defaults and stops included. Recursive |
<rect> | Gibt ein Rechteck an. | x="x-axis top-left corner of the rectangle" y="y-axis top-left corner of the rectangle" rx="x-axis radius (to round the element)" ry="y-axis radius (to round the element)" width="width of the rectangle". Required. height="height of the rectangle" Required. presentation attributes: Color, FillStroke, Graphics |
<script> | Fügt Skripte zu einem SVG-Dokument hinzu. | |
<set> | Setzt den Wert eines Attributs für eine bestimmte Dauer. | |
<stop> | Gibt eine Farbe und ihre Position an, die auf einem Verlauf verwendet werden soll. | offset="offset for this stop (0 to 1/0% to 100%)". Required. stop-color="color of this stop" stop-opacity="opacity of this stop (0 to 1)" |
<style> | Ermöglicht das Einbetten von Stylesheets in SVG-Inhalte. | |
<svg> | Erstellt einen Ausschnitt eines SVG-Dokuments. | x="top left corner when embedded (default 0)" y="top left corner when embedded (default 0)" width="width of the svg fragment (default 100%)" height="height of the svg fragment (default 100%)" viewBox="the points "seen" in this SVG drawing area. 4 values are separated by white space or commas. (min x, min y, width, height)" preserveAspectRatio="'none' or any of the 9 combinations of 'xVALYVAL' where VAL is 'min', 'mid' or 'max'. (default xMidYMid)" zoomAndPan="'magnify' or 'disable'. (default magnify)" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" presentation attributes: All |
<switch> | Ermöglicht die Anzeige verschiedener Formen abhängig von der verwendeten Sprache durch den SVG-Viewer. | |
<symbol> | Gibt die wiederverwendbaren Symbole an. | |
<text> | Gibt einen Text an. | x="a list of x-axis positions. The nth x-axis position is given to the nth character in the text. When there are additional characters after the positions run out they are placed after the last character. 0 is default" y="a list of y-axis positions. (see x). 0 is default" dx="a list of lengths that moves the characters relative to the absolute position of the last glyph drawn. (see x)" dy="a list of lengths that moves the characters relative to the absolute position of the last glyph drawn. (see x)" rotate="a list of rotations. The nth rotation is performed on the nth character." textLength="a target length for the text that the SVG viewer will try to display the text between by adjusting the spacing and/or the glyphs. (default: The text's normal length)" lengthAdjust="tells the viewer what to adjust to accomplish rendering the text if the length is specified. The two values are 'spacing' and 'spacingAndGlyphs'" presentation attributes: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
<textPath> | Verweist auf ein <text>-Element und positioniert Text entlang eines Pfads. | |
<title> | Beschreibung für Elemente eines SVG-Container- oder Grafikelements. | |
<tref> | Verweist auf ein <text>-Element im SVG-Dokument. In SVG 2 veraltet. | href = URI reference to the referenced text content |
<tspan> | Gibt einen Untertext innerhalb eines anderen <tspan>-Elements oder eines <text>-Elements an. | Identical to the <text> element and in addition: href = Reference to a <text> element |
<use> | Verwendet eine URI, um auf ein <svg>-, <g>- oder anderes grafisches Element mit einem eindeutigen id-Attribut zu verweisen und es zu duplizieren. | x="x-axis top-left corner of the cloned element" y="y-axis top-left corner of the cloned element" width="width of the cloned element" height="height of the cloned element" href = URI reference to the cloned element presentation attributes: All |
<view> | Dies ist eine Möglichkeit, das Bild anzuzeigen. | |
<vkern> | Gibt Kerning-Paare für vertikal ausgerichtete Glyphenpaare an. In SVG 2 veraltet. |
Practice
What are some of the features that can be included in SVGs while coding in HTML?