revision:
creates a hyperlink to other web pages, files, locations in the same page, email addresses, or any other URL. It is very similar to HTML's <a> element.
SVG's <a> element is a container, which means you can create a link around text (like in HTML), but also around any shape.
attributes: download, href, hreflang, ping, referrerpolicy, rel, target, type, xlink:href
codes:
<svg viewBox="0 0 100 80">
<!-- A link around a shape -->
<a href="https://lwitters.com">
<circle cx="40" cy="30" r="25"/>
</a>
<!-- A link around a text -->
<a href="https://lwitters.com">
<text x="30" y="70" text-anchor="middle"> <circle></text>
</a>
</svg>
used to draw circles based on a center point and a radius.
attributes: cx, cy, r, pathlength
starting with SVG2, cx, cy, and r are "Geometry Properties", meaning those attributes can also be used as CSS properties for that element.
codes:
<svg viewBox="0 0 100 50">
<circle cx="40" cy="20" r="20"/>
</svg>
used to create ellipses based on a center coordinate, and both their x and y radius.
attributes: cx, cy, rx, ry, pathlength
starting with SVG2, cx, cy, rx and ry are "Geometry Properties", meaning those attributes can also be used as CSS properties for that element.
codes:
<svg height="180" width="500">
<ellipse cx="200" cy="80" rx="150" ry="70" style="fill:yellow;stroke:purple;stroke-width:2" />
</svg>
includes elements from a different XML namespace. In the context of a browser, it is most likely (X)HTML.
attributes: height, width, x, y
codes:
<svg viewBox="0 0 200 200">
<style>
div .html {color: yellow; font: 18px serif; height: 100%; overflow: auto; }
</style>
<polygon points="5,5 195,10 185,185 10,195" />
<!-- Common use case: embed HTML text into SVG -->
<foreignObject x="20" y="20" width="160" height="160">
<!--In the context of SVG embedded in an HTML document, the XHTML namespace
could be omitted, but it is mandatory in the context of an SVG document-->
<div class="html">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed mollis mollis mi ut ultricies. Nullam magna ipsum,
porta vel dui convallis, rutrum imperdiet eros. Aliquam
erat volutpat.
</div>
</foreignObject>
</svg>
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.
attributes: only includes global attributes.
codes:
<svg viewBox="0 0 100 50">
<!-- Using g to inherit presentation attributes -->
<g fill="white" stroke="green" stroke-width="3">
<circle cx="20" cy="20" r="15" />
<circle cx="30" cy="30" r="15" />
</g>
</svg>
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>.
attributes: x, y, width, height, href, xlink:htrf, preserveAspectRatio, crossorigin
codes:
<svg width="200" height="200">
<image href="smiley.png" height="200" width="200"/>
</svg>
used to create a line connecting two points.
attributes: x1, x2, y1, y2, pathlength
codes:
<svg viewBox="0 0 100 60">
<line x1="0" y1="60" x2="90" y2="10" stroke="blue"/>
</svg>
the <path> element is used to define a path. It is the generic element to define a shape. All the basic shapes can be created with a path element.
The following commands are available for path data:
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
All of the commands above can also be expressed with lower letters. Capital letters means absolutely positioned, lower cases means relatively positioned.
attributes: d, pathlength
codes:
<svg viewBox="0 0 100 90">
<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>
defines a closed shape consisting of a set of connected straight line segments. The last point is connected to the first point.
attributes: points, pathlength
codes:
<svg viewBox="0 0 200 100">
<!-- Example of a polygon with the default fill -->
<polygon points="0,100 50,25 50,75 100,0" />
<!-- Example of the same polygon shape with stroke and no fill -->
<polygon points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>
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.
attributes: points, pathlength
codes:
<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="darkgreen" />
</svg>
draws rectangles, defined by their position, width, and height. The rectangles may have their corners rounded.
attributes: x, y, width, height, rx, ry, pathlength
starting with SVG2, x, y, width, height, rx and ry are "Geometry Properties", meaning those attributes can also be used as CSS properties for that element.
codes:
<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>
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.
attributes: height, preserveAspectRatio, viewBox, width, x, y
codes:
<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>
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.
attributes: global attributes
codes:
<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>
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.
attributes: height, preserveAspectRatio, refX, refY, viewBox, width, x, y
codes:
<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>
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.
attributes: x, y, dx, dy, rotate, lengthAdjust, textLength
codes:
<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>
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.
attributes: href, lengthAdjust, method, path, side, spacing, startOffset, textLengh
codes:
<svg viewBox="0 0 100 100">
<!-- to hide the path, it is usually wrapped in a <defs> element -->
<!-- <defs> -->
<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" />
<!-- </defs> -->
<text>
<textPath href="#MyPath"> Quick brown fox jumps over the lazy dog.</textPath>
</text>
</svg>
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.
attributes: x, y, dx, dy, rotate, lengthAdjust, textLength
codes:
<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>
takes nodes from within the SVG document, and duplicates them somewhere else.
Most attributes on "use" do not override those already on the element referenced by use. Only the attributes x, y, width, height and href on the use 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.
attributes: href, xlink:href, x, y, width, height
codes:
<svg viewBox="0 0 30 10">
<circle id="myCircle_a" cx="5" cy="5" r="4" stroke="blue"/>
<use href="#myCircle_a" x="10" fill="red"/>
<use href="#myCircle_a" 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>