Log In    |    Knowledge Base    |    4D Home
Tech Tip: How do SVG Groups work?
Published On: November 5, 2009
Your current browser may not allow you to download the asset. We recommend Mozilla Firefox or Google Chrome.
Log In

The Tech Tip SVG Groups, SVG_SET_TRANSFORM_TRANSLATE, and animation includes one possible use of Groups in SVG images. Groups can be quite useful in many different ways.

SVG groups can be used to set attributes for the entire group such as:

  • Set shared attributes within a group. For example the Fill color or Stroke width could be set.

  • Re-size a group independent of the sizing of the entire image.

  • Move a group around in the image.

  • Show and hide groups.

  • Flip and translate group appearances (creating mirror or skew effects).

  • Create re-usable objects. You only need to make the object once and then you can reference it and re-use it throughout the image.

Much more can be done with groups. To use a group with the 4D SVG component, simply create the group with the SVG_New_group command. This command returns a reference and you can then pass that reference as the parent SVG Reference to elements which should be contained in that group. The following sample code shows a group containing a series of lines:

$group:=SVG_New_group ($SVG)
  `Assign a color to the group elements
SVG_SET_STROKE_BRUSH ($group; "firebrick")
$line1:= SVG_New_line ($group; 100; 300; 300; 100; ""; 5)
$line1:= SVG_New_line ($group; 300; 300; 500; 100; ""; 10)
$line1:= SVG_New_line ($group; 500; 300; 700; 100; ""; 15)
$line1:= SVG_New_line ($group; 700; 300; 900; 100; ""; 20)
$line1:= SVG_New_line ($group; 900; 300; 1100; 100; ""; 25)

For more information on groups see the SVG Specification Groups section.