SVG reference manual
SVG element
element |
Description |
Attribute |
|---|---|---|
<a> |
Create a link around a SVG element |
Xlink:show xlink:actuate xlink:href target |
<altGlyph> |
Allows control of object text to render special character data |
X y dx dy rotate glyphRef format xlink:href |
<altGlyphDef> |
Define the substitution of a series of iconic symbols |
Id |
<altGlyphItem> |
Define the replacement of a series of candidate iconic symbols |
Id |
<animate> |
Dynamically change attributes over time |
AttributeName= “Target attribute name” from= “start value” to= “end value” dur= “duration” repeatCount= “Animation time will occur” |
<animateColor> |
Define color conversion over time |
By= “relative offset value” from= “start value” to= “end value” |
<animateMotion> |
Move the element along the action path |
CalcMode= “interpolation mode of animation. It can be ‘discrete’,’ linear’,’paced’,’ spline’” path= “Motion path” keyPoints= “how far should the object along the motion path move in the current time” rotate= “applies a rotation transformation” xlink:href= “a URI reference < path > element, which defines the motion path” |
< animateTransform > |
A target element on the animation transforms attributes so that the animation controls translation, scaling, rotation, or tilt |
By= “relative offset value” from= “start value” to= “end value” conversion of type “type=” its value changes over time. It can be ‘translate’,’ scale’, ‘rotate’,’ skewX’, ‘skewY’ “ |
<circle> |
Define a circle |
Cx= “x-axis coordinates of the circle” cy= “y-axis coordinates of the circle” r = “radius of the circle”. It is necessary.
|
<clipPath> |
Lets you hide parts of the object that are outside the clipping path. A moldthat defines what to draw and what not to draw is called a cutting path. |
Clip-path= “reference clip path and reference clip path cross” clipPathUnits= “userSpaceOnUse’ or ‘objectBoundingBox”. The second value, childern, is the border of an object that uses a small portion of the mask (default: “userSpaceOnUse”) “ |
<color-profile> |
Specify a description of the color profile (when using CSS style files) |
Local= “Local Storage Color profile unique ID” name= “” rendering-intent= “auto |perceptual| Relative-colorimetric |saturation| Absolute-colorimetric “xlink:href=” ICC profile Resource URI “ |
<cursor> |
Define a custom cursor independent of the platform |
X = “upper left cursor of x axis (default is 0)” y = “cursor of upper left corner of y axis (default is 0)” xlink:href= “uses the cursor image URI |
<defs> |
Referenced element container |
|
<desc> |
A plain text description of the elements in SVG-not displayed as part of thegraph. The user agent displays it as a tooltip |
|
<ellipse> |
Define an ellipse |
Cx= “ellipse x-axis coordinates” cy= “ellipse y-axis coordinates” rx= “radius of the ellipse along the x-axis”. Necessary. Ry= “radius of a long oval along the y-axis”. Necessary.
|
<feBlend> |
Compositing two objects together using different blending modes |
Mode= “image mixing mode: normal |multiply| Screen |darken| Lighten “in=”is marked as the original input of the given filter: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | < filter-primitive-reference > “in2=” mixing operation of the second inputimage “ |
FeColorMatrix |
SVG filter. Applicable matrix transformation |
|
FeComponentTransfer |
SVG filter. Perform component-wise remapping of data |
|
FeComposite |
SVG filter |
|
FeConvolveMatrix |
SVG filter |
|
FeDiffuseLighting |
SVG filter |
|
FeDisplacementMap |
SVG filter |
|
FeDistantLight |
SVG filter. Define a light source |
|
FeFlood |
SVG filter |
|
FeFuncA |
SVG filter. Child elements of feComponentTransfer |
|
FeFuncB |
SVG filter. Child elements of feComponentTransfer |
|
FeFuncG |
SVG filter. Child elements of feComponentTransfer |
|
FeFuncR |
SVG filter. Child elements of feComponentTransfer |
|
FeGaussianBlur |
SVG filter. Perform Gaussian blur image |
|
FeImage |
SVG filter. |
|
FeMerge |
SVG filter. Build an image layer on top of each other |
|
FeMergeNode |
SVG filter. Child elements of feMerge |
|
FeMorphology |
SVG filter. Execute “fattening” or “thinning” on the source drawing |
|
FeOffset |
SVG filter. Move 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 effect |
|
Font |
Define font |
|
Font-face |
Describe the characteristics of a font |
|
Font-face-format |
||
Font-face-name |
||
Font-face-src |
||
Font-face-uri |
||
ForeignObject |
||
<g> |
Container elements used to combine related elements |
Id= “name of the group” fill= “the group fill color” opacity= “the group opacity”
|
Glyph |
Define a graphic for a given pictographic symbol |
|
GlyphRef |
Define possible hieroglyphs to use |
|
Hkern |
||
<image> |
Define Ima |
X = “x-axis coordinates of the upper-left corner of the image” y = “the y-axis coordinates of the upper-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.
|
<line> |
Define a line |
X1 = “straight line starting point x coordinate” y1 = “straight line starting point y coordinate” x2 = “straight line end point x coordinate” y2 = “straight line end point y coordinate”
|
<linearGradient> |
Defines a linear gradient. Fill objects with vector linear gradients and canbe defined as horizontal, vertical, or angular gradients. |
The id= “id property defines a unique name for the ramp. Reference must be “gradientUnits=” ‘userSpaceOnUse’ or’ objectBoundingBox’. Use a view box or object to determine the relative position vector point. (default is’ objectBoundingBox) “gradientTransform=” applies to the transition of the gradient “x1 =” gradient vector x startup point (default 0%) “y1 =” gradient vector y startup point (default 0%) “x2 =” end point of gradient vector x. (default 100%) “y2 =” the end of the gradient vector y. (default0%) “spreadMethod=” ‘pad’ or’ reflect’ or ‘repeat’ “ |
<marker> |
Tags can be placed on vertices of lines, broken lines, polygons and paths. These elements can use the “marker-start”, “marker-mid” and “marker-end” of the marker attribute to inherit the URI of the tag that can be set to “none” or defined by default. You must define a tag before you can reference it through its URI. Any shape, you can put the mark in it. When they draw elements, they attach them to the top. |
MarkerUnits= “strokeWidth’” or “userSpaceOnUse”. If it is strokeWidth, then one unit equals one stroke width. Otherwise, the tag scale does not use the same view unit as the reference element (default is’ strokeWidth’’) “refx=” marks the position of the vertex connection (default is 0) “refy=” marks the position of the vertex connection (default is 0) “orient=” ‘auto’ always shows the angle of the mark. “auto” calculates an angle such that the tangent of a vertex on the X axis (default is 0) the width of the “markerWidth=” marker (default 3) the height of the “markerHeight=” marker (default 3) the “viewBox=” points “see” this SVG drawing area. Four values separated by spaces or commas. (min x, min y, width, height) “
|
<mask> |
Degree shielding is a combination and clipping of opacity values. Like cropping, you can use graphics, text, or paths to define parts of the mask. The default state of a mask is completely transparent, that is, the oppositeside of the clipping plane. Set the opaque part of the mask in the graphicsof the mask |
MaskUnits= “‘userSpaceOnUse’ or’ objectBoundingBox’. Sets whether the crop face is a relatively complete window or object (default: ‘objectBoundingBox’) the second mask of “maskContentUnits=” uses the percentage’ userSpaceOnUse’ or ‘objectBoundingBox’ (default:’ userSpaceOnUse’) “x =” crop face mask (default:-10%) “y =” crop face mask (default:-10%) “width=” crop face mask (default: 120%) “height=” crop face mask (default: 120%) “ |
Metadata |
Specify metadata |
|
Missing-glyph |
||
Mpath |
||
<path> |
Define a path |
D = “define path instruction” pathLength= “if present, the path will be scaled to calculate the path length” transform= “conversion list” for each point equivalent to this value.
|
<pattern> |
Define the coordinates, the view display you want, and the size of the view.Then add to your pattern shape. Repeat the edge of the view box (visual range) when the mode is hit |
Id= “the only ID used to reference this pattern.” Necessary. PatternUnits=”userSpaceOnUse’” or “objectBoundingBox”. The second value, XGravity Y widthdepartment height, is a small portion of the border of the schema object, in%. “ PatternContentUnits= “‘userSpaceOnUse’ or’ objectBoundingBox’” patternTransform= “allows the entire expression to convert the offset of” x = “mode from the upper left corner (default is 0)the offset of” y = “mode from the upper left corner (default is 0) the width of” width= “mode tile (default is 100%), the height of” height= “mode tile (default is 100%) and the” viewBox= “points” see “this SVG drawing area. Four values separated by spaces or commas. (min x, min y, width, height) another mode of “xlink:href=” whose attribute values are default values and can be inherited by any subclass. Recursive “ |
<polygon> |
Define a graphic that contains at least three sides |
Points= “points of polygons. The total number of points must be even”. Necessary. Fill-rule= “part of the FillStroke presentation properties”
|
<polyline> |
Define any shape made up of only straight lines |
The “dot” on the broken line of points=. Necessary.
|
<radialGradient> |
Defines a radioactive gradient. A radioactive gradient creates a circle |
GradientUnits= “‘userSpaceOnUse’ or’ objectBoundingBox’. Use a view box or object to determine the vector point of the relative position. (default is’ objectBoundingBox’) “gradientTransform=” applies to the transformation of the gradient the center point of the “cx=” gradient (the number or%-50% isthe default) the center point of the “cy=” gradient. (default 50%) the radius of the “r =” gradient. (default 50%) the focus of the “fx=” gradient. (default 0%) the focus of the “fy=” gradient. (default 0%) “spreadMethod=” ‘pad’ or’ reflect’ or ‘repeat’ “xlink:href=” refers to another ramp with its attribute value as the default value. Recursive “ |
<rect> |
Define a rectangle |
X = “x axis of the upper left corner of the rectangle” y = “radius of they axis of the rectangle” rx= “x axis (round element)” ry= “radius of the y axis (round element)” width= “width of the rectangle”. Necessary. Height= “height of rectangle”. Necessary.
|
Script |
Script container. (for example, ECMAScript) |
|
set |
Set a property value to specify the time |
|
<stop> |
Gradual change stop |
Offset= “offset stops (0 to 1, 0 to 100).” Refer to stop-color= “the color of this stop” stop-opacity= “the opacity of this Stop (0 to 1)” |
Style |
You can embed stylesheets directly into SVG content |
|
<svg> |
Create an SVG document fragment |
X = “upper left embed (default is 0)” y = “upper left embedded (default is 0) width of” width= “SVG clip (default is 100%) height of” height= “SVG clip (default is 100%)” viewBox= “point” seen “in the SVG drawing area. Four values separated by spaces or commas. (min x, min y, width, height) 9 combinations of “preserveAspectRatio=”, “none’” or any ‘xVALYVAL’, where VAL is “min”, “mid” or “max”. (none by default) the “zoomAndPan=” ‘magnify’ or’ disable’.Magnify option allows users to pan and zoom your file (default Magnify) “
|
Switch |
||
Symbol |
||
<text> |
Define a text |
X = “the position of the X-axis of the list. The position of the nth character in the text is on the nth x axis. If there are extra characters behind, the position where they are placed after running out of the last character. 0 is the Y axis position of the default “y =” list. (reference x) 0 is the absolute position where the default “dx=” moves in the list ofcharacter lengths relative to the last glyph drawn. (reference x) “dy=” moves the absolute position relative to the last drawn glyph in the list of character lengths. (reference x) “rotate=” is a rotated list. The nth rotation is the nth character. The additional character does not give the final rotation value “textLength=” the SVG viewer will try to display the spacing between the text / or the text target length of the font adjustment.(default: length of normal text) “lengthAdjust=” tells the viewer to try to adjust to render the text if the length is specified. These two values are ‘spacing’’ and ‘spacingAndGlyphs’’
|
TextPath |
||
Title |
A plain text description of the elements in SVG-not displayed as part of thegraph. The user agent displays it as a tooltip |
|
<tref> |
Reference <text> elements and reuse in any SVG document |
Same <TEXT> element |
<tspan> |
Element is equivalent to <text>, but you can nest text tags inside as wellas inside itself |
Identical to the < text > element |
<use> |
Use URI to reference a < G >, < svg >, or other graphic element with a unique ID attribute and repetition. The original elements are copied, so theoriginal existence in the file is just a reference. Any changes that the original affects all copies. |
X = “x axis of the upper left corner of the clone element” y = “y axis ofthe upper left corner of the clone element” width= “width of the clone element” height= “height of the clone element” xlink:href= “URI reference clone element”
|
View |
||
Vkern |