SVG broken after saving it from the DOM

Question

I need export some SVG images from a webpage to a PDF file. Creating the PDF with the SVG should be possible using tcpdf (example 58).

But first, I need to save the SVG from the DOM in a file. I thought I can simply copy the svg-element and save it in a file (as described here). But doing so gives me an faulty SVG image.

Here's an example of an SVG I want to export:

<svg xmlns="http://www.w3.org/2000/svg" class="v-m-root" style="left: 0px; top: 0px; direction: ltr; cursor: default; position: absolute; box-sizing: border-box;" width="500" height="300"><rect class="v-eventLayer" x="0" y="0" fill-opacity="0" width="500" height="300"/><g class="v-backgroundutil"><rect class="v-background-body viz-plot-background v-morphable-background" id="background-rect-e92e79a7-f53d-47ba-af43-d16a95242caf" x="0" y="0" width="500" height="300" style="fill:transparent"/></g><defs/><g class="v-m-title" transform="translate(0, 0)"/><g class="v-m-legends" transform="translate(363, 24)"><g class="v-m-legend" transform="translate(0,0)"><rect class="v-bound" width="113" height="180" fill="transparent"/><g class="v-content" transform="translate(0,0)"><g class="v-groups v-label viz-legend-valueLabel" transform="translate(0,0)" font-family="'Open Sans', Arial, Helvetica, sans-serif" font-size="12px" font-weight="normal" fill="#000000"><g class="v-legend-content"><rect class="v-indicatedRect v-legend-item v-hovershadow" visibility="hidden" width="123" x="-5" y="-3" height="18"/><g class="v-row ID_0" transform="translate(0,0)"><path class="" fill="#748cb2" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">1002 / Frau A...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>1002 / Frau Anna-Marie Maier</title></rect></g><g class="v-row ID_1" transform="translate(0,18)"><path class="" fill="#9cc677" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">1002 / Frau S...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>1002 / Frau Sara Gut-Ski</title></rect></g><g class="v-row ID_2" transform="translate(0,36)"><path class="" fill="#eacf5e" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">1002 / Frau Si...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>1002 / Frau Simone Meier-Eisenhut</title></rect></g><g class="v-row ID_3" transform="translate(0,54)"><path class="" fill="#f9ad79" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">1002 / Herr K...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>1002 / Herr Kurt Nauser</title></rect></g><g class="v-row ID_4" transform="translate(0,72)"><path class="" fill="#d16a7c" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">1002 / Herr P...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>1002 / Herr Paolo Meyer</title></rect></g><g class="v-row ID_5" transform="translate(0,90)"><path class="" fill="#8873a2" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">2200 / Frau A...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>2200 / Frau Anna-Marie Maier</title></rect></g><g class="v-row ID_6" transform="translate(0,108)"><path class="" fill="#3a95b3" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">2200 / Frau S...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>2200 / Frau Sara Gut-Ski</title></rect></g><g class="v-row ID_7" transform="translate(0,126)"><path class="" fill="#b6d949" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">2200 / Frau Si...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>2200 / Frau Simone Meier-Eisenhut</title></rect></g><g class="v-row ID_8" transform="translate(0,144)"><path class="" fill="#fdd36c" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">2200 / Herr K...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>2200 / Herr Kurt Nauser</title></rect></g><g class="v-row ID_9" transform="translate(0,162)"><path class="" fill="#f47958" stroke-width="0" stroke="transparent" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/><text x="18" y="12">2200 / Herr P...</text><rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgba(255, 255, 255, 0)" transform="translate(0,-3)" width="103"><title>2200 / Herr Paolo Meyer</title></rect></g></g></g></g></g></g><g class="v-m-main" transform="translate(24, 24)"><rect class="v-bound" width="331" height="252" visibility="hidden"/><g class="v-m-background" transform="translate(38.5,7.199999999999999)"><rect class="v-background-body viz-plot-background v-morphable-background" id="background-rect-a88b180e-ce0a-4022-bd76-a51f2af9838d" x="0" y="0" width="292.5" height="208.4" style="fill:transparent"/><line class="v-background-border viz-plot-background-border" x1="0" y1="0" x2="0" y2="208.4" shape-rendering="crispEdges" stroke="#d8d8d8" stroke-width="0"/><line class="v-background-border viz-plot-background-border" x1="292.5" y1="0" x2="292.5" y2="208.4" shape-rendering="crispEdges" stroke="#d8d8d8" stroke-width="0"/><line class="v-background-border viz-plot-background-border" x1="0" y1="0" x2="292.5" y2="0" shape-rendering="crispEdges" stroke="#d8d8d8" stroke-width="0"/><line class="v-background-border viz-plot-background-border" x1="0" y1="208.4" x2="292.5" y2="208.4" shape-rendering="crispEdges" stroke="#d8d8d8" stroke-width="0"/></g><g class="v-m-xAxis" transform="translate(38.5,215.6)"><rect class="v-bound" width="293.5" height="36.4" fill="transparent"/><g class="viz-axis v-axis"><g class="viz-axis-body v-body"><path class="v-categoryaxisline" d="M0 5L0 0L292.5 0L292.5 5" fill="none" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/><rect x="0" y="1" width="292.5" height="35.4" opacity="0" class="v-labelarea v-axis-item"/><g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif"><text pointer-events="none" x="146.25" y="18.2" dominant-baseline="middle" text-anchor="middle">ZAHL</text></g></g></g></g><g class="v-m-yAxis" transform="translate(0,7.199999999999999)"><rect class="v-bound" width="38.5" height="209.4" fill="transparent"/><g class="viz-axis v-axis"><g class="viz-axis-body v-body"><line class="v-valueaxisline" x1="33" x2="38" y1="0" y2="0" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/><g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif"><text x="27" y="0" dominant-baseline="middle" text-anchor="end">400</text></g><line class="v-valueaxisline" x1="33" x2="38" y1="52.1" y2="52.1" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/><line class="v-gridline" y1="52.1" y2="52.1" x1="38" x2="330.5" stroke="#7f8fa6" stroke-width="1" shape-rendering="crispEdges"/><g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif"><text x="27" y="52.1" dominant-baseline="middle" text-anchor="end">300</text></g><line class="v-valueaxisline" x1="33" x2="38" y1="104.2" y2="104.2" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/><line class="v-gridline" y1="104.2" y2="104.2" x1="38" x2="330.5" stroke="#7f8fa6" stroke-width="1" shape-rendering="crispEdges"/><g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif"><text x="27" y="104.2" dominant-baseline="middle" text-anchor="end">200</text></g><line class="v-valueaxisline" x1="33" x2="38" y1="156.3" y2="156.3" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/><line class="v-gridline" y1="156.3" y2="156.3" x1="38" x2="330.5" stroke="#7f8fa6" stroke-width="1" shape-rendering="crispEdges"/><g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif"><text x="27" y="156.3" dominant-baseline="middle" text-anchor="end">100</text></g><line class="v-valueaxisline" x1="33" x2="38" y1="208.4" y2="208.4" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/><g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif"><text x="27" y="208.4" dominant-baseline="middle" text-anchor="end">0</text></g><path class="v-valueaxisline" d="M38 208.4L38 208.4L38 0L38 0" fill="none" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/></g></g></g><g class="v-m-plot" transform="translate(38.5,7.199999999999999)"><rect class="v-bound" width="292.5" height="208.4" fill="transparent"/><defs><clipPath id="clipPlot_1877"><rect width="292.5" height="208.4"/></clipPath></defs><defs/><g class="v-datashapesgroup" fill="none" clip-path="url(#clipPlot_1877)"><g class="v-column"><g class="v-datashape" transform="translate(12.061855670103093,83.36000000000001)"><rect class="v-datapoint v-morphable-datapoint" fill="#748cb2" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="125.03999999999999" y="0" x="0"/></g><g class="v-datashape" transform="translate(39.20103092783505,101.59500000000001)"><rect class="v-datapoint v-morphable-datapoint" fill="#9cc677" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="106.80499999999999" y="0" x="0"/></g><g class="v-datashape" transform="translate(66.34020618556701,205.274)"><rect class="v-datapoint v-morphable-datapoint" fill="#eacf5e" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="3.1260000000000048" y="0" x="0"/></g><g class="v-datashape" transform="translate(93.47938144329896,34.907)"><rect class="v-datapoint v-morphable-datapoint" fill="#f9ad79" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="173.493" y="0" x="0"/></g><g class="v-datashape" transform="translate(120.61855670103091,44.806)"><rect class="v-datapoint v-morphable-datapoint" fill="#d16a7c" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="163.594" y="0" x="0"/></g><g class="v-datashape" transform="translate(147.7577319587629,104.72099999999999)"><rect class="v-datapoint v-morphable-datapoint" fill="#8873a2" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="103.67900000000002" y="0" x="0"/></g><g class="v-datashape" transform="translate(174.89690721649484,81.27600000000001)"><rect class="v-datapoint v-morphable-datapoint" fill="#3a95b3" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="127.124" y="0" x="0"/></g><g class="v-datashape" transform="translate(202.03608247422682,196.938)"><rect class="v-datapoint v-morphable-datapoint" fill="#b6d949" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="11.462000000000018" y="0" x="0"/></g><g class="v-datashape" transform="translate(229.17525773195874,74.50300000000001)"><rect class="v-datapoint v-morphable-datapoint" fill="#fdd36c" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="133.897" y="0" x="0"/></g><g class="v-datashape" transform="translate(256.3144329896907,61.999)"><rect class="v-datapoint v-morphable-datapoint" fill="#f47958" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="146.401" y="0" x="0"/></g></g></g></g></g></svg>

