| Element |
Description |
Attributes |
| <a> |
Creates a link around SVG elements |
- xlink:show
- xlink:actuate
- xlink:href
- target
|
| <altGlyph> |
Provides control over the glyphs used to render particular character data |
- x
- y
- dx
- dy
- rotate
- glyphRef
- format
- xlink:href
|
| <altGlyphDef> |
Defines a substitution set for glyphs |
|
| <altGlyphItem> |
Defines a candidate set of glyph substitutions |
|
| <animate> |
Defines how an attribute of an element changes over time |
- 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 time the animation will take place”
- keyTimes=”a semicolon-separated list of time values used to control the pacing of the animation” e.g.
- calcMode=”This attribute specifies the interpolation mode for the animation. Can be ‘discrete’, ‘linear’, ‘paced’, ‘spline’”
- repeatDurには、反復をどれくらい長く続けるかを示す時間
- 開始時間（begin）
- 終了したときにどうするか（fill）
- e.g. <animate attributeName=”x” from=”0″ to=”5″ begin=”3s” dur=”5s” fill=”freeze” />
|
| <animateMotion> |
Causes a referenced element to move along a motion path |
- calcMode=”the interpolation mode for the animation. Can be ‘discrete’, ‘linear’, ‘paced’, ‘spline'”
- path=”the motion path”
- keyPoints=”how far along the motion path the object shall move at the moment in time”
- rotate=”applies a rotation transformation”
- xlink:href=”an URI reference to the <path> element which defines the motion path”
|
| <animateTransform> |
Animates a transformation attribute on a target element, thereby allowing animations to control translation, scaling, rotation and/or skewing |
- by=”a relative offset value”
- from=”the starting value”
- to=”the ending value”
- type=”the type of transformation which is to have its values change over time. Can be ‘translate’, ‘scale’, ‘rotate’, ‘skewX’, ‘skewY'”
|
| <circle> |
Defines a circle |
- cx=the x-axis center of the circle
- cy=the y-axis center of the circle
- r=The circle’s radius”. Required.
- pathLength=The total length for the circle’s circumference, in user units.
+ presentation attributes:
clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
|
| <clipPath> |
Clipping is about hiding what normally would be drawn. The stencil which defines what is and what isn’t drawn is called a clipping path |
- clip-path=”the referenced clipping path is intersected with the referencing clipping path”
- clipPathUnits=”‘userSpaceOnUse’ or ‘objectBoundingBox’. The second value makes units of children a fraction of the object bounding box which uses the mask (default: ‘userSpaceOnUse’)”
|
| <color-profile> |
Specifies a color profile description (when the document is styled using CSS) |
- local=”the unique ID for a locally stored color profile”
- name=””
- rendering-intent=”auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric”
- xlink:href=”the URI of an ICC profile resource”
|
| <cursor> |
Defines a platform-independent custom cursor |
- x=”the x-axis top-left corner of the cursor (default is 0)”
- y=”the y-axis top-left corner of the cursor (default is 0)”
- xlink:href=”the URI of the image to use as the cursor
|
| <defs> |
A container for referenced elements |
|
| <desc> |
A text-only description for container elements or graphic elements in SVG (user agents may display the text as a tooltip) |
|
| <ellipse> |
Defines an ellipse |
- cx=the x-axis center of the ellipse
- cy=the y-axis center of the ellipse
- rx=the length of the ellipse’s radius along the x-axis. Required.
- ry=the length of the ellipse’s radius along the y-axis. Required.
- pathLength=This attribute lets specify the total length for the path, in user units.
+ presentation attributes:
clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
|
| <feBlend> |
Composes two objects together according to a certain blending mode |
- mode=”the 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 filter. Applies a matrix transformation |
|
| feComponentTransfer |
SVG filter. Performs component-wise remapping of data |
|
| 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 to feComponentTransfer |
|
| feFuncB |
SVG filter. Sub-element to feComponentTransfer |
|
| feFuncG |
SVG filter. Sub-element to feComponentTransfer |
|
| feFuncR |
SVG filter. Sub-element to feComponentTransfer |
|
| feGaussianBlur |
SVG filter. Performs a Gaussian blur on the image |
|
| feImage |
SVG filter. |
|
| feMerge |
SVG filter. Creates image layers on top of each other |
|
| feMergeNode |
SVG filter. Sub-element to feMerge |
|
| feMorphology |
SVG filter. Performs a “fattening” or “thinning” on a source graphic |
|
| feOffset |
SVG filter. Moves an 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 |
Defines a font |
|
| font-face |
Describes the characteristics of a font |
|
| foreignObject |
The <foreignObject> SVG element includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML. |
|
| <g> |
Used to group together elements |
- id=”the name of the group”
- fill=”the fill color for the group”
- opacity=”the opacity for the group”
+ presentation attributes:
All
|
| glyph |
Defines the graphics for a given glyph |
|
| glyphRef |
Defines a possible glyph to use |
|
| <image> |
Defines an image |
- x=”the x-axis top-left corner of the image”
- y=”the y-axis top-left corner of the image”
- width=”the width of the image”. Required.
- height=”the height of the image”. Required.
- xlink:href=”the path to the image”. Required.
+ presentation attributes:
Color, Graphics, Images, Viewports
|
| <line> |
Defines a line |
- x1=the x start point of the line
- y1=the y start point of the line
- x2=the x end point of the line
- y2=the y end point of the line
- pathLength=Defines the total path length in user units.
+ presentation attributes:
clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
|
| <linearGradient> |
Defines a linear gradient. Linear gradients fill the object by using a vector, and can be defined as horizontal, vertical or angular gradients. |
- id=”the unique id used to reference this pattern. Required to reference it”
- gradientUnits=”‘userSpaceOnUse’ or ‘objectBoundingBox’. Use the view box or object to determine relative position of vector points. (Default ‘objectBoundingBox’)”
- gradientTransform=”the transformation to apply to the gradient”
- x1=”the x start point of the gradient vector (number or % – 0% is default)”
- y1=”the y start point of the gradient vector. (0% default)”
- x2=”the x end point of the gradient vector. (100% default)”
- y2=”the y end point of the gradient vector. (0% default)”
- spreadMethod=”‘pad’ or ‘reflect’ or ‘repeat'”
- xlink:href=”reference to another gradient whose attribute values are used as defaults and stops included. Recursive”
|
| <marker> |
Markers can be placed on the vertices of lines, polylines, polygons and paths. These elements can use the marker attributes “marker-start”, “marker-mid” and “marker-end”‘ which inherit by default or can be set to ‘none’ or the URI of a defined marker. You must first define the marker before you can reference it via its URI. Any kind of shape can be put inside marker. They are drawn on top of the element they are attached to |
- markerUnits=”‘strokeWidth’ or ‘userSpaceOnUse’. If ‘strokeWidth’ is used then one unit equals one stroke width. Otherwise, the marker does not scale and uses the 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 show the marker at. ‘auto’ will compute an angle that makes the x-axis a tangent of the vertex (default 0)”
- markerWidth=”the width of the marker (default 3)”
- markerHeight=”the height of the marker (default 3)”
- viewBox=”the points “seen” in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height)”
+ presentation attributes:
All
|
| <mask> |
Masking is a combination of opacity values and clipping. Like clipping you can use shapes, text or paths to define sections of the mask. The default state of a mask is fully transparent which is the opposite of clipping plane. The graphics in a mask sets how opaque portions of the mask are |
- maskUnits=”‘userSpaceOnUse’ or ‘objectBoundingBox’. Set whether the clipping plane is relative the full view port or object (default: ‘objectBoundingBox’)”
- maskContentUnits=”Use the second with percentages to make mask graphic positions relative the object. ‘userSpaceOnUse’ or ‘objectBoundingBox’ (default: ‘userSpaceOnUse’)”
- x=”the clipping plane of the mask (default: -10%)”
- y=”the clipping plane of the mask (default: -10%)”
- width=”the clipping plane of the mask (default: 120%)”
- height=”the clipping plane of the mask (default: 120%)”
|
| metadata |
Specifies metadata |
|
|
|
|
| mpath |
The <mpath> sub-element for the <animateMotion> element provides the ability to reference an external <path> element as the definition of a motion path. |
|
| <path> |
Defines a path |
- d=”a set of commands which define the path”
- MoveTo: M, m
- LineTo: L, l, H, h, V, v
- Cubic Bézier Curve: C, c, S, s
- Quadratic Bézier Curve: Q, q, T, t
- Elliptical Arc Curve: A, a
- ClosePath: Z, z
- pathLength=”If present, the path will be scaled so that the computed path length of the points equals this value”
+ presentation attributes:
clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
|
| <pattern> |
Defines the coordinates you want the view to show and the size of the view. Then you add shapes into your pattern. The pattern repeats when an edge of the view box (viewing area) is hit |
- id=”the unique id used to reference this pattern.” Required.
- patternUnits=”‘userSpaceOnUse’ or ‘objectBoundingBox’. The second value makes units of x, y, width, height a fraction (or %) of the object bounding box which uses the pattern.”
- patternContentUnits=”‘userSpaceOnUse’ or ‘objectBoundingBox'”
- patternTransform=”allows the whole pattern to 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=”the width of the pattern tile (default 100%)”
- height=”the height of the pattern tile (default 100%)”
- viewBox=”the points “seen” in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height)”
- xlink:href=”reference to another pattern whose attribute values are used as defaults and any children are inherited. Recursive”
|
| <polygon> |
Defines a graphic that contains at least three sides |
- points=the points of the polygon. The total number of points must be even. Required.
- fill-rule=part of the FillStroke presentation attributes
+ presentation attributes:
clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
|
| <polyline> |
Defines any shape that consists of only straight lines |
- points=the points on the polyline. Required.
- pathLength=This attribute lets specify the total length for the path, in user units.
+ presentation attributes:
clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
|
| <radialGradient> |
Defines a radial gradient. Radial gradients are created by taking a circle and smoothly changing values between gradient stops from the focus point to the outside radius. |
- gradientUnits=”‘userSpaceOnUse’ or ‘objectBoundingBox’. Use the view box or object to determine relative position of vector points. (Default ‘objectBoundingBox’)”
- gradientTransform=”the transformation to apply to the gradient”
- cx=”the center point of the gradient (number or % – 50% is default)”
- cy=”the center point of the gradient. (50% default)”
- r=”the radius of the gradient. (50% default)”
- fx=”the focus point of the gradient. (0% default)”
- fy=”The focus point of the gradient. (0% default)”
- spreadMethod=”‘pad’ or ‘reflect’ or ‘repeat'”
- xlink:href=”Reference to another gradient whose attribute values are used as defaults and stops included. Recursive”
|
| <rect> |
Defines a rectangle |
- x=the x-axis top-left corner of the rectangle
- y=the y-axis top-left corner of the rectangle
- rx=the x-axis radius (to round the element)
- ry=the y-axis radius (to round the element)
- width=the width of the rectangle. Required.
- height=the height of the rectangle Required.
- pathLength=The total length of the rectangle’s perimeter, in user units.
+ presentation attributes:
clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
|
| script |
Container for scripts (e.g., ECMAScript) |
|
| set |
Sets the value of an attribute for a specified duration |
|
| <stop> |
The stops for a gradient |
- offset=”the offset for this stop (0 to 1/0% to 100%)”. Required.
- stop-color=”the color of this stop”
- stop-opacity=”the opacity of this stop (0 to 1)”
|
| style |
Allows style sheets to be embedded directly within SVG content |
|
| <svg> |
Creates an SVG document fragment |
- x=top left corner when embedded (default 0)
- y=top left corner when embedded (default 0)
- width=the width of the svg fragment (default 100%)
- height=the height of the svg fragment (default 100%)
- viewBox=the points “seen” in this SVG drawing area. 4 values 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)
拡大縮小される画像の、ビューポートに対する位置揃えを指定できます。また、画像がビューポートの端に接するようにするか、あるいは切り取られるようにするかを指定できます。
+ presentation attributes:
clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
|
| switch |
|
|
| symbol |
|
|
| <text> |
Defines a text |
- x=”a list of x-axis positions. The nth x-axis position is given to the nth character in the text. If 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 which moves the characters relative to the absolute position of the last glyph drawn. (see x)”
- dy=”a list of lengths which 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. Additional characters are NOT given the last rotation value”
- textLength=”a target length for the text that the SVG viewer will attempt 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 try 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 |
To render text along the shape of a <path>, enclose the text in a <textPath> element that has an href attribute with a reference to the <path> element. |
|
| title |
A text-only description for elements in SVG – not displayed as part of the graphics. User agents may display the text as a tooltip |
|
| <tref> |
References any <text> element in the SVG document and reuse it |
- Identical to the <text> element
|
| <tspan> |
Identical to the <text> element but can be nested inside text tags and inside itself |
- Identical to the <text> element
+ in addition:
xlink:href=”Reference to a <text> element”
|
| <use> |
Uses a URI to reference a <g>, <svg> or other graphical element with a unique id attribute and replicate it. The copy is only a reference to the original so only the original exists in the document. Any change to the original affects all copies. |
- x=the x-axis top-left corner of the cloned element
- y=the y-axis top-left corner of the cloned element
- width=the width of the cloned element
- height=the height of the cloned element
+ presentation attributes:
clip-path, clip-rule, color, color-interpolation, color-rendering, cursor, display, fill, fill-opacity, fill-rule, filter, mask, opacity, pointer-events, shape-rendering, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, transform, vector-effect, visibility
|
| view |
|
|
