revision:
The <g> SVG element is a container used to group other SVG elements.Transformations applied to the "g" element are performed on its child elements, and its attributes are inherited by its children. It can also group multiple elements to be referenced later with the "use" element.
No specific attributes.
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 100 80">
<g fill="white" stroke="green" stroke-width="2">
<circle cx="30" cy="30" r="25" />
<circle cx="50" cy="50" r="25" />
</g>
</svg>
</div>
EXPERIMENTAL The <hatch> SVG element is used to fill or stroke an object using one or more pre-defined paths that are repeated at fixed intervals in a specified direction to cover the areas to be painted. Hatches defined by the "hatch" element can then referenced by the "fill" and "stroke" CSS properties on a given graphics element to indicate that the given element shall be filled or stroked with the hatch. Paths are defined by <hatchpath> elements.
Specific attributes for "hatch" include:
the x attribute defines a x-axis coordinate in the user coordinate system. Value: length|percentage; default value: 0; animatable: yes.
the y attribute defines a y-axis coordinate in the user coordinate system. Value: length|percentage; default value: 0; animatable: yes.
the pitch attribute :N.A.
the rotate attribute specifies how the animated element rotates as it travels along a path specified in an "animateMotion" element. Value: auto | auto-reverse | number. The "auto" and "auto-reverse" values allow the animated element's rotation to change dynamically as it travels along the path. If the value of rotate is "auto", the element turns to align its right-hand side in the current direction of motion. If the value is "auto-reverse", it turns its left-hand side in the current direction of motion. Setting rotate's value to a number specifies a constant rotation, in degrees, that does not change with the animation. The default value of 0 keeps the animated element in its original orientation. Default value: 0; animatable: no.
the hatchUnits attribute: N.A.
the hatchContentUnits attribute: N.A.
the transform attribute defines a list of transform definitions that are applied to an element and the element's children. Value: transform-list; default value: none; animatable: yes. Transform functions: matrix, translate, scale, rotate, skewX, skewY.
the href attribute defines a link to a resource as a reference URL. The exact meaning of that link depends on the context of each element using it. Value: url; default value: none; animatable: yes.
Specific attributes for "hatchpath" include:
the d attribute defines a path to be drawn. A path definition is a list of "path commands" where each command is composed of a command letter and numbers that represent the command parameters. The commands are: 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.
the offset attribute: N.A.
codes:
<div style="margin-left: 4vw;">
<svg width="200" height="200">
<hatch id="hatch" hatchUnits="userSpaceOnUse" pitch="5" rotate="135">
<hatchpath stroke="#a080ff" stroke-width="3"/>
</hatch>
</defs>
<rect fill="url(#hatch)" stroke="black" stroke-width="2" x="10%" y="10%"
width="80%" height="80%" />
</svg>
</div>
The <image> SVG element includes images inside SVG documents. It can display raster image files or other SVG files. The only image formats SVG software must support are JPEG, PNG, and other SVG files. Animated GIF behavior is undefined.
SVG files displayed with 'image' are treated as an image: external resources aren't loaded, visited styles aren't applied, and they cannot be interactive. To include dynamic SVG elements, try "use" with an external URL. To include SVG files and run scripts inside them, try "object" inside of "foreignObject".
Specific attributes include:
the x attribute positions the image horizontally from the origin. Value: length|percentage; default value: 0%; animatable: yes.
the y attribute positions the image vertically from the origin. Value: length|percentage; default value: 0%; animatable: yes
the width attribute defines the width the image renders at. Unlike HTML's "img", this attribute is required. Value: length|percentage; default value: 100%; animatable: yes
the height attribute defines the height the image renders at. Unlike HTML's "img", this attribute is required. Value: length|percentage; default value: 100%; animatable: yes
the href and xlink:href attributes point at a URL for the image file. Value: url; default value: none; animatable: yes
the preserveAspectRatio attribute controls how the image is scaled. Value: align meetOrSlice; default value: xMidYmid meet; animatable: yes
the crossorigin attribute defines the value of the credentials flag for CORS requests.
codes:
<div style="margin-left: 4vw;">
<svg width="200" height="200">
<image href="../pics/cartoon.jpg" height="200" width="200"/>
</svg>
</div>
The <line> element is an SVG basic shape used to create a line connecting two points.
Specific attributes include:
the x1 attribute defines the x-axis coordinate of the line starting point. Value type: "length"|"percentage"|"number" ; default value: 0; animatable: yes
the x2 attribute defines the y-axis coordinate of the line ending point. Value type: "length"|"percentage"|"number"; default value: 0; snimatable: yes
the y1 attribute defines the y-axis coordinate of the line starting point. Value type: "length"|"percentage"|"number" ; default value: 0; snimatable: yes
the y2 attribute defines the y-axis coordinate of the line ending point. Value type: "length"|"percentage"|"number"; default value: 0; snimatable: yes
the pathLength attribute defines the total path length in user units. Value type: "number" ; default value: none; animatable: yes
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 100 50">
<line x1="0" y1="40" x2="80" y2="20" stroke="black" />
<!-- If you do not specify the stroke color the line will not be visible -->
</svg>
</div>
The <linearGradient> element let authors define linear gradients that can be applied to fill or stroke of graphical elements.
Specific attributes include:
the gradientUnits attribute defines the coordinate system for attributes x1, x2, y1, y2 Value type: userSpaceOnUse|objectBoundingBox; default value: objectBoundingBox; animatable: yes
the gradientTransform attribute provides additional transformation to the gradient coordinate system. Value type: "transform-list" ; default value: identity transform; animatable: yes
the href attribute defines a reference to another "linearGradient" element that will be used as a template. Value type: "URL"; default value: none; animatable: yes
the spreadMethod attribute indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient. Value type: pad|reflect|repeat ; default value: pad; animatable: yes
the x1 attribute defines the x coordinate of the starting point of the vector gradient along which the linear gradient is drawn. Value type: "length" ; default value: 0%; animatable: yes
the x2 this attribute defines the x coordinate of the ending point of the vector gradient along which the linear gradient is drawn. Value type: "length" ; default value: 100%; animatable: yes
the xlink:href attribute is deprecated. This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.
An <IRI> reference to another "linearGradient" element that will be used as a template. Value type: "IRI" ; default value: none; animatable: yes
the y1 attribute defines the y coordinate of the starting point of the vector gradient along which the linear gradient is drawn. Value type: "length" ; default value: 0%; animatable: yes
the y2 attribute defines the y coordinate of the ending point of the vector gradient along which the linear gradient is drawn. Value type: "length" ; default value: 0%; animatable: yes
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 10 10">
<defs>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</linearGradient>
</defs>
<!-- using my linear gradient -->
<circle cx="5" cy="5" r="4" fill="url('#myGradient')"/>
</svg>
</div>
The <marker> element defines the graphic that is to be used for drawing arrowheads or polymarkers on a given "path", "line", "polyline" or "polygon" element. Markers are attached to shapes using the marker-start, marker-mid, and marker-end properties.
Specific attributes include:
the markerHeight attribute defines the height of the marker viewport. Value type: "length"; dDefault value: 3; animatable: yes
the markerUnits attribute defines the coordinate system for the attributes markerWidth, markerHeight and the contents of the "marker". Value type: userSpaceOnUse|strokeWidth ; default value: strokeWidth; animatable: yes
the markerWidth attribute defines the width of the marker viewport. Value type: "length" ; default value: 3; animatable: yes
the orient attribute defines the orientation of the marker relative to the shape it is attached to. Value type: auto|auto-start-reverse|"angle" ; default value: 0; animatable: yes
the preserveAspectRatio attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; default value: xMidYMid meet; animatable: yes
the refX attribute defines the x coordinate for the reference point of the marker. Value type: left|center|right|"coordinate" ; default value: 0; animatable: yes
the refY attribute defines the y coordinate for the reference point of the marker. Value type: top|center|bottom|"coordinate"; default value: 0; animatable: yes
the viewBox attribute defines the bound of the SVG viewport for the current SVG fragment. Value type: "list-of-numbers"; default value: none; animatable: yes
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 100 100">
<defs>
<!-- arrowhead marker definition -->
<marker id="arrow" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="6" markerHeight="6"
orient="auto-start-reverse">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
<!-- simple dot marker definition -->
<marker id="dot" viewBox="0 0 10 10" refX="5" refY="5" markerWidth="5" markerHeight="5">
<circle cx="5" cy="5" r="5" fill="red" />
</marker>
</defs>
<!-- Coordinate axes with a arrowhead in both direction -->
<polyline points="10,10 10,90 90,90" fill="none" stroke="black" marker-start="url(#arrow)"
marker-end="url(#arrow)"/>
<!-- Data line with polymarkers -->
<polyline points="15,80 29,50 43,60 57,30 71,40 85,15" fill="none" stroke="grey"
marker-start="url(#dot)" marker-mid="url(#dot)" marker-end="url(#dot)"/>
</svg>
</div>
The <mask> element defines an alpha mask for compositing the current object into the background. A mask is used/referenced using the "mask" property.
Specific attributes include:
the height attribute defines the height of the masking area. Value type: 'length' ; default value: 120%; animatable: yes
the maskContentUnits attribute defines the coordinate system for the contents of the "mask". Value type: userSpaceOnUse|objectBoundingBox ; default value: userSpaceOnUse; animatable: yes
the maskUnits attribute defines the coordinate system for attributes x, y, width and height on the "mask". Value type: userSpaceOnUse|objectBoundingBox ; default value: objectBoundingBox; animatable: yes
the x attribute defines the x-axis coordinate of the top-left corner of the masking area. Value type: "coordinate"; default value: -10%; animatable: yes
the y attribute defines the y-axis coordinate of the top-left corner of the masking area. Value type: "coordinate"; default value: -10%; animatable: yes
the width attribute defines the width of the masking area. Value type: "length" ; default value: 120%; animatable: yes
codes:
<div style="margin-left: 4vw;">
<svg viewBox="-10 -10 120 120">
<mask id="myMask">
<!-- Everything under a white pixel will be visible -->
<rect x="0" y="0" width="100" height="100" fill="white" />
<!-- Everything under a black pixel will be invisible -->
<path d="M10,35 A20,20,0,0,1,50,35 A20,20,0,0,1,90,35 Q90,65,50,95 Q10,65,10,35 Z"
fill="black" />
</mask>
<polygon points="-10,110 110,110 110,-10" fill="orange" />
<!-- with this mask applied, we "punch" a heart shape hole into the circle -->
<circle cx="50" cy="50" r="50" mask="url(#myMask)" />
</svg>
</div>
The <metadata> SVG element adds metadata to SVG content. Metadata is structured information about data. The contents of "metadata" should be elements from other XML namespaces such as RDF, FOAF, etc.
No specific attributes.
The <mpath> sub-element for the "animateMotion" element provides the ability to reference an external "path" element as the definition of a motion path.
Specific attributes include:
the xlink:href attribute is deprecated. This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.
An <IRI> reference to another "linearGradient" element that will be used as a template. Value type: "IRI" ; default value: none; animatable: yes
codes:
<div style="margin-left: 4vw;">
<svg width="100%" height="100%" viewBox="0 0 500 300">
<rect x="1" y="1" width="498" height="298" fill="none" stroke="blue" stroke-width="2" />
<!-- Draw the outline of the motion path in blue, along with three small circles at
the start, middle and end. -->
<path id="path1" d="M100,250 C 100,50 400,50 400,250" fill="none" stroke="blue"
stroke-width="7.06" />
<circle cx="100" cy="250" r="17.64" fill="blue" />
<circle cx="250" cy="100" r="17.64" fill="blue" />
<circle cx="400" cy="250" r="17.64" fill="blue" />
<!-- Here is a triangle which will be moved about the motion path.
It is defined with an upright orientation with the base of
the triangle centered horizontally just above the origin. -->
<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" >
<!-- Define the motion path animation -->
<animateMotion dur="6s" repeatCount="indefinite" rotate="auto" >
<mpath xlink:href="#path1"/>
</animateMotion>
</path>
</svg>
</div>
The <path> SVG element is the generic element to define a shape. All the basic shapes can be created with a path element.
Specific attributes include:
the d attribute defines the shape of the path. Value type: "string" ; default value: ''; animatable: yes
the pathLength attribute let authors specify the total length for the path, in user units. Value type: "number"; default value: none; animatable: yes
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 100 100">
<path d="M 10,30
A 20,20 0,0,1 50,30
A 20,20 0,0,1 90,30
Q 90,60 50,90
Q 10,60 10,30 z"/>
</svg>
</div>
The <pattern> element defines a graphics object which can be redrawn at repeated x- and y-coordinate intervals ("tiled") to cover an area. The "pattern" is referenced by the "fill" and/or "stroke" attributes on other graphics elements to fill or stroke those elements with the referenced pattern.
Specific attributes include:
the height attribute determines the height of the pattern tile. Value type: "length|"percentage:; default value: 0; animatable: yes
the href attribute references a template pattern that provides default values for the "pattern" attributes. Value type: "URL"; default value: none; animatable: yes
the patternContentUnits attribute defines the coordinate system for the contents of the "pattern". Value type: userSpaceOnUse|objectBoundingBox; default value: userSpaceOnUse; animatable: yes. This attribute has no effect if a viewBox attribute is specified on the "pattern" element.
the patternTransform attribute contains the definition of an optional additional transformation from the pattern coordinate system onto the target coordinate system. Value type: "transform-list"; default value: none; animatable: yes
the patternUnits attribute defines the coordinate system for attributes x, y, width , and height. Value type: userSpaceOnUse|objectBoundingBox; default value: objectBoundingBox; animatable: yes
the preserveAspectRatio attribute defines how the SVG fragment must be deformed if it is embedded in a container with a different aspect ratio. Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; default value: xMidYMid meet; animatable: yes
the viewBox attribute defines the bound of the SVG viewport for the pattern fragment. Value type: "list-of-numbers" ; default value: none; animatable: yes
the width attribute determines the width of the pattern tile. Value type: "length"|"percentage" ; default value: 0; animatable: yes
the x attribute determines the x coordinate shift of the pattern tile. Value type: "length"|"percentage' ; default value: 0; animatable: yes
the xlink:href attribute reference a template pattern that provides default values for the 'pattern' attributes. Value type: "URL"; default value: none; animatable: yes. For browsers implementing href, if both href and xlink:href are set, xlink:href will be ignored and only href will be used.
the y attribute determines the y coordinate shift of the pattern tile. Value type: "length"|"percentage"; default value: 0; animatable: yes
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 230 100">
<defs>
<pattern id="star" viewBox="0,0,10,10" width="10%" height="10%">
<polygon points="0,0 2,5 0,10 5,8 10,10 8,5 10,0 5,2"/>
</pattern>
</defs>
<circle cx="50" cy="50" r="50" fill="url(#star)"/>
<circle cx="180" cy="50" r="40" fill="none" stroke-width="20" stroke="url(#star)"/>
</svg>
</div>
The "polygon" element defines a closed shape consisting of a set of connected straight line segments. The last point is connected to the first point. For open shapes, see the <polyline> element.
Specific attributes include:
the points attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon. Value type: "number"+ ; default value: ""; animatable: yes
the pathLength attribute let specify the total length for the path, in user units. Value type: "number"; default value: none; animatable: yes
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 200 100">
<polygon points="0,100 50,25 50,75 100,0" />
<polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>
</div>
The <polyline> SVG element is an SVG basic shape that creates straight lines connecting several points. Typically a polyline is used to create open shapes as the last point doesn't have to be connected to the first point. For closed shapes see the <polygon> element.
Specific attributes include:
the points attribute defines the list of points (pairs of x,y absolute coordinates) required to draw the polygon. Value type: "number"+ ; default value: ""; animatable: yes
the pathLength attribute let specify the total length for the path, in user units. Value type: "number"; default value: none; animatable: yes
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 200 100">
<!-- Example of a polyline with the default fill -->
<polyline points="0,100 50,25 50,75 100,0" />
<!-- Example of the same polyline shape with stroke and no fill -->
<polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>
</div>
The <radialGradient> element let authors define radial gradients that can be applied to fill or stroke of graphical elements.
Specific attributes include
the cx attribute defines the x coordinate of the end circle of the radial gradient. Value type: "length" ; default value: 50%; animatable: yes
the cy attribute defines the y coordinate of the end circle of the radial gradient Value type: "length" ; default value: 50%; animatable: yes
the fr attribute defines the radius of the start circle of the radial gradient. The gradient will be drawn such that the 0% "stop" is mapped to the perimeter of the start circle. Value type: "length" ; default value: 0%; animatable: yes
the fx attribute defines the x coordinate of the start circle of the radial gradient. Value type: "length" ; default value: same as cx; animatable: yes
the fy attribute defines the y coordinate of the start circle of the radial gradient. Value type: "length" ; default value: same as cy; animatable: yes
the gradientUnits attribute defines the coordinate system for attributes cx, cy, r, fx, fy, fr. Value type: userSpaceOnUse|objectBoundingBox; default value: objectBoundingBox; animatable: yes
the gradientTransform attribute provides additional transformation to the gradient coordinate system. Value type: "transform-list" ; default value: identity transform; animatable: yes
the href attribute defines a reference to another "radialGradient" element that will be used as a template. Value type: "URL" ; default value: none; animatable: yes
the r attribute defines the radius of the end circle of the radial gradient. The gradient will be drawn such that the 100% "stop" is mapped to the perimeter of the end circle. Value type: "length" ; default value: 50%; animatable: yes
the spreadMethod attribute indicates how the gradient behaves if it starts or ends inside the bounds of the shape containing the gradient. Value type: pad|reflect|repeat ; default value: pad; animatable: yes
the xlink:href (deprecated) feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.
An <IRI> reference to another "linearGradient" element that will be used as a template. Value type: "IRI" ; default value: none; animatable: yes
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 10 5">
<defs>
<radialGradient id="myGradient">
<stop offset="10%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</radialGradient>
</defs>
<'!-- using my radial gradient -->
<circle cx="2" cy="2" r="2" fill="url('#myGradient')" />
</svg>
</div>
The <rect> element is a basic SVG shape that draws rectangles, defined by their position, width, and height. The rectangles may have their corners rounded.
Specific attributes include:
x: the x coordinate of the rect. Value type: "length"|"percentage"; default value: 0; animatable: yes
y: the y coordinate of the rect. Value type: "length"|"percentage" ; default value: 0; animatable: yes
width: the width of the rect. Value type: auto|"length"|"percentage" ; default value: auto; animatable: yes
height: the height of the rect. Value type: auto|"length"|"percentage" ; default value: auto; animatable: yes
rx: the horizontal corner radius of the rect. Defaults to ry if it is specified. Value type: auto|"length"|"percentage"; default value: auto; animatable: yes
ry: the vertical corner radius of the rect. Defaults to rx if it is specified. Value type: auto|"length"|"percentage"; default value: auto; animatable: yes
pathLength: the total length of the rectangle's perimeter, in user units. Value type: "number" ; default value: none; animatable: yes
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 220 100">
<!-- Simple rectangle -->
<rect width="100" height="100" />
<!-- Rounded corner rectangle -->
<rect x="120" width="100" height="100" rx="15" />
</svg>
The SVG script element allows to add scripts to an SVG document.
Specific attributes include:
crossorigin: this attribute defines CORS settings as define for the HTML "script" element. Value type: "string"; default value: ?; animatable: yes
href: the URL to the script to load. Value type: "URL" ; default value: none; animatable: no
type: this attribute defines type of the script language to use. Value type: :string"; default value: application/ecmascript; animatable: no
xlink:href: the URL to the script to load. Value type: "URL"; default value: none; animatable: no
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 10 7">
<script>
// {
function getColor () {
const R = Math.round(Math.random() * 255).toString(16).padStart(2,'0')
const G = Math.round(Math.random() * 255).toString(16).padStart(2,'0')
const B = Math.round(Math.random() * 255).toString(16).padStart(2,'0')
return `#${R}${G}${B}`
}
document.querySelector('.one').addEventListener('click', (e) => {
e.target.style.fill = getColor()
})
})
// ]]>
</script>
<circle class="one" cx="3" cy="3" r="3" />
</svg>
</div>
the SVG <set> element provides a simple means of just setting the value of an attribute for a specified duration. It supports all attribute types, including those that cannot reasonably be interpolated, such as string and boolean values. For attributes that can be reasonably be interpolated, the "animate" is usually preferred.
Specific attributes include:
to: this attribute defines the value to be applied to the "target" attribute for the duration of the animation. The value must match the requirements of the "target" attribute. Value type: "anything"; default value: none; animatable: no
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 10 9">
<.style>
rect { cursor: pointer }
.round { rx: 5px; fill: green; }
</style>
<rect id="me" width="8" height="8">
<set attributeName="class" to="round" begin="me.click" dur="2s" />
</rect>
</svg>
</div>
The SVG <stop> element defines a color and its position to use on a gradient. This element is always a child of a "linearGradient" or "radialGradient" element.
Specific attributes include:
the offset attribute defines where the gradient stop is placed along the gradient vector. Value type: "number"|"percentage"; default value: 0; animatable: yes
the stop-color attribute defines the color of the gradient stop. It can be used as a CSS property. Value type: currentcolor|"color"|"icccolor"; default value: black; animatable: yes
the stop-opacity attribute defines the opacity of the gradient stop. It can be used as a CSS property. Value type: "opacity"; default value: 1; animatable: yes
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 10 6">
<defs>
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="5%" stop-color="gold" />
<stop offset="95%" stop-color="red" />
</linearGradient>
</defs>
<!-- using my linear gradient -->
<circle cx="3" cy="3" r="2" fill="url('#myGradient')" />
</svg>
</div>
The SVG <style> element allows style sheets to be embedded directly within SVG content.
Specific attributes include
the type attribute defines type of the style sheet language to use as a media type string. Value type: "string"; default value: text/css; animatable: no
the media attribute defines to which media the style applies. Value type: "string'; default value: all; animatable: no
the title attribute defines the title of the style sheet which can be used to switch between alternate style sheets. Value type: "string"; default value: none; animatable: no
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 10 6">
<.style>
.circle {fill: gold; stroke: maroon; stroke-width: 0.1vw;}
</style>
<circle class="circle" cx="3" cy="3" r="2" />
</svg>
</div>
The svg element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.
Specific attributes include:
baseProfile: the minimum SVG language profile that the document requires. Value type: "string"; default value: none; animatable: no
contentScriptType: the default scripting language used by the SVG fragment. Value type: "string" ; default value: application/ecmascript; animatable: no
height: the displayed height of the rectangular viewport. (Not the height of its coordinate system.) Value type: "length"|"percentage" ; default value: auto; animatable: yes
preserveAspectRatio: how the svg fragment must be deformed if it is displayed with a different aspect ratio. Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; default value: xMidYMid meet; dnimatable: yes
version: which version of SVG is used for the inner content of the element. Value type: "number" ; default value: none; animatable: no
viewBox: the SVG viewport coordinates for the current SVG fragment. Value type: "list-of-numbers" ; default value: none; animatable: yes
width: the displayed width of the rectangular viewport. (Not the width of its coordinate system.) Value type: "length"|"percentage" ; default value: auto; animatable: yes
x: the displayed x coordinate of the svg container. No effect on outermost svg elements. Value type: "length"|"percentage"; default value: 0; animatable: yes
y: the displayed y coordinate of the svg container. No effect on outermost svg elements. Value type: "length"|"percentage"; default value: 0; animatable: yes
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 300 100" stroke="red" fill="grey">
<circle cx="50" cy="50" r="40" />
<circle cx="150" cy="50" r="4" />
<svg viewBox="0 0 10 10" x="200" width="100">
<circle cx="5" cy="5" r="4" />
</svg>
</svg>
</div>
The <switch> SVG element evaluates any requiredFeatures, requiredExtensions and systemLanguage attributes on its direct child elements in order, and then renders the first child where these attributes evaluate to true. Other direct children will be bypassed and therefore not rendered. If a child element is a container element, like <g>, then its subtree is also processed/rendered or bypassed/not rendered.
No specific attributes.
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 -20 100 50">
<switch>
<text systemLanguage="ar">مرحبا</text>
<text systemLanguage="de,nl">Hallo!</text>
<text systemLanguage="en-us">Howdy!</text>
<text systemLanguage="en-gb">Wotcha!</text>
<text systemLanguage="en-au">G'day!</text>
<text systemLanguage="en">Hello!</text>
<text systemLanguage="es">Hola!</text>
<text systemLanguage="fr">Bonjour!</text>
<text systemLanguage="ja">こんにちは</text>
<text systemLanguage="ru">Привет!</text>
<text>☺</text>
</switch>
</svg>
</div>
The <symbol> element is used to define graphical template objects which can be instantiated by a "use" element. The use of "symbol" elements for graphics that are used multiple times in the same document adds structure and semantics. Documents that are rich in structure may be rendered graphically, as speech, or as Braille, and thus promote accessibility.
Specific attributes include:
height: this attribute determines the height of the symbol. Value type: "length"|"percentage"; default value: auto; animatable: yes
preserveAspectRatio: this attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; default value: xMidYMid meet; animatable: yes
refX: this attribute determines the x coordinate of the reference point of the symbol. Value type: "length"|"percentage"|left|center|right ; default value: 0; animatable: yes
refY: this attribute determines the y coordinate of the reference point of the symbol. Value type: "length"|"percentage"|top|center|bottom ; default value: 0; animatable: yes
viewBox: this attribute defines the bound of the SVG viewport for the current symbol. Value type: "list-of-numbers" ; default value: none; animatable: yes
width: this attribute determines the width of the symbol. Value type: "length"|"percentage" ; default value: auto; animatable: yes
x: this attribute determines the x coordinate of the symbol. Value type: "length"|"percentage"; default value: 0; animatable: yes
y: this attribute determines the y coordinate of the symbol. Value type: "length"|"percentage" ; default value: 0; animatable: yes
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 80 20">
<!-- Our symbol in its own coordinate system -->
<symbol id="myDot" width="10" height="10" viewBox="0 0 2 2">
<circle cx="1" cy="1" r="1" />
</symbol>
<!-- A grid to materialize our symbol positioning -->
<path d="M0,10 h80 M10,0 v20 M25,0 v20 M40,0 v20 M55,0 v20 M70,0 v20"
fill="none" stroke="pink" />
<!-- All instances of our symbol -->
<use href="#myDot" x="5" y="5" style="opacity:1.0" />
<use href="#myDot" x="20" y="5" style="opacity:0.8" />
<use href="#myDot" x="35" y="5" style="opacity:0.6" />
<use href="#myDot" x="50" y="5" style="opacity:0.4" />
<use href="#myDot" x="65" y="5" style="opacity:0.2" />
</svg>
</div>
The SVG <text> element draws a graphics element consisting of text. It's possible to apply a gradient, pattern, clipping path, mask, or filter to "text", like any other SVG graphics element.
If text is included in SVG not inside of a "text" element, it is not rendered. This is different than being hidden by default, as setting the display property won't show the text.
Specific attributes include:
x: the x coordinate of the starting point of the text baseline. Value type: "length"|"percentage"; default value: 0; animatable: yes
y: the y coordinate of the starting point of the text baseline. Value type: "length"|"percentage"; default value: 0; animatable: yes
dx: shifts the text position horizontally from a previous text element. Value type: "length"|"percentage"; default value: none; animatable: yes
dy: shifts the text position vertically from a previous text element. Value type: "length"|"percentage"; default value: none; animatable: yes
rotate: rotates orientation of each individual glyph. Can rotate glyphs individually. Value type: "list-of-number"; default value: none; animatable: yes
lengthAdjust: how the text is stretched or compressed to fit the width defined by the textLength attribute. Value type: spacing|spacingAndGlyphs; default value: spacing; animatable: yes
textLength: a width that the text should be scaled to fit. Value type: "length"|"percentage"; default value: none; animatable: yes
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 240 80">
<style>
.small { font: italic 13px sans-serif; }
.heavy { font: bold 30px sans-serif; }
/* Note that the color of the text is set with the *
* fill property, the color property is for HTML only */
.Rrrrr { font: italic 40px serif; fill: red; }
</style>
<text x="20" y="35" class="small">My</text>
<text x="40" y="35" class="heavy">cat</text>
<text x="55" y="55" class="small">is</text>
<text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>
</div>
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.
Specific attributes include:
href: the URL to the path or basic shape on which to render the text. If the path attribute is set, href has no effect. Value type: "URL" ; default value: none; animatable: yes
lengthAdjust: where length adjustment should be applied to the text: the space between glyphs, or both the space and the glyphs themselves. Value type: spacing|spacingAndGlyphs; default value: spacing; animatable: yes
method: which method to render individual glyphs along the path. Value type: align|stretch ; default value: align; animatable: yes
path: the path on which the text should be rendered. Value type: "path_data" ; default value: none; animatable: yes
side: which side of the path the text should be rendered. Value type: left|right ; default value: left; animatable: yes
spacing: how space between glyphs should be handled. Value type: auto|exact ; default value: exact; aAnimatable: yes
startOffset: how far the beginning of the text should be offset from the beginning of the path. Value type: "length"|"percentage"|"number" ; default value: 0; animatable: yes
textLength: the width of the space into which the text will render. Value type: "length"|"percentage"|"number" ; default value: auto; animatable: yes
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 100 100">
<!-- to hide the path, it is usually wrapped in a element -->
<!-- -->
<path id="MyPath" fill="none" stroke="red"
d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />
<!-- -->
<text>
<textPath href="#MyPath">Quick brown fox jumps over the lazy dog.</textPath>
</text>
</svg>
</div>
The <title> element provides an accessible, short-text description of any SVG container element or graphics element.
Text in a "title" element is not rendered as part of the graphic, but browsers usually display it as a tooltip. If an element can be described by visible text, it is recommended to reference that text with an "aria-labelledby" attribute rather than using the "title" element.
No specific attributes
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 20 10">
<circle cx="5" cy="5" r="4">
<title>I'm a circle</title>
</circle>
<rect x="11" y="1" width="8" height="8">
<title>I'm a square</title>
</rect>
</svg>
</div>
The SVG <tspan> element defines a subtext within a "text" element or another "tspan" element. It allows for adjustment of the style and/or position of that subtext as needed.
Specific attributes include:
x: the x coordinate of the starting point of the text baseline. Value type: "length"|"percentage"; default value: none; animatable: yes
y: the y coordinate of the starting point of the text baseline. Value type: "length"|"percentage" ; default value: none; animatable: yes
dx: shifts the text position horizontally from a previous text element. Value type: "length"|"percentage"; default value: none; animatable: yes
dy: shifts the text position vertically from a previous text element. Value type: "length"|"percentage"; default value: none; animatable: yes
rotate: rotates orientation of each individual glyph. Can rotate glyphs individually. Value type: "list-of-number; default value: none; animatable: yes
lengthAdjust: how the text is stretched or compressed to fit the width defined by the textLength attribute. Value type: spacing|spacingAndGlyphs; default value: spacing; animatable: yes
textLength: a width that the text should be scaled to fit. Value type: "length"|"percentage"; default value: none; animatable: yes
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 240 40">
<style>
text { font: italic 12px serif; }
tspan { font: bold 10px sans-serif; fill: red; }
</style>
<text x="10" y="30" class="small">
You are
<tspan>not</tspan>
a banana!
</text>
</svg>
</div>
The <use> element takes nodes from within the SVG document, and duplicates them somewhere else. The effect is the same as if the nodes were deeply cloned into a non-exposed DOM, then pasted where the use element is, much like cloned template elements in HTML5.
Most attributes on "use" do not override those already on the element referenced by "use". (This differs from how CSS style attributes override those set 'earlier' in the cascade). Only the attributes "x", "y", "width", "height" and "href" on the 'usse' element will override those set on the referenced element. However, any other attributes not set on the referenced element will be applied to the use element.
Since the cloned nodes are not exposed, care must be taken when using CSS to style a "use" element and its cloned descendants. CSS properties are not guaranteed to be inherited by the cloned DOM unless you explicitly request them using CSS inheritance.
For security reasons, browsers may apply the same-origin policy on "use" elements and may refuse to load a cross-origin URL in the href attribute. There is currently no defined way to set a cross-origin policy for "use" elements.
Specific attributes include:
href: the URL to an element/fragment that needs to be duplicated. Value type: "URL" ; default value: none; animatable: yes
xlink:href: deprecated: this feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
An <IRI> reference to an element/fragment that needs to be duplicated. Value type: "IRI"; default value: none; animatable: yes
x: the x coordinate of the use element. Value type: "coordinate"; default value: 0; animatable: yes
y: the y coordinate of the use element. Value type: "coordinate"; default value: 0; animatable: yes
width: the width of the use element. Value type: "length"; default value: 0; animatable: yes
height: the height of the use element. Value type: "length"; default value: 0; animatable: yes
codes:
<div style="margin-left: 4vw;">
<svg viewBox="0 0 30 10">
<circle id="myCircle" cx="5" cy="5" r="4" stroke="blue"/>
<use href="#myCircle" x="10" fill="blue"/>
<use href="#myCircle" x="20" fill="white" stroke="red"/>
<!--
stroke="red" will be ignored here, as stroke was already set on myCircle.
Most attributes (except for x, y, width, height and (xlink:)href)
do not override those set in the ancestor.
That's why the circles have different x positions, but the same stroke value.
-->
</svg>
</div>
A view is a defined way to view the image, like a zoom level or a detail view.
Specific attributes include:
viewBox: this attribute defines the bound of the SVG viewport for the current symbol. Value type: "list-of-numbers" ; default value: none; animatable: yes
preserveAspectRatio:
preserveAspectRatio: this attribute defines how the svg fragment must be deformed if it is embedded in a container with a different aspect ratio. Value type: (none| xMinYMin| xMidYMin| xMaxYMin| xMinYMid| xMidYMid| xMaxYMid| xMinYMax| xMidYMax| xMaxYMax) (meet|slice)? ; default value: xMidYMid meet; animatable: yes
zoomAndPan: (deprecated) specifies whether the SVG document can be magnified and panned. Magnification in this context means the effect of a supplemental scale and translate transformation on the outermost SVG document fragment. Panning represents a translation (i.e., a shift) transformation on an SVG document fragment in response to a user interface action.
viewTarget: (deprecated) indicates the target object associated with the view.
codes:
<svg viewBox="0 0 300 100" width="300" height="100">
<view id="one" viewBox="0 0 100 100" />
<circle cx="50" cy="50" r="40" fill="red" />
<view id="two" viewBox="100 0 100 100" />
<circle cx="150" cy="50" r="40" fill="green" />
<view id="three" viewBox="200 0 100 100" />
<circle cx="250" cy="50" r="40" fill="blue" />
</svg>