5.2 Document structure - grouping and referencing
5.3.1 The <g> element for grouping
<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg">
<title>Grouped drawing</title>
<!-- description -->
<desc>Stick-figure drawings of a house and people</desc>
<g id="house" style="fill:none; stroke:black">
<desc>House with door</desc>
<rect x="10" y="50" width="60" height="80"/>
<polyline points="10 50, 40 10, 70 50"/>
<polyline points="30 130, 30 80, 60 80, 60 130"/>
</g>
<g id="man" style="fill:none; stroke:black">
<desc>Male human</desc>
<circle cx="100" cy="70" r="15"/>
<line x1="100" y1="85" x2="100" y2="105" />
<polyline points="90 90, 100 95, 110 90"/>
<polyline points="90 130, 100 105, 110 130"/>
</g>
<g id="woman" style="fill:none; stroke:black">
<desc>Female human</desc>
<circle cx="150" cy="70" r="15"/>
<line x1="150" y1="85" x2="150" y2="105" />
<polyline points="140 90, 150 100, 160 90"/>
<polyline points="140 130, 150 105, 160 130"/>
<polygon points="150 105, 170 115, 130, 115" fill="white"/>
</g>
</svg>
5.5.2 The <use> element for copying groups
Once you have defined a group of graphic objects, you can display them again with the use tag.
To specify the group you wish to reuse, give its URI in an xlink:href attribute, and specify the x and y location where the group's (0, 0) point should be moved to.
<svg width="240" height="240" viewBox="0 0 240 240" xmlns="http://www.w3.org/2000/svg">
<title>Use groups</title>
<!-- the same positions -->
<use xlink:href="#woman" x="0" y="0"/>
<use xlink:href="#man" x="0" y="0"/>
<use xlink:href="#house" x="0" y="0"/>
<!-- the moved positions -->
<use xlink:href="#woman" x="-100" y="100"/>
<use xlink:href="#man" x="0" y="100"/>
<use xlink:href="#house" x="150" y="100"/>
</svg>
5.2.3 The defs element for defining groups as templates
By putting the grouped objects between the beginning and ending defs tags, you instruct SVG to define them without displaying them.
<svg width="300" height="200" viewBox="0 0 300 200" xmlns="http://www.w3.org/2000/svg">
<title>Grouped drawing</title>
<!-- description -->
<desc>Stick-figure drawings of a house and people</desc>
<defs>
<g id="house1" style=" stroke:black">
<desc>House with door</desc>
<!-- base -->
<rect x="10" y="40" width="60" height="50"/>
<!-- roof -->
<polyline points="10 40, 40 10, 70 40"/>
<!-- door -->
<polyline points="40 90, 40 60, 60 60, 60 90"/>
</g>
<g id="man1" style="fill:none; stroke:black">
<desc>Male human</desc>
<!-- head -->
<circle cx="100" cy="40" r="10"/>
<!-- trunk -->
<line x1="100" y1="50" x2="100" y2="80" />
<!-- hands -->
<polyline points="90 50, 100 60, 110 50"/>
<!-- legs -->
<polyline points="90 90, 100 70, 110 90"/>
</g>
<g id="woman1" style="fill:none; stroke:black">
<desc>Female human</desc>
<!-- head -->
<circle cx="130" cy="40" r="10"/>
<!-- trunk -->
<line x1="130" y1="50" x2="130" y2="70" />
<!-- hands -->
<polyline points="120 50, 130 60, 140 50"/>
<!-- skirt -->
<polyline points="120 80, 130 70, 140 80, 120 80"/>
<!-- legs -->
<polyline points="120 90, 125 80, 135 80, 140 90"/>
</g>
<g id="couple">
<desc>Male and female human</desc>
<use xlink:href="#man1" x="0" y="0"/>
<use xlink:href="#woman1" x="0" y="0"/>
</g>
</defs>
<!-- make use of the defined groups -->
<use xlink:href="#house1" x="0" y="0" style="fill: #cfc;" />
<use xlink:href="#couple" x="0" y="0"/>
<use xlink:href="#house1" x="140" y="0" style="fill: #99f;" />
<use xlink:href="#couple" x="140" y="0" />
<use xlink:href="#woman1" x="-110" y="100" />
<use xlink:href="#man1" x="-50" y="100" />
<use xlink:href="#house1" x="70" y="100" style="fill: #c00;" />
</svg>5.2.4. Linking with use
You can use linked objects with xlink:href.
The use element is not restricted to using objects from the same file in which it occurs;
the xlink:href attribute may specify any valid file or URI. However
you cannot use use to reference an external SVG file directly via HTTP URL without a fragment identifier (ID).
<svg width="100" height="100" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<use xlink:href="identity.svg#company_logo" x="10" y="10" />
<image href="https://www.svgrepo.com/show/530641/telephone.svg" x="30" y="30" width="40" height="40" />
</svg>
<svg xmlns="http://www.w3.org/2000/svg"
width="100px" height="50px" viewBox="0 0 100 100"
preserveAspectRatio="xMinYMin meet">
<g id="company_mascot">
<!-- drawing of company mascot -->
</g>
<g id="company_logo" style="stroke: none;">
<rect x="0" y="0" width="20" height="20"
style="stroke-width:0.5; stroke:black; fill:#c9c; fill-opacity:0.5;"/>
<polygon points="0 10, 10 0, 20 10, 10 20"
style="stroke-width:0.5; stroke:black; fill: #696; fill-opacity:0.5;" />
</g>
<g id="partner_logo">
<!-- drawing of company partner's logo -->
</g> </svg>
5.2.5 The symbol element for grouping elements
The symbol element provides another way of grouping elements. Unlike the g
element, a symbol is never displayed, so you don't have to enclose it in a defs
specification. However, it is customary to do so, since a symbol really is something
you're defining for later use. Additionally, symbols can specify viewBox and
preserveAspectRatio attributes, so that a symbol can fit into the viewport established
by the use element.
Groups vs symbols
The example below shows that the width and height are ignored for a
simple group (the top two octagons), but are used when displaying a symbol.
<svg width="200px" height="200px" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<title>Symbols vs. groups</title>
<desc>Use</desc>
<defs>
<g id="octagon" style="stroke: black;">
<desc>Octagon as group</desc>
<polygon points="36 25, 25 36, 11 36, 0 25, 0 11, 11 0, 25 0, 36 11"/>
</g>
<symbol id="sym-octagon" style="stroke: black;" preserveAspectRatio="xMidYMid slice" viewBox="0 0 40 40">
<desc>Octagon as symbol</desc>
<polygon points="36 25, 25 36, 11 36, 0 25,0 11, 11 0, 25 0, 36 11"/>
</symbol>
</defs>
<use xlink:href="#octagon" x="40" y="40" width="30" height="30" style="fill: #c00;"/>
<use xlink:href="#octagon" x="80" y="40" width="40" height="60" style="fill: #cc0;"/>
<use xlink:href="#sym-octagon" x="40" y="80" width="50" height="50" style="fill: #cfc;"/>
<use xlink:href="#sym-octagon" x="100" y="80" width="40" height="60" style="fill: #699;"/>
</svg>5.2.6 The image element
While use lets you re-use a portion of an SVG file, the image element includes an
entire SVG or raster file. If you are including an SVG file, the x, y, width, and height attributes establish the viewport in which the referenced file will be drawn; if you're
including a raster file, it will be scaled to fit the rectangle that the attributes specify.
You can currently include either JPEG or PNG raster files.
<svg width="100px" height="100px" viewBox="0 0 100 100">
<ellipse cx="50" cy="50" rx="40" ry="30" style="fill: #999999;"/>
<ellipse cx="52" cy="52" rx="40" ry="30" style="fill: #99ee00;"/>
<image href="https://www.svgrepo.com/show/530641/telephone.svg" x="20" y="20" width="60"height="60" />
</svg>