g group not working

[wsimm]

hi, I combined some elements inside groups but once I use dmpdf they are all recursively extracted

any way to fix it?

[bsweeney]

Do you have a sample to show what you mean?

[wsimm]

hi, @bsweeney

in this example, i have many groups, when i convert this file to pdf , all groups extracted

<svg id="grid" width="1000.00" height="500.00" viewBox="0 0 1000.00 500.00"
    xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
    <g class="backgroundGroup">
        <rect stroke="none" fontFamily="sans-serif" class="gide-text" x="0" y="0" width="1000.00" height="500.00" fill="#ffffff"/>
    </g>
    <g class="gridSystemGroup">
        <defs>
            <style>rect{color:yellow;}</style>
        </defs>
    </g>
    <g class="rowsGroup">
        <line x1="0" y1="100" x2="1000" y2="100" stroke="red" stroke-width="0.5"/>
        <line x1="0" y1="144" x2="1000" y2="144" stroke="red" stroke-width="0.5"/>
        <line x1="0" y1="164" x2="1000" y2="164" stroke="red" stroke-width="0.5"/>
        <line x1="0" y1="208" x2="1000" y2="208" stroke="red" stroke-width="0.5"/>
        <line x1="0" y1="228" x2="1000" y2="228" stroke="red" stroke-width="0.5"/>
        <line x1="0" y1="272" x2="1000" y2="272" stroke="red" stroke-width="0.5"/>
        <line x1="0" y1="292" x2="1000" y2="292" stroke="red" stroke-width="0.5"/>
        <line x1="0" y1="336" x2="1000" y2="336" stroke="red" stroke-width="0.5"/>
        <line x1="0" y1="356" x2="1000" y2="356" stroke="red" stroke-width="0.5"/>
        <line x1="0" y1="400" x2="1000" y2="400" stroke="red" stroke-width="0.5"/>
    </g>
    <g class="columnGroup">
        <line x1="100" y1="0" x2="100" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="128.23529411764707" y1="0" x2="128.23529411764707" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="148.23529411764707" y1="0" x2="148.23529411764707" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="176.47058823529414" y1="0" x2="176.47058823529414" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="196.47058823529412" y1="0" x2="196.47058823529412" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="224.70588235294116" y1="0" x2="224.70588235294116" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="244.70588235294116" y1="0" x2="244.70588235294116" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="272.94117647058823" y1="0" x2="272.94117647058823" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="292.94117647058823" y1="0" x2="292.94117647058823" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="321.1764705882353" y1="0" x2="321.1764705882353" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="341.1764705882353" y1="0" x2="341.1764705882353" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="369.4117647058824" y1="0" x2="369.4117647058824" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="389.4117647058823" y1="0" x2="389.4117647058823" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="417.6470588235294" y1="0" x2="417.6470588235294" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="437.6470588235294" y1="0" x2="437.6470588235294" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="465.88235294117646" y1="0" x2="465.88235294117646" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="485.88235294117646" y1="0" x2="485.88235294117646" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="514.1176470588235" y1="0" x2="514.1176470588235" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="534.1176470588235" y1="0" x2="534.1176470588235" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="562.3529411764706" y1="0" x2="562.3529411764706" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="582.3529411764706" y1="0" x2="582.3529411764706" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="610.5882352941177" y1="0" x2="610.5882352941177" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="630.5882352941177" y1="0" x2="630.5882352941177" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="658.8235294117648" y1="0" x2="658.8235294117648" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="678.8235294117646" y1="0" x2="678.8235294117646" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="707.0588235294117" y1="0" x2="707.0588235294117" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="727.0588235294117" y1="0" x2="727.0588235294117" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="755.2941176470588" y1="0" x2="755.2941176470588" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="775.2941176470588" y1="0" x2="775.2941176470588" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="803.5294117647059" y1="0" x2="803.5294117647059" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="823.5294117647059" y1="0" x2="823.5294117647059" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="851.7647058823529" y1="0" x2="851.7647058823529" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="871.7647058823529" y1="0" x2="871.7647058823529" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
        <line x1="900" y1="0" x2="900" y2="500" stroke="#30b5ea" stroke-width="0.5"/>
    </g>
    <g class="textgroup">
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect0" x="0" y="120" width="1000.00" height="44" fill="red">0</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect1" x="0" y="184" width="1000.00" height="44" fill="red">1</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect2" x="0" y="248" width="1000.00" height="44" fill="red">2</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect3" x="0" y="312" width="1000.00" height="44" fill="red">3</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect4" x="0" y="376" width="1000.00" height="44" fill="red">4</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect0" x="102" y="12" width="28.235294117647058" height="500.00" fill="red">0</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect1" x="150.23529411764707" y="12" width="28.235294117647058" height="500.00" fill="red">1</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect2" x="198.47058823529412" y="12" width="28.235294117647058" height="500.00" fill="red">2</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect3" x="246.70588235294116" y="12" width="28.235294117647058" height="500.00" fill="red">3</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect4" x="294.94117647058823" y="12" width="28.235294117647058" height="500.00" fill="red">4</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect5" x="343.1764705882353" y="12" width="28.235294117647058" height="500.00" fill="red">5</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect6" x="391.4117647058823" y="12" width="28.235294117647058" height="500.00" fill="red">6</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect7" x="439.6470588235294" y="12" width="28.235294117647058" height="500.00" fill="red">7</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect8" x="487.88235294117646" y="12" width="28.235294117647058" height="500.00" fill="red">8</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect9" x="536.1176470588235" y="12" width="28.235294117647058" height="500.00" fill="red">9</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect10" x="584.3529411764706" y="12" width="28.235294117647058" height="500.00" fill="red">10</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect11" x="632.5882352941177" y="12" width="28.235294117647058" height="500.00" fill="red">11</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect12" x="680.8235294117646" y="12" width="28.235294117647058" height="500.00" fill="red">12</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect13" x="729.0588235294117" y="12" width="28.235294117647058" height="500.00" fill="red">13</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect14" x="777.2941176470588" y="12" width="28.235294117647058" height="500.00" fill="red">14</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect15" x="825.5294117647059" y="12" width="28.235294117647058" height="500.00" fill="red">15</text>
        <text stroke="none" fontFamily="sans-serif" font-size="12" class="gide-text" id="text-rect16" x="873.7647058823529" y="12" width="28.235294117647058" height="500.00" fill="red">16</text>
    </g>
    <g class="xlinesGroup">
        <line x1="100" y1="100" x2="900" y2="400" stroke="#F906E3" stroke-width="0.5"/>
        <line x1="900" y1="100" x2="100" y2="400" stroke="#F906E3" stroke-width="0.5"/>
    </g>
    <g class="placeholders">
        <svg width="1000.00" height="500.00">
            <rect x="678.8235294117646" y="356" width="172.94117647058823" height="44" fill="#dbe4cd" class="placeholderRect" opacity="0.5"/>
        </svg>
        <svg width="1000.00" height="500.00">
            <rect x="389.4117647058823" y="228" width="124.70588235294117" height="172" fill="#dbe4cd" class="placeholderRect" opacity="0.5"/>
        </svg>
    </g>
</svg>

[bsweeney]

What is your expectation for the SVG? The image is rendered appropriately. Are you expecting the PDF objects to be grouped similarly (functionality that was not a focus when this library was developed)?

[wsimm]

@bsweeney
My expectation for the SVG is to be converted to PDF without losing the structure of the SVG elements, including the grouping of elements. I understand that grouping functionality may not have been a focus during the development of the DomPDF library, but it would be helpful if the library could preserve the original structure of the SVG

[bsweeney]

You mean structurally within the PDF source, yes? Or are you expecting some kind of rendering compliment that would make the grouping more functional?

I'll tag as an enhancement though I couldn't say when somebody might look at this.

[wsimm]

@bsweeney
Actually, I don't need any additional features. My main concern is to export the SVG as-is, preserving its structure. The reason this matters is that when I download the PDF which has been converted using DOMPDF and then open it with Adobe Illustrator, I don't want to lose the grouping feature of the SVG. So, maintaining the SVG structure during the conversion process is essential for my use case.

[bsweeney]

Thanks for the follow up that definitely clarifies the use case.