Menu
I know that there are two ways in SVG to group shapes together and position them as a collection: nesting <svg> tag and <g> grouping. However, I don't see much difference between them. For example, the following two pieces of code produce exactly the same result:
Using group (jsfiddle): https://jsfiddle.net/8q4on01m/5/
<svg width="5000" height="5000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g transform="translate(200 200)">
<rect x="0" y="0" height="100" width="100" style="fill: yellow"></rect>
<rect x="0" y="0" height="100" width="100" style="fill: green" transform="rotate(45) translate(200 100)"></rect>
<rect x="0" y="0" height="100" width="100" style="fill: red" transform="translate(200 100)"></rect>
</g>
</svg>
Using <svg> (jsfiddle):
<svg width="5000" height="5000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg x="200" y="200">
<rect x="0" y="0" height="100" width="100" style="fill: yellow"></rect>
<rect x="0" y="0" height="100" width="100" style="fill: green" transform="rotate(45) translate(200 100)"></rect>
<rect x="0" y="0" height="100" width="100" style="fill: red" transform="translate(200 100)"></rect>
</svg>
</svg>
Which one is preferred/recommended? What are the pros and cons, important features of each? I am especially interested in handling bubbling click events issues.
526
The SVG format allows for the nesting of SVG graphics. It is possible for an “<svg>” elements, to be placed within another “<svg>” element.
<g> The <g> SVG element is a container used to group other SVG elements. Transformations applied to the <g> element are performed on its child elements, and its attributes are inherited by its children. It can also group multiple elements to be referenced later with the <use> element.
The svg element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document. Note: The xmlns attribute is only required on the outermost svg element of SVG documents.
The viewBox is an attribute of the SVG element in HTML. It is used to scale the SVG element that means we can set the coordinates as well as width and height. Syntax: viewBox = "min-x min-y width height" Attribute Values: min-x: It is used to set the horizontal axis.
In your two examples, there is no real difference between <svg> and <g>.
However <svg> can do many things that <g> cannot. Groups are just a passive grouping of elements, and all they can really do is specify some properties that their children all inherit.
Inner <svg> elements establish a new viewport. So you can do everything that the outermost <svg> can (actually more).
For example, by adding width, height and viewBox attributes to the inner SVG, you can scale its contents.
<svg width="5000" height="5000" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<svg x="200" y="200" width="100" height="100" viewBox="0 0 300 300">
<rect x="0" y="0" height="100" width="100" style="fill: yellow"></rect>
<rect x="0" y="0" height="100" width="100" style="fill: green" transform="rotate(45) translate(200 100)"></rect>
<rect x="0" y="0" height="100" width="100" style="fill: red" transform="translate(200 100)"></rect>
</svg>
</svg>This is not a very exiting example. Instead, have a look at this one from the SVG specification.
120
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
