SVG g Element

by Online Tutorials Library July 14, 2022

SVG g Element

The SVG <g> element groups SVG shapes together. When the SVG shapes are grouped then you can transform the whole group of shapes. This is the advantage of <g> element over nested <svg> element.

Example

  <!DOCTYPE html>  <html>  <body>    <svg xmlns=”http://www.tutoraspire.org/2000/svg”      xmlns:xlink=”http://www.tutoraspire.org/1999/xlink”>            <g>        <line x1=”10″ y1=”10″ x2=”90″ y2=”10″            style=”stroke:green;”/>          <rect x=”10″ y=”25″ height=”45″ width=”80″            style=”stroke: black; fill: red; stroke-width:2″/>          <text x=”10″ y=”100″ style=”stroke: blue; fill:orange”>          Text grouped with shapes</text>      </g>    </svg>    </body>  </html>  

Test it Now

Next TopicSVG defs Element

SVG g Element

SVG g Element

Example

SVG Animation

Data Window in Tableau | Data Types in Tableau

You may also like