External css file for SVG styles- best practices?

[rhinowalrus]

Is there support for applying styles from an external css file to inline svg's? I've done some tinkering around adding processing instructions to the svg and transcoding hints without much luck.

[syjer]

hi @rhinowalrus , as far as I know, the css does not apply to inline svg.

Maybe at rendering time we could modify the dom of the inlined svg and apply the correct styles in the code.

Could you provide an example so maybe I can try to implement it? :)

[rhinowalrus]

@syjer, sure thing! Here's an example from one of our charts.

external.css:

.allocation-wrapper svg{
    /* requires height, width */
    position:relative;
    height:325px;
    width:200px;
}

.circle-legend .slice1{
    stroke:#86BC40;
    fill:#86BC40;
}

.circle-legend .slice2{
    stroke:#60923F;
    fill:#60923F;
}

.circle-legend .slice3{
    stroke:#A84D9D;
    fill:#A84D9D;
}


.donut-chart circle{
    stroke-width:100;
    fill:none;
}

.donut-chart .slice1{
    stroke:#86BC40;
}

.donut-chart .slice2{
    stroke:#60923F;
}

.donut-chart .slice3{
    stroke:#A84D9D;
}

Markup:

<div class="svg-wrapper allocation-wrapper">
  <svg xmlns="http://www.w3.org/2000/svg" fill-opacity="1" color-rendering="auto" color-interpolation="auto" text-rendering="geometricPrecision" style="display:block;" stroke-linecap="butt" shape-rendering="auto" stroke-opacity="1" fill="black" stroke-dasharray="none" font-weight="normal" stroke-width="1" viewBox="0 200 550 450" font-style="normal" stroke-linejoin="miter" font-size="12px" stroke-dashoffset="0" image-rendering="auto"><!--Generated by the Batik Graphics2D SVG Generator--><defs id="genericDefs"/><g/><g class="donut-chart asset-allocation-pie"><circle stroke-dashoffset="1250px" fill="none" r="159" stroke-dasharray="340px 660px" class="slice1" cx="210" cy="210"/><circle stroke-dashoffset="910px" fill="none" r="159" stroke-dasharray="330px 670px" class="slice2" cx="210" cy="210"/><circle stroke-dashoffset="580px" fill="none" r="159" stroke-dasharray="330px 670px" class="slice3" cx="210" cy="210"/></g><g class="circle-legend circle-legend-auto"><circle r="20" class="slice1" cx="20" cy="470" stroke="none"/><text font-size="28" x="50" y="477">US Bonds</text><text font-size="28" x="350" y="477">34%</text><circle r="20" class="slice2" cx="20" cy="517" stroke="none"/><text font-size="28" x="50" y="524">Canada Universe Bond</text><text font-size="28" x="350" y="524">33%</text><circle r="20" class="slice3" cx="20" cy="564" stroke="none"/><text font-size="28" x="50" y="571">Cash</text><text font-size="28" x="350" y="571">33%</text></g></svg>
</div>

In our setup using iText and Flying Saucer we would replace the svg elements with pngs, and in the process add the following transcoder hint that pulled in the external css.

transcoder.addTranscodingHint(PNGTranscoder.KEY_USER_STYLESHEET_URI , "classpath://SOMEPATH/external.css");

The inline svg support in openhtmltopdf is awesome. Hoping we can find a good way to utilize it with our external svg css

[syjer]

hi @rhinowalrus thank you for the example and clarifications :).

I'll have a look this week end.

[rhinowalrus]

@syjer, thank you for your assistance. My colleague has a solution for us. He plans on opening a PR with the fix. I'll link it here when it is up and close the issue.

[amckain92]

@syjer @rhinowalrus
Added PR for issue: #496
Thanks!