Clone and Group

Next ❯Mask & Clip

Used to either Clone or Group svg related elements

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


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


    <!--define your elements here-->
<svg height="100" width="200">
   <line id="line1" x1="10" y1="50" x2="180" y2="50"/>
 <use style="stroke:red;" href="#line1"/>


Used to group svg elements to set default attributes or properties


    <!--group your elements here-->
<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"/>


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


<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-->
  • 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
?(x, y)widthheight
<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"/>
 <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"/>


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


<use x="distancePoint" y="distancePoint"
     width="length" height="length"
  • 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
<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"/>

  • Mask & Clip
❮ Prev Marker
Next ❯Mask & Clip
TryOut Examples"Learn to Explore..!"

TryOut Editor