And here's the image how it looks in the pdf generated with tcpdf:

And here's the image how it looks in inkscape:

Any ideas what's wrong here or some better approaches to achieve this?

The linked question's answer says that the file has to be saved with an svg extension, here you have saved in png — gyaani_guy, Sep 03 '15 at 12:28
The 2 images are sreenshots of how the SVG looks when it's in the PDF or opened inkscape (just to show that they look not the same as the original SVG image) — user2345998, Sep 03 '15 at 12:37
hi, if you are applying that "grey" background using css class, then it won't show up in your pdf as your tags doesn't hold .css link. so either A) try inline css OR B) create a rect as first child with full width and height and set its fill color . Also its best to have some fiddle to play with — RashFlash, Sep 04 '15 at 07:22

score 1 · Accepted Answer · answered Sep 04 '15 at 07:37

There are three things about this SVG that Inkscape doesn't seem to like:

fill="transparent"

There are some rectangles that have this fill. Inkscape doesn't seem to support this new CSS3 colour value. Inkscape is treating them as fill="black". Fix: replace them with fill="none"
visibility="hidden"

There are some elements which are hidden. Inkscape doesn't seem to like this either. Fix: remove them.
fill="rgba(...)"

Inkscape doesn't seem to understand RGBA colours either. rgba() is also a feature that is new in CSS3. Fix: replace them with fill="rgb(...)" (or fill="#rrggbb") and fill-opacity="...". For example: fill="rgba(255, 255, 255, 0)" becomes fill="rgb(255, 255, 255)" fill-opacity="0".

