DONT ADD ANYTHING HERE!

  1. g
    1. The g SVG element is a container used to group other SVG elements
    2. Transformations applied to the g element are performed on its child elements
    3. Its attributes are inherited by its children
    4. It can also group multiple elements to be referenced later with the use element
  2. use
    1. The use element takes nodes from within the SVG document, and duplicates them somewhere else

Example

Code

HTML

<object 
    data="../svg/svg_example_eight_group_use.svg" 
    type="image/svg+xml">
</object>

SVG

// svg_example_eight_group_use.svg

<svg 
  version="1.1"
  width="300"
  height="150"
  xmlns="http://www.w3.org/2000/svg">

  <rect width="300" height="150" 
           rx="20" 
           fill="lightgoldenrodyellow"/>

  <g id="mydiag" stroke-width="5">
    <rect  x="10" y="10" 
           rx="10" ry="10" 
           height="50" width="100" 
           fill="red"/>
    <circle cx="40" cy="40" r="25" 
            fill="white" 
            stroke="green" />
    <circle cx="60" cy="60" r="25" 
            fill="lightblue" 
            stroke="blue" />
  </g>

  <use href="#mydiag" x="180" y="0" fill="blue"/>
  <use href="#mydiag" x="90" y="60" fill="blue"/>

</svg>

References

MDN: svg g
MDN: use