0

I have an SVG graphic drawn dynamically from data. It looks like this: SVG

I am using Canvg to create a (hidden) canvas element and allow the user to save SVG as image or pdf. The Canvas looks like this:

Canvas version of SVG, translated by canvg

The styling is wrong (!) and some paths appear to be missing too. I have tried using CSS to change the styling. This has worked for background colour and font-family but not for anything else:

canvas#canvas {
    background-color: aliceblue;//works
    font-family: sans-serif;//works
    font-size: 10px;//works
    fill: gray;//doesn't work
}

Does anyone know how to style paths and font color in the creation of a canvas element using canvg?

emma
  • 784
  • 2
  • 9
  • 23
  • canvg has gaps... I think you should avoid as much as possible the use of CSS and of any `xlink:href` attributes or `url()` into attributes so it can render it as accurately as possible. Also, it may be interesting for us to know wether you do use a library to produce the svg or not, maybe this library has an export module that you could use. – Kaiido Dec 03 '15 at 14:36
  • Thanks Kaiido - I'm using d3.js. I'm not using xlink or url() attributes. I'm only trying CSS because it looks even worse without it! – emma Dec 03 '15 at 15:36
  • Then, I don't know what's the canvg gaps are here... You could try [this script](https://github.com/Kaiido/SVG-to-Bitmap/blob/master/SVG2Bitmap.js) I am writing, this should work better. You can call it like `exportInlineSVG(yourSVGElement, receiver)`, `receiver` being either a canvas eleemnt, an img element or a calback function with the dataURL and canvas element as parameters. This may change in a near future, but you can tweak the code. – Kaiido Dec 03 '15 at 15:49

1 Answers1

0

Can use printThis library to save the div of the SVG as pdf. The div ID can be used to convert the SVG into pdf. For eg: if divID is svgdiv, you can execute this statement in jquery:

$("#svgdiv").printThis()

and it will download as pdf.

For more info: jasonday/printThis

hong4rc
  • 3,999
  • 4
  • 21
  • 40
AKSHAY V MADALGI
  • 68
  • 5