Below is a modified version of your SVG that displays correctly in Inkscape. I am using 0.91 (current stable release). It's probable that newer versions of Inkscape, when they come out, will fix these problems.

I expect that some or all of these issues will be affecting TCPDF as well. Try the "fixed" version of the file and see if it works better.

I don't know what graphing package you are using. Correcting these issues for other graphs may involve altering the graphing code, or asking it's authors to fix it so that it doesn't use CSS3 features for now.

<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg" class="v-m-root" style="left: 0px; top: 0px; direction: ltr; cursor: default; position: absolute; box-sizing: border-box;" width="500" height="300">
<rect class="v-eventLayer" x="0" y="0" fill-opacity="0" width="500" height="300"/>
<g class="v-backgroundutil">
    <rect class="v-background-body viz-plot-background v-morphable-background" id="background-rect-e92e79a7-f53d-47ba-af43-d16a95242caf" x="0" y="0" width="500" height="300" style="fill:none"/>
</g>
<defs/>
<g class="v-m-title" transform="translate(0, 0)"/>
<g class="v-m-legends" transform="translate(363, 24)">
    <g class="v-m-legend" transform="translate(0,0)">
        <rect class="v-bound" width="113" height="180" fill="none"/>
        <g class="v-content" transform="translate(0,0)">
            <g class="v-groups v-label viz-legend-valueLabel" transform="translate(0,0)" font-family="'Open Sans', Arial, Helvetica, sans-serif" font-size="12px" font-weight="normal" fill="#000000">
                <g class="v-legend-content">
                    <g class="v-row ID_0" transform="translate(0,0)">
                        <path class="" fill="#748cb2" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">1002 / Frau A...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>1002 / Frau Anna-Marie Maier</title>
                        </rect>
                    </g>
                    <g class="v-row ID_1" transform="translate(0,18)">
                        <path class="" fill="#9cc677" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">1002 / Frau S...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>1002 / Frau Sara Gut-Ski</title>
                        </rect>
                    </g>
                    <g class="v-row ID_2" transform="translate(0,36)">
                        <path class="" fill="#eacf5e" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">1002 / Frau Si...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>1002 / Frau Simone Meier-Eisenhut</title>
                        </rect>
                    </g>
                    <g class="v-row ID_3" transform="translate(0,54)">
                        <path class="" fill="#f9ad79" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">1002 / Herr K...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>1002 / Herr Kurt Nauser</title>
                        </rect>
                    </g>
                    <g class="v-row ID_4" transform="translate(0,72)">
                        <path class="" fill="#d16a7c" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">1002 / Herr P...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>1002 / Herr Paolo Meyer</title>
                        </rect>
                    </g>
                    <g class="v-row ID_5" transform="translate(0,90)">
                        <path class="" fill="#8873a2" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">2200 / Frau A...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>2200 / Frau Anna-Marie Maier</title>
                        </rect>
                    </g>
                    <g class="v-row ID_6" transform="translate(0,108)">
                        <path class="" fill="#3a95b3" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">2200 / Frau S...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>2200 / Frau Sara Gut-Ski</title>
                        </rect>
                    </g>
                    <g class="v-row ID_7" transform="translate(0,126)">
                        <path class="" fill="#b6d949" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">2200 / Frau Si...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>2200 / Frau Simone Meier-Eisenhut</title>
                        </rect>
                    </g>
                    <g class="v-row ID_8" transform="translate(0,144)">
                        <path class="" fill="#fdd36c" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">2200 / Herr K...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>2200 / Herr Kurt Nauser</title>
                        </rect>
                    </g>
                    <g class="v-row ID_9" transform="translate(0,162)">
                        <path class="" fill="#f47958" stroke-width="0" stroke="none" opacity="1" stroke-opacity="undefined" d="M0,-6L-3,-6Q-6,-6 -6,-3L-6,3Q-6,6 -3,6L3,6Q6,6 6,3L6,-3Q6,-6 3,-6Z" transform="translate(6,6)"/>
                        <text x="18" y="12">2200 / Herr P...</text>
                        <rect class="v-eventRect v-legend-item ID_9" height="18" fill="rgb(255, 255, 255)" fill-opacity="0" transform="translate(0,-3)" width="103">
                            <title>2200 / Herr Paolo Meyer</title>
                        </rect>
                    </g>
                </g>
            </g>
        </g>
    </g>
