English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
SVG Reference Manual collects common SVG elements, as well as the usage methods of element attributes, detailed usage parameters, and descriptive notes.
| Element | Description | Attribute |
|---|---|---|
| <a> | create a link around an SVG element | xlink:show xlink:actuate xlink:href target |
| <altGlyph> | allow object text to control, to present special character data | x y dx dy rotate glyphRef format xlink:href |
| <altGlyphDef> | define a series of symbolic character replacements | id |
| <altGlyphItem> | define a series of replacement symbolic characters | id |
| <animate> | property changes dynamically over time | attributeName="target attribute name" from="Start value" to="End value" dur="duration" repeatCount="The animation time will occur" |
| <animateColor> | Define color transformation over time | by="Relative offset value" from="Start value" to="End value" |
| <animateMotion> | Make the element move along the action path | calcMode="Interpolation mode of the animation. It can be'discrete',
'linear',39;paced',39;spline'" path="Motion path" keyPoints="How far along the motion path the object should move at the current time" rotate="Apply rotation transformation" xlink:href="URI that refers to a <path> element that defines the motion path" |
| <animateTransform> | Transform property of the previous target element in the animation, so that the animation can control translation, scaling, rotation, or skewing | by="Relative offset value" from="Start value" to="End value" type="Transformation type whose value changes over time. It can be 'translate',39;scale',39;rotate',39;skewX',39;skewY'" |
| <circle> | Define a circle | cx="X-axis coordinate of the circle" cy="Y-axis coordinate of the circle" r="Radius of the circle". Required. + Manifest properties: color, FillStroke, graphics |
| <clipPath> | Used to hide the part of the object that is outside the clip path. The mold that defines what to draw and what not to draw is called the clip path | clip-path="Reference to clip path and intersection of referenced clip path" clipPathUnits="userSpaceOnUse' or'objectBoundingBox". The second value, childern, defines the border of an object, which will use a small part of the mask unit (default: "userSpaceOnUse")" |
| <color-profile> | Specify the description of the color profile (when using CSS style sheets) | local="Unique ID of locally stored color profile" name="" rendering-intent="auto|perceptual|relative"-colorimetric|saturation|absolute-colorimetric" xlink:href="URI of ICC profile resource" |
| <cursor> | Define a custom cursor independent of the platform | x="Cursor's top-left corner on the x-axis (default is 0") y="Cursor's top-left corner on the y-axis (default is 0") xlink:href="URI of cursor image |
| <defs> | Referenced element container | |
| <desc> | Pure text description of elements in SVG - It is not displayed as part of the graphic. The user agent will display it as a tooltip | |
| <ellipse> | Define an ellipse | cx="x-axis coordinate of the ellipse" cy="y-axis coordinate of the ellipse" rx="Radius of the elliptical along the x-axis". Required. ry="Radius of the elliptical along the y-axis". Required. + Manifest properties: color, FillStroke, graphics |
| <feBlend> | Combine two objects together using different blending modes | mode="Image blending mode: normal|multiply|screen|darken|lighten" in="Identified as the given filter original input: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="Second input image mixing operation" |
| feColorMatrix | SVG filter. Applicable matrix transformation | |
| feComponentTransfer | SVG filter. Performs the component of data-wise remapping | |
| feComposite | SVG filter | |
| feConvolveMatrix | SVG filter | |
| feDiffuseLighting | SVG filter | |
| feDisplacementMap | SVG filter | |
| feDistantLight | SVG filter. Defines a light source | |
| feFlood | SVG filter | |
| feFuncA | SVG filter. Sub-element of feComponentTransfer | |
| feFuncB | SVG filter. Sub-element of feComponentTransfer | |
| feFuncG | SVG filter. Sub-element of feComponentTransfer | |
| feFuncR | SVG filter. Sub-element of feComponentTransfer | |
| feGaussianBlur | SVG filter. Performs Gaussian blur on the image | |
| feImage | SVG filter. | |
| feMerge | SVG filter. Based on top image layers | |
| feMergeNode | SVG filter. Sub-element of feMerge | |
| feMorphology | SVG filter. Performs 'fattening' or 'thinning' on the source graphic | |
| feOffset | SVG filter. Moves the image relative to its current position | |
| fePointLight | SVG filter | |
| feSpecularLighting | SVG filter | |
| feSpotLight | SVG filter | |
| feTile | SVG filter | |
| feTurbulence | SVG filter | |
| filter | Container for filter effects | |
| font | Define a font | |
| font-face | Describe the characteristics of a font | |
| font-face-format | ||
| font-face-name | ||
| font-face-src | ||
| font-face-uri | ||
| foreignObject | ||
| <g> | The container element used to combine related elements | id="The name of the group" fill="The fill color of the group" opacity="The opacity of the group" + Visible Attributes: All |
| glyph | Define the graphics for the given pictographic symbol | |
| glyphRef | Define the possible pictographic symbols to be used | |
| hkern | ||
| <image> | Define an image | x="The x-axis coordinate of the top left corner of the image" y="The y-axis coordinate of the top left corner of the image" width="The width of the image". Must. height="The height of the image". Must. xlink:href="The path of the image". Must. + Visible Attributes: Color, Graphics, Images, Viewports |
| <line> | Define a line | x1="The x coordinate of the starting point of the line" y1="The y coordinate of the starting point of the line" x2="The x coordinate of the end point of the line" y2="The y coordinate of the end point of the line" + Visible Attributes: Color, FillStroke, Graphics, Markers |
| <linearGradient> | Define a linear gradient. By using vector linear gradient to fill the object, and it can be defined as horizontal, vertical, or angular gradient. | id="The id attribute can define a unique name for the gradient. The reference must" gradientUnits="#39;userSpaceOnUse"39; or 'objectBoundingBox"39;Use the viewport or object to determine the relative position vector point. (Default is39;objectBoundingBox" gradientTransform="Transformation applied to the gradient" x1="The starting point of the gradient vector x (default 0%)" y1="The starting point of the gradient vector y (default 0%)" x2="The end point of the gradient vector x. (Default100％）" y2="The end point of the gradient vector y. (Default 0%)" spreadMethod="#39;pad#39; or 'reflect#39; or 'repeat#39;" xlink:href="reference to another gradient whose attribute values are used as defaults and stops included. Recursive |
| <marker> | The mark can be placed at the vertices of lines, curves, polygons, and paths. These elements can use the "marker" attribute to-"start", "marker-"mid" and "marker-end", inherits the default or can be set to "none" or the URI of the defined mark. You must define the mark first, and then you can refer to it by its URI. Any shape, you can put the mark inside. They attach it to the top when they draw elements | markerUnits="strokeWidth39; or'userSpaceOnUse". If it is "strokeWidth", then a unit is equal to the width of a stroke. Otherwise, the mark scale will not use the same view unit as the reference element (default is39;strokeWidth39;) refx="marking the position of vertex connection (default is 0)" refy="The position where the marker vertex connects (default is 0)" orient="'auto'Always display the angle of the marker. "auto" will calculate an angle so that the tangent value of the X-axis vertex (default is 0) markerWidth="The width of the marker (default3)" markerHeight="The height of the marker (default3)" viewBox="The points" to see "this SVG drawing area. The values are separated by spaces or commas4value.(min x, min y, width, height)" + presentation attributes: All |
| <mask> | Degree masking is a combination of opacity values and clipping. Like clipping, you can use graphics, text, or paths to define the part of the mask. The default state of a mask is completely transparent, that is, opposite to the clip plane. In the mask's graphic settings, mask the opaque part | maskUnits="'userSpaceOnUse"39; or 'objectBoundingBox"39;. Set whether the clip plane is relative to the entire viewport or object (default:'objectBoundingBox"39;) maskContentUnits="The second mask relative to the graphical position of the object uses percentages'userSpaceOnUse"39; or'objectBoundingBox"39;(default:'userSpaceOnUse"39;) x="The clip plane mask (default value:-10％) y="The clip plane mask (default value:-10％) width="The clip plane mask (default is:120％）" height="The clip plane mask (default is:120％）" |
| metadata | Specify metadata | |
| missing-glyph | ||
| mpath | ||
| <path> | Define a path | d="Define path commands" pathLength="If present, the path will be scaled so that the path length corresponding to this value is calculated" transform="Transformation list" + Visible Attributes: Color, FillStroke, Graphics, Markers |
| <pattern> | Define the coordinates, the view you want to display and the size of the view. Then add it to your pattern shape. When the pattern hits, the edges of the viewbox are repeated (visible range) | id="A unique ID used to refer to this pattern. Required." patternUnits="userSpaceOnUse' or'objectBoundingBox". The second value X, Y, width, height, one will use a small part of the border of the pattern object, unit (％)." patternContentUnits="'userSpaceOnUse"39; or 'objectBoundingBox"39;" patternTransform="Allows the entire expression to be transformed" x="The offset of the pattern, from the top left corner (default is 0" y="The offset of the pattern, from the top left corner (default is 0" width="The width of the pattern tiling (default is100％）" height="The height of the pattern tiling (default is100％）" viewBox="The points" to see "this SVG drawing area. The values are separated by spaces or commas4value.(min x, min y, width, height)" xlink:href="Another pattern, whose attribute values are defaults and any subclass can inherit. Recursive" |
| <polygon> | Define a figure containing at least three sides | points="The points of the polygon. The total number of points must be even." fill-rule="Part of the FillStroke demonstration attribute" + Visible Attributes: Color, FillStroke, Graphics, Markers |
| <polyline> | Define an arbitrary shape consisting only of straight lines | points="The points on the line. The total number of points must be even." + Visible Attributes: Color, FillStroke, Graphics, Markers |
| <radialGradient> | Define a radial gradient. A radial gradient creates a circle | gradientUnits="#39;userSpaceOnUse"39; or 'objectBoundingBox"39. Use the viewport or object to determine the vector points of relative position. (Default is39;objectBoundingBox" gradientTransform="Transformation applied to the gradient" cx="The center point of the gradient (numeric or %" - 50% is the default" cy="The center point of the gradient. (Default50％）" r="The radius of the gradient. (Default50％）" fx="The focus of the gradient. (Default 0%)" fy="The focus of the gradient. (Default 0%)" spreadMethod="#39;pad#39; or 'reflect#39; or 'repeat#39;" xlink:href="Reference to another gradient, whose attribute values are used as defaults. Recursive" |
| <rect> | Define a rectangle | x="The x-axis of the top left corner of the rectangle" y="The y-axis of the top left corner of the rectangle" rx="The radius of the x-axis (round element" ry="The radius of the y-axis (round element" width="The width of the rectangle. Required." height="The height of the rectangle. Required." + Visible Attributes: Color, FillStroke, Graphics |
| script | Script container (e.g., ECMAScript) | |
| set | Set an attribute value to specify the time | |
| <stop> | Gradient stop | offset="Offset of the gradient stop (from 0 to1/0% to100%)
. Reference stop-color="The color of this stop" stop-opacity="The opacity of this Stop (from 0 to1)" |
| style | Can directly embed the style sheet inside the SVG content | |
| <svg> | Create an SVG document fragment | x="Embedding at the top left (default is 0" y="Embedding at the top left (default is 0" width="The width of the SVG fragment (default is100％）" height="The height of the SVG fragment (default}}100％）" viewBox="The SVG drawing area seen at point. Comma-separated or space-separated"4values. (min x, min y, width, height)" preserveAspectRatio="&39;none&39; or any &39;xVALYVAL'9combination, VAL is "min", "mid", or "max". (Default none) zoomAndPan="'magnify' or 'disable'.Magnify option allows users to pan and zoom your file (default Magnify )" xml="The outermost <svg> element needs to install SVG and its namespace: xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"" + Visible Attributes: All |
| switch | ||
| symbol | ||
| <text> | Define a text | x="The X-axis position of the list" -axis position. In the text, the position of the nth character is at the nth x-axis. If there are additional characters, they are placed after the last character. 0 is the default" y="The Y-axis position of the list. (Refer to x) 0 is the default" dx="The absolute position relative to the last drawn symbol in the character length list. (Refer to x)" dy="The absolute position relative to the last drawn symbol in the character length list. (Refer to x)" rotate="A list of rotations. The nth rotation is the nth character. Additional characters do not have a final rotation value" textLength="SVG viewer will attempt to display the spacing between text"/or glyph adjustment text target length. (Default: the length of normal text)" lengthAdjust="Informs the viewer to attempt adjustment for the specified length to display the text. These values are &39;spacing' and 'spacingAndGlyphs'" + Visible Attributes: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
| textPath | ||
| title | Pure text description of elements in SVG - It is not displayed as part of the graphic. The user agent will display it as a tooltip | |
| <tref> | Refer to and reuse any <text> element in any SVG document | The same <TEXT> element |
| <tspan> | The element is identical to <text>, but text marks and internal text can be nested inside | Identical to the <text> element + In addition: xlink:href="Reference a <TEXT> Element" |
| <use> | Use URI to reference a <G>, <svg> or any element with a unique ID attribute and duplicated graphical elements. The copy is the original element, so the original in the file is just for reference. Any change to the original affects all copies. | x="X-axis of Top Left Corner of Clone Element" y="Y-axis of Top Left Corner of Clone Element" width="Width of Clone Element" height="Height of Clone Element" xlink:href="URI Reference to Clone Element" + Visible Attributes: All |
| view | ||
| vkern |