Rendering javascript generated svg

[MarouaneFawzi]

I'm trying to get a C3 chart generated svg to render into my pdf but all I see is the "text" part of it.

any ideas?

[liZe]

WeasyPrint doesn't (and probably never will) handle JavaScript at all. So if your SVG file is generated with JS, there's no way it can work 😉. See #454.

[MarouaneFawzi]

Ah I've already seen that. I ran the code through Selenium and I feed weasyprint the page source code with the svg already in it. I was wondering why do I get only the text in the svg and not the lines and the strokes.

[liZe]

I was wondering why do I get only the text in the svg and not the lines and the strokes.

Is it possible for you to attach the generated SVG file?

[MarouaneFawzi]

It generates html code not a file

<div id="chart" class="chart c3" style="position: relative;"><svg style="overflow: hidden;" width="341.5" height="234.6999969482422"><defs><clipPath id="c3-1554281790648-clip"><rect width="299.5" height="179.6999969482422"></rect></clipPath><clipPath id="c3-1554281790648-clip-xaxis"><rect x="-41" y="-20" width="371.5" height="71"></rect></clipPath><clipPath id="c3-1554281790648-clip-yaxis"><rect x="-39" y="-4" width="60" height="203.6999969482422"></rect></clipPath><clipPath id="c3-1554281790648-clip-grid"><rect width="299.5" height="179.6999969482422"></rect></clipPath><clipPath id="c3-1554281790648-clip-subchart"><rect width="299.5" height="0"></rect></clipPath></defs><g transform="translate(40.5,4.5)"><text class="c3-text c3-empty" text-anchor="middle" dominant-baseline="middle" x="149.75" y="89.8499984741211" style="opacity: 0;"></text><g clip-path="url(http://localhost:8000/export/#c3-1554281790648-clip)" class="c3-regions" style="visibility: visible;"></g><g clip-path="url(http://localhost:8000/export/#c3-1554281790648-clip-grid)" class="c3-grid" style="visibility: visible;"><g class="c3-xgrid-focus"><line class="c3-xgrid-focus" x1="-10" x2="-10" y1="0" y2="179.6999969482422" style="visibility: hidden;"></line></g></g><g clip-path="url(http://localhost:8000/export/#c3-1554281790648-clip)" class="c3-chart"><g class="c3-event-rects" style="fill-opacity: 0;"><rect class="c3-event-rect" x="0" y="0" width="299.5" height="179.6999969482422"></rect></g><g class="c3-chart-bars"><g class="c3-chart-bar c3-target c3-target-data1" style="pointer-events: none;"><g class=" c3-shapes c3-shapes-data1 c3-bars c3-bars-data1" style="cursor: pointer;"></g></g><g class="c3-chart-bar c3-target c3-target-data2" style="pointer-events: none;"><g class=" c3-shapes c3-shapes-data2 c3-bars c3-bars-data2" style="cursor: pointer;"></g></g></g><g class="c3-chart-lines"><g class="c3-chart-line c3-target c3-target-data1" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-data1 c3-lines c3-lines-data1"><path class=" c3-shape c3-shape c3-line c3-line-data1" style="stroke: rgb(31, 119, 180); opacity: 1;" d="M3,157.17157852955353L62,92.25918647570488L121,130.44294650738055L180,15.891666412353516L238,111.35106649154272L297,73.16730645986704"></path></g><g class=" c3-shapes c3-shapes-data1 c3-areas c3-areas-data1"><path class=" c3-shape c3-shape c3-area c3-area-data1" style="fill: rgb(31, 119, 180); opacity: 0.2;" d="M 3 157.17157852955353"></path></g><g class=" c3-selected-circles c3-selected-circles-data1"></g><g class=" c3-shapes c3-shapes-data1 c3-circles c3-circles-data1" style="cursor: pointer;"><circle class=" c3-shape c3-shape-0 c3-circle c3-circle-0" cx="3" cy="157.17157852955353" r="2.5" style="fill: rgb(31, 119, 180); opacity: 1;"></circle><circle class=" c3-shape c3-shape-1 c3-circle c3-circle-1" cx="62" cy="92.25918647570488" r="2.5" style="fill: rgb(31, 119, 180); opacity: 1;"></circle><circle class=" c3-shape c3-shape-2 c3-circle c3-circle-2" cx="121" cy="130.44294650738055" r="2.5" style="fill: rgb(31, 119, 180); opacity: 1;"></circle><circle class=" c3-shape c3-shape-3 c3-circle c3-circle-3" cx="180" cy="15.891666412353516" r="2.5" style="fill: rgb(31, 119, 180); opacity: 1;"></circle><circle class=" c3-shape c3-shape-4 c3-circle c3-circle-4" cx="238" cy="111.35106649154272" r="2.5" style="fill: rgb(31, 119, 180); opacity: 1;"></circle><circle class=" c3-shape c3-shape-5 c3-circle c3-circle-5" cx="297" cy="73.16730645986704" r="2.5" style="fill: rgb(31, 119, 180); opacity: 1;"></circle></g></g><g class="c3-chart-line c3-target c3-target-data2" style="opacity: 1; pointer-events: none;"><g class=" c3-shapes c3-shapes-data2 c3-lines c3-lines-data2"><path class=" c3-shape c3-shape c3-line c3-line-data2" style="stroke: rgb(255, 127, 14); opacity: 1;" d="M3,149.53482652321838L62,160.9899545327211L121,164.80833053588867L180,153.35320252638596L238,162.8991425343049L297,159.08076653113733"></path></g><g class=" c3-shapes c3-shapes-data2 c3-areas c3-areas-data2"><path class=" c3-shape c3-shape c3-area c3-area-data2" style="fill: rgb(255, 127, 14); opacity: 0.2;" d="M 3 149.53482652321838"></path></g><g class=" c3-selected-circles c3-selected-circles-data2"></g><g class=" c3-shapes c3-shapes-data2 c3-circles c3-circles-data2" style="cursor: pointer;"><circle class=" c3-shape c3-shape-0 c3-circle c3-circle-0" cx="3" cy="149.53482652321838" r="2.5" style="fill: rgb(255, 127, 14); opacity: 1;"></circle><circle class=" c3-shape c3-shape-1 c3-circle c3-circle-1" cx="62" cy="160.9899545327211" r="2.5" style="fill: rgb(255, 127, 14); opacity: 1;"></circle><circle class=" c3-shape c3-shape-2 c3-circle c3-circle-2" cx="121" cy="164.80833053588867" r="2.5" style="fill: rgb(255, 127, 14); opacity: 1;"></circle><circle class=" c3-shape c3-shape-3 c3-circle c3-circle-3" cx="180" cy="153.35320252638596" r="2.5" style="fill: rgb(255, 127, 14); opacity: 1;"></circle><circle class=" c3-shape c3-shape-4 c3-circle c3-circle-4" cx="238" cy="162.8991425343049" r="2.5" style="fill: rgb(255, 127, 14); opacity: 1;"></circle><circle class=" c3-shape c3-shape-5 c3-circle c3-circle-5" cx="297" cy="159.08076653113733" r="2.5" style="fill: rgb(255, 127, 14); opacity: 1;"></circle></g></g></g><g class="c3-chart-arcs" transform="translate(149.75,84.8499984741211)"><text class="c3-chart-arcs-title" style="text-anchor: middle; opacity: 0;"></text></g><g class="c3-chart-texts"><g class="c3-chart-text c3-target c3-target-data1 " style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-data1"></g></g><g class="c3-chart-text c3-target c3-target-data2 " style="opacity: 1; pointer-events: none;"><g class=" c3-texts c3-texts-data2"></g></g></g></g><g clip-path="url(http://localhost:8000/export/#c3-1554281790648-clip-grid)" class="c3-grid c3-grid-lines"><g class="c3-xgrid-lines"></g><g class="c3-ygrid-lines"></g></g><g class="c3-axis c3-axis-x" clip-path="url(http://localhost:8000/export/#c3-1554281790648-clip-xaxis)" transform="translate(0,179.6999969482422)" style="visibility: visible; opacity: 1;"><text class="c3-axis-x-label" transform="" style="text-anchor: end;" x="299.5" dx="-0.5em" dy="-0.5em"></text><g class="tick" style="opacity: 1;" transform="translate(3, 0)"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(62, 0)"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">1</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(121, 0)"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">2</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(180, 0)"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">3</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(238, 0)"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">4</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(297, 0)"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">5</tspan></text></g><path class="domain" d="M0,6V0H299.5V6"></path></g><g class="c3-axis c3-axis-y" clip-path="url(http://localhost:8000/export/#c3-1554281790648-clip-yaxis)" transform="translate(0,0)" style="visibility: visible; opacity: 1;"><text class="c3-axis-y-label" transform="rotate(-90)" style="text-anchor: end;" x="0" dx="-0.5em" dy="1.2em"></text><g class="tick" style="opacity: 1;" transform="translate(0,169)"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">0</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(0,150)"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">50</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(0,131)"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">100</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(0,112)"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">150</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(0,93)"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">200</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(0,74)"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">250</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(0,55)"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">300</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(0,35)"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">350</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(0,16)"><line x2="-6"></line><text x="-9" y="0" style="text-anchor: end;"><tspan x="-9" dy="3">400</tspan></text></g><path class="domain" d="M-6,1H0V179.6999969482422H-6"></path></g><g class="c3-axis c3-axis-y2" transform="translate(299.5,0)" style="visibility: hidden; opacity: 1;"><text class="c3-axis-y2-label" transform="rotate(-90)" style="text-anchor: end;" x="0" dx="-0.5em" dy="-0.5em"></text><g class="tick" style="opacity: 1;" transform="translate(0,180)"><line x2="6"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(0,162)"><line x2="6"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.1</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(0,144)"><line x2="6"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.2</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(0,127)"><line x2="6"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.3</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(0,109)"><line x2="6"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.4</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(0,91)"><line x2="6"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.5</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(0,73)"><line x2="6"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.6</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(0,55)"><line x2="6"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.7</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(0,37)"><line x2="6"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.8</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(0,19)"><line x2="6"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">0.9</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(0,1)"><line x2="6"></line><text x="9" y="0" style="text-anchor: start;"><tspan x="9" dy="3">1</tspan></text></g><path class="domain" d="M6,1H0V179.6999969482422H6"></path></g></g><g transform="translate(20.5,223.5)" style="visibility: hidden;"><g clip-path="url(http://localhost:8000/export/#c3-1554281790648-clip-subchart)" class="c3-chart"><g class="c3-chart-bars"></g><g class="c3-chart-lines"></g></g><g clip-path="url(http://localhost:8000/export/#c3-1554281790648-clip)" class="c3-brush" fill="none" pointer-events="all"><rect class="overlay" pointer-events="all" cursor="crosshair" x="0" y="0" width="299.5" height="0"></rect><rect class="selection" cursor="move" fill="#777" fill-opacity="0.3" stroke="#fff" shape-rendering="crispEdges" style="display: none;"></rect><rect class="handle handle--e" cursor="ew-resize" style="display: none;"></rect><rect class="handle handle--w" cursor="ew-resize" style="display: none;"></rect></g><g class="c3-axis-x" transform="translate(0,0)" clip-path="url(http://localhost:8000/export/#c3-1554281790648-clip-xaxis)" style="opacity: 1;"><g class="tick" style="opacity: 1;" transform="translate(3, 0)"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">0</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(62, 0)"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">1</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(121, 0)"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">2</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(180, 0)"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">3</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(238, 0)"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">4</tspan></text></g><g class="tick" style="opacity: 1;" transform="translate(297, 0)"><line x1="0" x2="0" y2="6"></line><text x="0" y="9" transform="" style="text-anchor: middle; display: block;"><tspan x="0" dy=".71em" dx="0">5</tspan></text></g><path class="domain" d="M0,6V0H299.5V6"></path></g></g><g transform="translate(0,213.6999969482422)"><g class="c3-legend-item c3-legend-item-data1" style="visibility: visible; cursor: pointer;"><text style="pointer-events: none;" x="127.75" y="9">data1</text><rect class="c3-legend-item-event" style="fill-opacity: 0;" x="113.75" y="-5" width="62" height="21"></rect><line class="c3-legend-item-tile" style="stroke: rgb(31, 119, 180); pointer-events: none;" x1="111.75" y1="4" x2="121.75" y2="4" stroke-width="10"></line></g><g class="c3-legend-item c3-legend-item-data2" style="visibility: visible; cursor: pointer;"><text style="pointer-events: none;" x="189.75" y="9">data2</text><rect class="c3-legend-item-event" style="fill-opacity: 0;" x="175.75" y="-5" width="52" height="21"></rect><line class="c3-legend-item-tile" style="stroke: rgb(255, 127, 14); pointer-events: none;" x1="173.75" y1="4" x2="183.75" y2="4" stroke-width="10"></line></g></g><text class="c3-title" x="170.75" y="0"></text></svg><div class="c3-tooltip-container" style="position: absolute; pointer-events: none; display: none;"></div></div>

[liZe]

OK, it's inline SVG, and it's not supported (yet 😢) by WeasyPrint (see #75). You can save the SVG and include it in the HTML using a img or embed tag, or even change it into a base64 URL.

[MarouaneFawzi]

Alright thank you mate :)

[liZe]

Alright thank you mate :)

Good luck!