SVG

Container Elements

There are four main elements in SVG that are used to define, structure and reference SVG code within the document. The elements are:

• g - grouping elements. With this helper, you can assign properties to a complete set of elements. Actually, that's its only purpose. Thus, class or id can be given to the group to style or animate it in the same way for all group elements.
• defs - contains items defined for later reuse. One of the main use cases is defining patterns like gradients, for example, and then using those gradients as stroke fills on other SVG elements.
• use - the element you use to reference any element defined elsewhere in the document.
• symbol - defines template to be used by use element. It is similar to the group element, but it is only displayed when it is used. It may have its own viewBox attribute which allows it to scale-to-fit inside any viewport it is rendered in. When we use it, we just have to specify the required width and location.

For more details see Structuring, Grouping, and Referencing in SVG.

g - Grouping

The group element is used for logically grouping together sets of related graphical elements.

Example:

<svg width="130" height="70">
    <g fill="#d30b0b">
        <rect x="0" y="0" width="50" height="50" />
        <rect x="60" y="0" width="50" height="50" />
    </g>
</svg>

defs, use

The <use> element lets you reuse existing elements, giving you a similar functionality to the copy-paste functionality in a graphics editor.

The <defs> element is used to define elements without directly rendering them [..] and that element will serve as a template for future use.

To learn how to style <use> read Styling SVG <use> Content with CSS.

Example:

<svg width="200" height="100" viewBox="0 0 100 50">
    <defs>
        <rect id="rect" width="20" height="20" fill="#d30b0b"/>
    </defs>
    <use x="5"  y="5"  xlink:href="#rect"/>
    <use x="30" y="30" xlink:href="#rect"/>
</svg>  

Example:

<svg width="200" height="150" style="border: 1px solid #d30b0b;>
    <rect id="shape" x="20" y="10" width="50" height="50" fill="#d30b0b"/>
    <use xlink:href="#shape" x="50" y="50" />
</svg> 

Example:

Green star code:

<svg width="200" height="200" viewBox='-256 -256 512 512'>
    <style>
        use {
            fill: #74e851;
            animation: ani 4s linear infinite;
        }

        @keyframes ani {
            0% {
                transform: scale(0);
            }
            25%,
            100% {
                transform: scale(1);
            }
        }
    </style>
    <defs>
        <polygon id='star' points='250,0 64,64 0,250 -64,64 -250,0 -64,-64 0,-250 64,-64' />
    </defs>
    <g>
        <use xlink:href='#star' />
    </g>
</svg>

Symbol

Example:

<svg width="96" height="96"">

    <symbol viewBox="0 0 24 24" id="heart">
        <path fill="#d30b0b"
        d="M17,0c-1.9,0-3.7,0.8-5,2.1C10.7,0.8,8.9,0,7,0C3.1,0,0,3.1,0,7c0,6.4,10.9,15.4,11.4,
           15.8 c0.2,0.2,0.4,0.2,0.6,0.2s0.4-0.1,0.6-0.2C13.1,22.4,24,13.4,24,7C24,3.1,20.9,0,17,0z" />

    </symbol>

    <use xlink:href="#heart" width="96" />
</svg>

<svg width="100" height="100">
   <use xlink:href="#heart" width="48" />
</svg>

<svg width="200" height="300">
   <use xlink:href="#heart" />
</svg>

SVG symbol may be also defined in a separate svg element. Common usage is to define SVG sprite by defining multiple symbols inside a single svg file and then referencing the appropriate symbol in the html. For example, you can create svg sprite file by using Icomoon. Usage example:

<svg class="icon icon-cross"><use xlink:href="symbol-defs.svg#icon-cross"></use></svg>