Clone and Group

Used to either Clone or Group svg related elements

• turned_in_notRelated Tags
  • <defs>
  • <g>
  • <symbol>
  • <use>

<defs>

Used to store graphical, gradient, pattern, filter, marker, mask and clip related tags that will be used at a later time and are not rendered directly

• To access graphical related tags we use <use> tag and for others we have style specific properties that can be used

Syntax

library_books<defs>
    <!--define your elements here-->
</defs>

library_books<svg height="100" width="200">
 <defs>
   <line id="line1" x1="10" y1="50" x2="180" y2="50"/>
 </defs>
 <use style="stroke:red;" href="#line1"/>
</svg>

<g>

Used to group svg elements to set default attributes or properties

Syntax

library_books<g>
    <!--group your elements here-->
</g>

library_books<svg height="100" width="200">
  <g style="stroke:yellow;fill:blue;stroke-width:5">
    <line x1="80" y1="50" x2="120" y2="50"/>
    <circle cx="50" cy="50" r="30"/>
    <circle cx="150" cy="50" r="30" fill="#ff1493"/>
  </g>
</svg>

<symbol>

Used to create symbol using graphical related tags that will be used at a later time and are not rendered directly

• To access <symbol> tag we use <use> tag
• One more advantage is that we can control any graphical shapes in it within specific width and height

Syntax

library_books<symbol id="anyId"
        width="length" height="length"
        x="point" y="point"
        preserveAspectRatio="none|(xMinYMin|xMidYMin|xMaxYMin|xMinYMid|xMidYMid|xMaxYMid|xMinYMax|xMidYMax|xMaxYMax  meet|slice)"
        viewBox="minX minY width height">
    <!--Draw your symbol using SVG elements here-->
</symbol>

• label_outlinesymbol Attributes
  • id - To reference the symbol
  • height - The height of symbol
  • width - The width of symbol
  • x, y - To set the default x and y coordinate of the symbol
  • viewBox - Specify which portion of your coordinates are visible within the specified width and height
  • preserveAspectRatio - specify how an element with different aspect ratio provided by viewBox must fit into a viewport

library_books<svg height="100" width="200">
<!--define a symbol -->
<symbol id="symbol1" width="50" height="50" viewBox="0 0 2 2">
  <circle cx="1" cy="1" r="0.9"/>
  <circle cx="1" cy="1" r="0.5" fill="yellow"/>
</symbol>
 <line x1="10" y1="50" x2="180" y2="50" stroke="red"/>
 <use x="30" y="25" href="#symbol1"/>
 <use x="110" y="25" href="#symbol1"/>
</svg>

<use>

Used to clone any graphical tags whether within defined tags or not and use somewhere else

• You can clone any graphical tags or <g>, <symbol>
• You can only change the properties which are not set on the original tag

Syntax

library_books<use x="distancePoint" y="distancePoint"
     width="length" height="length"
     href="specificReferenceId"/>

• label_outlineuse Attributes
  • x, y - The distance from original x, y coordinate of the use element
  • width - The width of the use element
  • height - The height of the use element
  • href - Url of element to be cloned

library_books<svg height="100" width="200">
  <circle id="circle" cx="50" cy="50" r="20" style="stroke:yellow;stroke-width:4"/>
  <use href="#circle" x="50" y="20" fill="#ff1493"/>
  <use href="#circle" x="100" fill="blue" stroke="red"/>
</svg>