Colors not showing... ideas?

[danielnjoo]

Desired image
Output image

The SVG string renders in codepen as desired, however, when I render it with svg2img I get the output as above. Any ideas where this might be going wrong?

My pipeline involves posting the rendered JPEG to s3, and then sending it via Facebook Messenger, and it hasn't gone wrong until now.

If you need any more info let me know, thanks for any help :)!

[fuzhenn]

Hi!

svg2img‘s work flow is as below:

img => svg2img(prepare options) => canvg(parse SVG and draw on canvas) => node-canvas

The problem looks like a parsing problem of canvg. If it's OK, you can post your SVG here, I will take a quick check if there is anything unnormal.

[danielnjoo]

Here's the svgstring, amazing response time 👍

[fuzhenn]

Sorry for the late response.

It may be related with external css.

        .axis {
          stroke: #555;
          stroke-width: .2;
        }
        .scale {
          fill: #e7e7e7;
          stroke: #999999;
          stroke-width: .2;
        }
        .shape {
          fill-opacity: .7;
          stroke-width: .5;
        }
        .shape:hover {
          fill-opacity: .6;
        }
        
    .shape.something1 { fill: #edc951; }
    .shape.something2  { fill: #cc333f; }
    .shape.something3 { fill: #00a0b0; }

canvg doesn't support style defines in external CSS, as canvg/canvg#323. You can try to inline the styles, it may resolve your problem.

[danielnjoo]

OK thanks for the idea, but if external CSS doesn't work, but do the preceding styles get applied?

[fuzhenn]

canvg seems to only have limited support of preceding styles, as mentioned in canvg/canvg#414.

I think the problem may come from the selector .shape.something1 { fill: #edc951; }. canvg may be unable to parse the css selector like .shape.something1.

You may replace .shape.something1 to sth like .shape-something1 and see if it can resolve the issue.