revision:
used to store graphical objects that will be used at a later time. Objects created inside a <defs> element are not rendered directly. To display them you have to reference them (with a <use> element for example).
codes:
<svg viewBox="0 0 10 7">
<!-- Some graphical objects to use -->
<defs>
<circle id="myCircle" cx="0" cy="0" r="3" />
<linearGradient id="myGradient" gradientTransform="rotate(90)">
<stop offset="30%" stop-color="gold" />
<stop offset="90%" stop-color="green" />
</linearGradient>
</defs>
<!-- using my graphical objects -->
<use x="5" y="3" href="#myCircle" fill="url('#myGradient')" />
</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>
defines anew 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>
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>
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>