Group elements in svg output ?

[BobT]

Using fpvectorial, is it possible to generate an svg document / file with grouped elements ? My immediate goal is to be able to group simple rectangle shapes each with their own text element as a label, but a general solution capable of deeper levels of groupiing would have other uses as well.

[wp]

There is an AddLayer command which, for svg, is written as a new <g> node, i.e. groups the added elements. You must call SetCurrentLayer to activate the new layer, or combine both in AddLayerAndSetAsCurrent. ClearLayerselection returns to the first layer.

The following code

Code: Pascal  [Select][+][-]

1. program fpvwritegroup;
2.  
3. {$mode objfpc}{$H+}
4.  
5. uses
6.   fpimage, fpCanvas,
7.   fpvectorial, svgvectorialwriter, fpvutils, fpvectorialpkg;
8.  
9. const
10.   cFormat = vfSVG;
11.   cExtension = '.svg';
12. var
13.   Vec: TvVectorialDocument;
14.   Page: TvVectorialPage;
15. begin
16.   Vec := TvVectorialDocument.Create;
17.   try
18.     // All documents are 10cm x 10cm
19.     Vec.Width := 100;
20.     Vec.Height := 100;
21.     Page := Vec.AddPage();
22.  
23.     Page.Clear;
24.  
25.     with Page.AddCircle(0, 0, 10) do
26.     begin
27.       Brush.Color := colYellow;
28.       Brush.Style := bsSolid;
29.     end;
30.  
31.     Page.AddLayerAndSetAsCurrent('g1');
32.     with Page.AddCircle(50, 50, 10) do
33.     begin
34.       Brush.Color := colRed;
35.       Brush.Style := bsSolid;
36.     end;
37.     with Page.AddCircle(55, 50, 10) do
38.     begin
39.       Brush.Color := colGreen;
40.       Brush.Style := bsSolid;
41.     end;
42.  
43.     Page.ClearLayerSelection;
44.     with Page.AddCircle(100, 100, 10) do
45.     begin
46.       Brush.Color := colBlue;
47.       Brush.Style := bsSolid;
48.     end;
49.  
50.     Vec.WriteToFile('layer_demo' + cExtension, cFormat);
51.  
52.   finally
53.     Vec.Free;
54.   end;
55. end.      

creates a file showing the <g> nodes as expected:

  <g id="layer1">
  <circle cx="0" cy="354.32999999999998" r="35.433" style="stroke:#000000; stroke-width:1px; stroke-linecap:butt; stroke-linejoin:miter; stroke-opacity:1; fill:#FFFF00;" />
  <g id="layer2">
  <circle cx="177.16499999999999" cy="177.16499999999999" r="35.433" style="stroke:#000000; stroke-width:1px; stroke-linecap:butt; stroke-linejoin:miter; stroke-opacity:1; fill:#FF0000;" />
  <circle cx="194.88149999999999" cy="177.16499999999999" r="35.433" style="stroke:#000000; stroke-width:1px; stroke-linecap:butt; stroke-linejoin:miter; stroke-opacity:1; fill:#00FF00;" />
  </g>
  <circle cx="354.32999999999998" cy="0" r="35.433" style="stroke:#000000; stroke-width:1px; stroke-linecap:butt; stroke-linejoin:miter; stroke-opacity:1; fill:#0000FF;" />
  </g>

[BobT]

Thanks wp. I'd fixed my ideas around the Inkscape 'layers' concept and missed that the fpvectorial 'layer' is +-what Inkscape calls a group.