</g>
<g class="v-m-main" transform="translate(24, 24)">
    <g class="v-m-background" transform="translate(38.5,7.199999999999999)">
        <rect class="v-background-body viz-plot-background v-morphable-background" id="background-rect-a88b180e-ce0a-4022-bd76-a51f2af9838d" x="0" y="0" width="292.5" height="208.4" style="fill:none"/>
        <line class="v-background-border viz-plot-background-border" x1="0" y1="0" x2="0" y2="208.4" shape-rendering="crispEdges" stroke="#d8d8d8" stroke-width="0"/>
        <line class="v-background-border viz-plot-background-border" x1="292.5" y1="0" x2="292.5" y2="208.4" shape-rendering="crispEdges" stroke="#d8d8d8" stroke-width="0"/>
        <line class="v-background-border viz-plot-background-border" x1="0" y1="0" x2="292.5" y2="0" shape-rendering="crispEdges" stroke="#d8d8d8" stroke-width="0"/>
        <line class="v-background-border viz-plot-background-border" x1="0" y1="208.4" x2="292.5" y2="208.4" shape-rendering="crispEdges" stroke="#d8d8d8" stroke-width="0"/>
    </g>
    <g class="v-m-xAxis" transform="translate(38.5,215.6)">
        <rect class="v-bound" width="293.5" height="36.4" fill="none"/>
        <g class="viz-axis v-axis">
            <g class="viz-axis-body v-body">
                <path class="v-categoryaxisline" d="M0 5L0 0L292.5 0L292.5 5" fill="none" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/>
                <rect x="0" y="1" width="292.5" height="35.4" opacity="0" class="v-labelarea v-axis-item"/>
                <g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif">
                    <text pointer-events="none" x="146.25" y="18.2" dominant-baseline="middle" text-anchor="middle">ZAHL</text>
                </g>
            </g>
        </g>
    </g>
    <g class="v-m-yAxis" transform="translate(0,7.199999999999999)">
        <rect class="v-bound" width="38.5" height="209.4" fill="none"/>
        <g class="viz-axis v-axis">
            <g class="viz-axis-body v-body">
                <line class="v-valueaxisline" x1="33" x2="38" y1="0" y2="0" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/>
                <g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif">
                    <text x="27" y="0" dominant-baseline="middle" text-anchor="end">400</text>
                </g>
                <line class="v-valueaxisline" x1="33" x2="38" y1="52.1" y2="52.1" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/>
                <line class="v-gridline" y1="52.1" y2="52.1" x1="38" x2="330.5" stroke="#7f8fa6" stroke-width="1" shape-rendering="crispEdges"/>
                <g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif">
                    <text x="27" y="52.1" dominant-baseline="middle" text-anchor="end">300</text>
                </g>
                <line class="v-valueaxisline" x1="33" x2="38" y1="104.2" y2="104.2" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/>
                <line class="v-gridline" y1="104.2" y2="104.2" x1="38" x2="330.5" stroke="#7f8fa6" stroke-width="1" shape-rendering="crispEdges"/>
                <g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif">
                    <text x="27" y="104.2" dominant-baseline="middle" text-anchor="end">200</text>
                </g>
                <line class="v-valueaxisline" x1="33" x2="38" y1="156.3" y2="156.3" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/>
                <line class="v-gridline" y1="156.3" y2="156.3" x1="38" x2="330.5" stroke="#7f8fa6" stroke-width="1" shape-rendering="crispEdges"/>
                <g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif">
                    <text x="27" y="156.3" dominant-baseline="middle" text-anchor="end">100</text>
                </g>
                <line class="v-valueaxisline" x1="33" x2="38" y1="208.4" y2="208.4" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/>
                <g fill="#333333" class="v-label viz-axis-label v-morphable-label" font-size="12px" font-weight="normal" font-family="'Open Sans', Arial, Helvetica, sans-serif">
                    <text x="27" y="208.4" dominant-baseline="middle" text-anchor="end">0</text>
                </g>
                <path class="v-valueaxisline" d="M38 208.4L38 208.4L38 0L38 0" fill="none" stroke="#96a8c3" stroke-width="1" shape-rendering="crispEdges"/>
            </g>
        </g>
    </g>
    <g class="v-m-plot" transform="translate(38.5,7.199999999999999)">
        <rect class="v-bound" width="292.5" height="208.4" fill="none"/>
        <defs>
            <clipPath id="clipPlot_1877">
                <rect width="292.5" height="208.4"/>
            </clipPath>
        </defs>
        <defs/>
        <g class="v-datashapesgroup" fill="none" clip-path="url(#clipPlot_1877)">
            <g class="v-column">
                <g class="v-datashape" transform="translate(12.061855670103093,83.36000000000001)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#748cb2" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="125.03999999999999" y="0" x="0"/>
                </g>
                <g class="v-datashape" transform="translate(39.20103092783505,101.59500000000001)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#9cc677" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="106.80499999999999" y="0" x="0"/>
                </g>
                <g class="v-datashape" transform="translate(66.34020618556701,205.274)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#eacf5e" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="3.1260000000000048" y="0" x="0"/>
                </g>
                <g class="v-datashape" transform="translate(93.47938144329896,34.907)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#f9ad79" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="173.493" y="0" x="0"/>
                </g>
                <g class="v-datashape" transform="translate(120.61855670103091,44.806)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#d16a7c" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="163.594" y="0" x="0"/>
                </g>
                <g class="v-datashape" transform="translate(147.7577319587629,104.72099999999999)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#8873a2" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="103.67900000000002" y="0" x="0"/>
                </g>
                <g class="v-datashape" transform="translate(174.89690721649484,81.27600000000001)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#3a95b3" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="127.124" y="0" x="0"/>
                </g>
                <g class="v-datashape" transform="translate(202.03608247422682,196.938)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#b6d949" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="11.462000000000018" y="0" x="0"/>
                </g>
                <g class="v-datashape" transform="translate(229.17525773195874,74.50300000000001)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#fdd36c" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="133.897" y="0" x="0"/>
                </g>
                <g class="v-datashape" transform="translate(256.3144329896907,61.999)">
                    <rect class="v-datapoint v-morphable-datapoint" fill="#f47958" shape-rendering="crispEdges" fill-opacity="1" stroke="none" width="24.123711340206185" height="146.401" y="0" x="0"/>
                </g>
            </g>
        </g>
    </g>
</g>
</svg>

Thank you very much for your efforts, really VERY helpful. The modified version also renders perfectly in tcpdf. Thanks! — user2345998, Sep 04 '15 at 07:55

SVG broken after saving it from the DOM

1 Answers1