Questions tagged [canvg]

canvg is an SVG parser and renderer. It takes a URL to an SVG file or the text of an SVG file, parses it in JavaScript, and renders the result on a Canvas element. The rendering speed of the examples is about as fast as native SVG.

From http://code.google.com/p/canvg/

canvg is an SVG parser and renderer. It takes a URL to an SVG file or the text of an SVG file, parses it in JavaScript, and renders the result on a Canvas element. The rendering speed of the examples is about as fast as native SVG.

131 questions
17
votes
5 answers

SVG not displayed when using html2canvas

I am working on a project where I need to generate a pdf file (onclick saveFile as PDF) on the client side as some data are not to be sent to the server. I have read about these options available; fileSaver.js and html2canvas, and none seem to help.…
Kennan Obura
  • 315
  • 1
  • 4
  • 14
13
votes
1 answer

merge images from Raphael svg

Trying to create Step 1 - Let users upload images through Ajax, Raphael and Raphael freetransform. Step 2 - Click button to show one image from merge upload images. (Question): I have found similar post about convert Raphael svg 1 2 3, so I'm…
vibskov
  • 275
  • 4
  • 16
11
votes
2 answers

Canvas generated by canvg is blurry on retina screen

I'm using Raphael to draw an object, then transferring it to an HTML canvas element with canvg so that I can use toDataURL to save it as a PNG. But when I use canvg, the resulting image is blurry. The code below, for example, produces this (raphael…
AustinC
  • 826
  • 1
  • 8
  • 23
9
votes
1 answer

Is there any way to convert c3.js generated graph to png, and Png to Pdf in client side

I want to generate a PDF file on the client side with a graph and other tabular data coming from a JSON object. The following is the Javascript data binding part: BindReportToPdf: function (data) { //data is json object var rows = data; …
sanjeev bhusal
  • 245
  • 1
  • 14
9
votes
2 answers

How to apply canvg() function for particular div?

I am using canvg() function to convert svg into canvas. If we use canvg() directly on onload it will convert all svg to canvas. I wanted to convert svg related to particular div. Html
Not to…
Shrinivas Pai
  • 7,491
  • 4
  • 29
  • 56
7
votes
1 answer

C3.js SVG visualization to Canvas with canvg - Line charts filled with black rectangles , "ERROR: Element 'parsererror' not yet implemented"

I am attempting to convert a SVG to Canvas using Canvg. Here is the jsfiddle. I get an error saying, "ERROR: Element 'parsererror' not yet implemented". I can understand that the canvg library is not able to parse the SVG element. But, Is there a…
SriDev
  • 71
  • 1
  • 4
6
votes
2 answers

How to properly generate canvas from complex svg

I'm trying to export a complex SVG block (generated with c3) from my website as an image (be it png, svg, pdf, at this point I'm open to anything that solves it, although vector format would be ideal). I have tried html2canvas, canvg, jsPDF, and all…
6
votes
4 answers

export SVG to PNG with image inside SVG

I am trying to make a website where you can draw an image on top of another image using Raphael.js. The drawing parts are finished, and I am able to export the lines as a png. I insert images to the SVG raphael generates by the function…
5
votes
1 answer

Share SVG to Facebook

Users customize an SVG, and when they're satisfied, I want to give them the option of sharing the image on Facebook. I know Facebook doesn't accept SVGs, so, after reading this question, I came up with the following using canvg: var svgText =…
Randoms
  • 2,110
  • 2
  • 20
  • 31
4
votes
1 answer

jsPDF addSvgAsImage, canvg is not defined

I'm using jsPDF in my Typescript React project and I want to as an SVG to my PDF using jsPDF. I use addSvgAsImage like this: let svg = this.ref.innerHTML if (svg) svg = svg.replace(/\r?\n|\r/g, '').trim() pdf.addSvgAsImage(svg, 15, 45, 270, 130,…
Kavoos
  • 377
  • 4
  • 19
4
votes
0 answers

canvg not working for svg with image element?

I am working on converting svg to png. For this conversion I am using canvg. This conversion is working fine for normal svg with svg elements like rect and circle, But it doesn't work for svg which contain image element.I searched a lot but i didn't…
Karthi Keyan
  • 4,243
  • 5
  • 24
  • 47
4
votes
0 answers

SVG to PNG in javascript with filter support

I've been using this method to convert SVGs to PNGs using canvg: Convert SVG to image (JPEG, PNG, etc.) in the browser. However, canvg does not have support for feColorMatrix filters, which I need for my project. Does anyone know of an alternative…
4
votes
3 answers

highcharts and canvg scaling issue

This is kind of a specific issue but I imagine it might come in useful at some point for someone else if I can find a solution. I've got a need to convert some of my Highcharts graphs into PNGs on the browser end. The idea is that when our authors…
Jamie Poitra
  • 431
  • 4
  • 15
4
votes
1 answer

HTML Canvas image

I'm using AMcharts to draw graphs. I need to display the graph in pdf. So, i have converted the graph to png image and displaying it in a pdf. This processes successfully works in modern browsers except IE9. My problem is in IE9 only. I have two…
user2118463
  • 103
  • 3
  • 7
4
votes
1 answer

draw svg to canvas with canvg

I use canvg for set svg file in canvas. All is ok when I set svg url: var canvas = doc.getCanvas(num); var context = canvas.getContext('2d'); context.drawSvg("http://localhost:8084/manual.svg", 0, 0, width, height); But when I try to write (it…
Alexandra
  • 93
  • 2
  • 9
1
2 3
8 9