SVG Reference Manual
SVG element
| element | Explanation | Attributes |
|---|---|---|
| <a> | Create a link around SVG element | xlink: show xlink: actuate xlink: href target |
| <AltGlyph> | Allows an object of the text controls to render special character data | x y dx dy rotate glyphRef format xlink: href |
| <AltGlyphDef> | It is defined as a series of symbols to replace | id |
| <AltGlyphItem> | Replace the definition of a series of symbols like the candidate | id |
| <Animate> | Dynamically change properties over time | attributeName = "target attribute name" from = "start value" to = "End value" dur = "Duration" repeatCount = "time animation will occur." |
| <AnimateColor> | Over time, the definition of the color conversion | by = "Relative Offset value" from = "start value" to = "End value" |
| <AnimateMotion> | So that the element moves along the motion path | calcMode = "animation interpolation mode can be 'discrete', 'linear', 'paced', 'spline'" path = "path of movement" keyPoints = "along the path of movement of the object of the present time should be moved far." rotate = "apply a rotation transformation." xlink: href = "URI references a <path> element which defines the motion path." |
| <AnimateTransform> | Animation target element transform a property, making the animation control pan, zoom, rotate, or tilt | by = "Relative Offset value" from = "start value" to = "End value" type = "converted type whose value changes over time can be 'translate', 'scale', 'rotate', 'skewX', 'skewY'" |
| <Circle> | The definition of a circle | cx = "x-axis coordinate of the circle." cy = "y-axis coordinate of the circle." r = "radius of the circle." Required. + Show attributes: color, FillStroke, graphics |
| <ClipPath> | Used to hide objects located outside the clipping path portion. Drawing and what does not define what is called the drawing die clipping path | clip-path = "references and references clipping path clipping paths cross." clipPathUnits = "userSpaceOnUse 'or' objectBoundingBox". The second value childern border of an object, using a small portion of the mask unit (default: "userSpaceOnUse") " |
| <Color-profile> | Description specified color profile (when using CSS style file) | local = "color profile stored locally unique ID" name = "" rendering-intent = "auto | perceptual | relative-colorimetric | saturation | absolute-colorimetric" xlink: href = "ICC profile resource URI" |
| <Cursor> | Define a platform-independent custom cursor | x = "x-axis upper left corner of the cursor (the default is 0)." y = "y-axis of the upper left corner of the cursor (the default is 0)." xlink: href = "Use the cursor image URI |
| <Defs> | Container element reference | |
| <Desc> | Pure elements in SVG text description - not as part of the graphic to display. User agents may display as a tooltip | |
| <Ellipse> | The definition of an ellipse | cx = "oval x-axis coordinate" cy = "oval y-axis coordinate" rx = "along the x-axis of the ellipse radius." Required. ry = "oblong along the y axis radius." Required. + Show attributes: color, FillStroke, graphics |
| <FeBlend> | Using different blending modes to the synthesis of two objects together | mode = "image blending modes: normal | multiply | screen | darken | lighten" in = "identified as the given filter raw input: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2 = "second input image mixing operation." |
| feColorMatrix | SVG filter. Suitable matrix transformation | |
| feComponentTransfer | SVG filter. Execution data component-wise remapping | |
| feComposite | SVG Filters | |
| feConvolveMatrix | SVG Filters | |
| feDiffuseLighting | SVG Filters | |
| feDisplacementMap | SVG Filters | |
| feDistantLight | SVG filter. The definition of a light source | |
| feFlood | SVG Filters | |
| feFuncA | SVG filter. feComponentTransfer child elements | |
| feFuncB | SVG filter. feComponentTransfer child elements | |
| feFuncG | SVG filter. feComponentTransfer child elements | |
| feFuncR | SVG filter. feComponentTransfer child elements | |
| feGaussianBlur | SVG filter. Executive Gaussian blur image | |
| feImage | SVG filter. | |
| feMerge | SVG filter. Built on top of each other image layer | |
| feMergeNode | SVG filter. feMerge child elements | |
| feMorphology | SVG filter. The implementation of "fattening" or "thinning" the source Graphics | |
| feOffset | SVG filter. Relative to its current position of a moving image | |
| fePointLight | SVG Filters | |
| feSpecularLighting | SVG Filters | |
| feSpotLight | SVG Filters | |
| feTile | SVG Filters | |
| feTurbulence | SVG Filters | |
| filter | Container filter effects | |
| font | Custom fonts | |
| font-face | Describe the characteristics of a font | |
| font-face-format | ||
| font-face-name | ||
| font-face-src | ||
| font-face-uri | ||
| foreignObject | ||
| <G> | Container element for the combination of related elements | id = "name of the group." fill = "fill color of the group." opacity = "The group opacity" + Show properties: All |
| glyph | For a given hieroglyph custom graphics | |
| glyphRef | Pictograph definition may be used | |
| hkern | ||
| <Image> | Custom Image | x = "x-axis coordinate of the upper left corner of the image." y = "y-axis coordinate of the upper left corner of the image." width = "width of the image." must. height = "height of the image." must. xlink:. href = "image path" must. + Show properties: Color, Graphics, Images, Viewports |
| <Line> | Define a line | x1 = "x-coordinate of the starting point of a straight line." y1 = "y coordinates of the starting point of a straight line." x2 = "x-coordinate of the straight line end point." y2 = "y coordinate of the straight line end point." + Show properties: Color, FillStroke, Graphics, Markers |
| <LinearGradient> | Define a linear gradient. By using a linear gradient fill vector objects, and can be defined as horizontal, vertical or angle gradient. | id = "id attribute may define a unique name for the gradient. references must" gradientUnits = " 'userSpaceOnUse' or 'objectBoundingBox'. Use the view box or object to determine the relative position vector point. (default 'objectBoundingBox)" gradientTransform = "applies to change the gradient" x1 = "x gradient vector start point (default 0%)" y1 = "y gradient vector start point (default 0%)" x2 = "the end of the gradient vector x. (default 100%)" y2 = "the end of the gradient vector y. (default 0%)" spreadMethod = " 'pad' or 'reflect' or 'repeat'" xlink: href = "reference to another gradient whose attribute values are used as defaults and stops included Recursive." |
| <Marker> | Tag can be placed on the apex lines, polylines, polygons, and paths. These elements can be used maeker property "maeker-start", "maeker-mid" and "maeker-end", Inherit default, or can be set to URI "none" or defined tags. You must define the tag before it can be referenced by the URI. Any kind of shape, you can put tags on the inside. When they draw the elements to attach them to the top | markerUnits = "strokeWidth 'or' userSpaceOnUse". If strokeWidth "then the use of a unit is equal to the width of a stroke. Otherwise, do not use the same tag-scale view of the unit as a reference element (defaults to 'strokeWidth')" refx = "place marker vertex connections (the default is 0)." refy = "place marker vertex connections (the default is 0)." orient = " 'auto' always angle mark display." auto "will be calculated at an angle such that the X-axis of a vertex tangent (default is 0) markerWidth = "width marked (default 3)." markerHeight = "height marked (default 3)." viewBox = "points" seen "this SVG drawing area. 4 values separated by spaces or commas. (min x, min y, width, height)" + Presentation attributes: All |
| <Mask> | Shielding is a combination of a non-cutting and transparency values. Like cropping, you can use some graphics, text or path defined mask. The default state of a mask is completely transparent, that is the opposite of the clipping plane. In the opaque portion of the mask pattern settings mask | maskUnits = ". 'userSpaceOnUse' or 'objectBoundingBox' set whether clipping plane is relatively intact window or object (default: 'objectBoundingBox')" maskContentUnits = "second mask pattern relative object position using percentages 'userSpaceOnUse' or 'objectBoundingBox' (default: 'userSpaceOnUse')" x = "clipping plane mask (default: -10%)." y = "clipping plane mask (default: -10%)." width = "clipping plane mask (default: 120%)." height = "clipping plane mask (default: 120%)." |
| metadata | Specified meta data | |
| missing-glyph | ||
| mpath | ||
| <Path> | Define a path | d = "path-defined command" pathLength = "If there is, the path will be scaled in order to calculate the points value equivalent to the length of this path" transform = "Conversion List" + Show properties: Color, FillStroke, Graphics, Markers |
| <Pattern> | DET, size you want to view displays and views. Then add to your mode shape. This pattern is repeated hit the edge of the box view (visible range) | id = "unique ID used to reference this pattern." required. patternUnits = "userSpaceOnUse 'or' objectBoundingBox". The second value X, Y, width, height frame mode using a small portion of the object, the unit (%). " patternContentUnits = " 'userSpaceOnUse' or 'objectBoundingBox'" patternTransform = "allows the entire expression to convert" x = "offset mode, from the upper left corner (default is 0)." y = "offset mode, from the upper left corner (default is 0)." width = "pattern tile width (default is 100%)." height = "pattern tile height (default is 100%)." viewBox = "points" seen "this SVG drawing area. 4 values separated by spaces or commas. (min x, min y, width, height)" xlink: href = "Another model, the property value is the default and any subclass can inherit recursion." |
| <Polygon> | Defines a drawing contains at least three sides | points = "point of the polygon. The total number of points must be even." Required. fill-rule = "section FillStroke presentation attribute" + Show properties: Color, FillStroke, Graphics, Markers |
| <Polyline> | Define any shape only straight lines | polyline points = "point." Required. + Show properties: Color, FillStroke, Graphics, Markers |
| <RadialGradient> | Definition of radioactive gradual. Create a radial gradient circle | gradientUnits = " 'userSpaceOnUse' or 'objectBoundingBox'. Use the view box or object to determine the relative position of vector points. (The default is' objectBoundingBox)" gradientTransform = "applies to transform gradients" cx = "center point of the gradient (numbers or% - 50% is the default)." cy = "center point of the gradient. (default 50%)." r = "gradual radius. (default 50%)." fx = "focal point of the gradient. (default 0%)" fy = "focal point of the gradient. (default 0%)" spreadMethod = " 'pad' or 'reflect' or 'repeat'" xlink: href = "reference to another gradient whose property value as a default recursion." |
| <Rect> | Define a rectangle | x = "x-axis upper left corner of the rectangle." y = "y-axis of the upper left corner of the rectangle." rx = "Radius (Round element) x-axis." ry = "radius of the y-axis (Round element)" width = "width of the rectangle." Required. height = "height of the rectangle." Required. + Show properties: Color, FillStroke, Graphics |
| script | Script container. (Such as ECMAScript) | |
| set | Setting a property value for the specified time | |
| <Stop> | Gradient stop | offset = "Stop Offset (0-1 / 0% to 100%)." Reference stop-color = "color this stop" stop-opacity = "Stop the opacity of the (0-1)." |
| style | Style sheets can be embedded directly inside SVG content | |
| <Svg> | Create an SVG document fragment | x = "embedded in the upper left corner (default is 0)." y = "embedded in the upper left corner (default is 0)." width = "width SVG fragment (the default is 100%)." height = "height SVG fragment (the default is 100%)." viewBox = "points" seen "in this SVG drawing area. 4 values separated by spaces or commas. (min x, min y, width, height)" preserveAspectRatio = " 'none' or any 'xVALYVAL' nine combinations, VAL is" min "," mid "or" max ". (default none)" zoomAndPan = " 'magnify' or 'disable'.Magnify option allows users to pan and zoom your files (default Magnify)" xml = "outermost <svg> element and its need to install SVG namespace: xmlns =" http://www.w3.org/2000/svg "xmlns: xlink =" http: //www.w3. org / 1999 / xlink "xml: space =" preserve "" + Show properties: All |
| switch | ||
| symbol | ||
| <Text> | Define a text | x = "list of X -.. The position of the shaft in the text at the position of the first n characters of the n-th x-axis if there are extra characters behind, exhausted after the last character position they placed 0 is the default." y = "Y-axis position of the list. (refer to x) 0 is the default." dx = "move relative drawn last glyph in the length of the list of characters in the absolute position (refer to x)" dy = "move relative drawn last glyph in the length of the list of characters in the absolute position (refer to x)" rotate = "a rotating list of the n-th rotation of the first n characters. additional characters did not give a final spin value" textLength = "SVG Viewer will try to show the spacing between the text / font or adjust the length of the target text (default: normal length of the text)." lengthAdjust = "tells the viewer, if you try to specify the length adjusted to render the text. These two values are 'spacing' and 'spacingAndGlyphs'" + Show properties: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
| textPath | ||
| title | Pure elements in SVG text description - not as part of the graphic to display. User agents may display as a tooltip | |
| <Tref> | Refer to any SVG document <text> element and reuse | Same <TEXT> element |
| <Tspan> | Element equivalent to the <text>, but it can be nested within the text itself and the internal mark | Identical to the <text> element + In addition: xlink: href = "reference to a <TEXT> element" |
| <Use> | URI reference using a <G>, <svg> or other property has a unique ID and repeated graphic elements. Copy the original element, so the presence of the original file is only a reference. Original affect any change in all copies. | x = "top left element of the x-axis clone" y = "top left y-axis element clone" width = "cloning element width" height = "height cloning element" xlink: href = "URI references cloning element" + Show properties: All |
| view | ||
| vkern |