Creating optimised SVG in Inkscape results in elements grouped oddly

This is more an informative post about creating SVGs in Inkscape… It started off as a question but then turned into an answer as I worked through it.

I have quite a complex SVG for swing bend pipes that connect ports of a key plate together to complete various pipework circuits.

As such, i’ve grouped common swing bends together and tried to style them so that they all have the same stroke widths and linecaps. However it seems that in applying some of these settings to groups of objects, it’s inadvertently also sub-grouped these elements together within the SVG definition which isn’t represented in Inkscape’s Object browser or XML Editor. I can see it in the raw SVG definition and indeed also when it’s embedded into Perspective.

Best given by an example…

This is the SVG in Inkscape and its structure in the XML editor. Note the selected blue pipe and where it’s selected in the XML editor. The group g19303 (I need to fix that name…) contains this pipe along with all the other blue ones, and it looks like a simple array of elements.

However looking at the SVG definition, this same group has a few different sub-arrays that actually contain these pipes, snippet below. Note the 3 distinct groups within the outer group, where these define the common stroke property.

<g transform="translate(.033913 .067812)" fill="none" stroke-linecap="round" stroke-width="11">
  <g stroke="#59f">
   <path id="L3 to C3R" d="m253.36 8.5319c23.478 19.288 53.717 150.62 43.621 184.36"/>
   <path id="L2 to C3R" d="m191.48 8.5319c29.912 10.973 109.08 149.4 105.5 184.36"/>
   <path id="BT12 to C3R" d="m87.434 89.459c40.115-0.19882 175.71 56.672 209.55 103.43"/>
   <path id="L1 to C3R" d="m73.235 137.01c26.173-3.7838 199.67 25.389 223.75 55.877"/>
  </g>
  <path id="BT34 to C3R" d="m122.06 43.713c39.519 5.6574 158.57 94.69 174.92 149.18" stroke="#2a7fff"/>
  <g stroke="#59f">
   <path id="L4 to C3R" d="m322.78 43.713c-27.965 17.207-35.377 121.87-25.799 149.18"/>
   <path id="BT56 to C3R" d="m357.41 89.459c-24.304 3.7838-61.176 80.729-60.428 103.43"/>
HERE=> <path id="PV34 to C3R" d="m371.61 137.01c-24.304 3.7838-61.915 32.796-74.627 55.877"/>
   <path id="KF to C3R" d="m77.112 194.26c32.275-17.207 191.73-21.279 219.87-1.367"/>
  </g>
 </g>

And in Perspective:

What I found is that if you select all of the objects within the Inkscape group and then change the same common properties, then change them to what you want, then these components will then be moved back into the main group and the properties will move into the main group’s properties instead.

 <g transform="translate(.033913 .067812)" fill="none" stroke="#5096ff" stroke-linecap="round" stroke-width="11">
  <path id="L3 to C3R" d="m253.36 8.5319c23.478 19.288 53.717 150.62 43.621 184.36"/>
  <path id="L2 to C3R" d="m191.48 8.5319c29.912 10.973 109.08 149.4 105.5 184.36"/>
  <path id="BT12 to C3R" d="m87.434 89.459c40.115-0.19882 175.71 56.672 209.55 103.43"/>
  <path id="L1 to C3R" d="m73.235 137.01c26.173-3.7838 199.67 25.389 223.75 55.877"/>
  <path id="BT34 to C3R" d="m122.06 43.713c39.519 5.6574 158.57 94.69 174.92 149.18"/>
  <path id="L4 to C3R" d="m322.78 43.713c-27.965 17.207-35.377 121.87-25.799 149.18"/>
  <path id="BT56 to C3R" d="m357.41 89.459c-24.304 3.7838-61.176 80.729-60.428 103.43"/>
  <path id="PV34 to C3R" d="m371.61 137.01c-24.304 3.7838-61.915 32.796-74.627 55.877"/>
  <path id="KF to C3R" d="m77.112 194.26c32.275-17.207 191.73-21.279 219.87-1.367"/>
 </g>

Much better!

1 Like