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.

Filter by
Sorted by
Tagged with
0 votes
1 answer
83 views

Upload an image from a canva javascript to an SVG

Here's the beginning of my codeI made some plots in a javascript canvas and I would like to be able to download them in svg format directly to my computer's hard drive. So I made a button, and a ...
Camille MARTINET's user avatar
0 votes
0 answers
138 views

How to render SVG containing image loaded from URL in Three.js?

I'm displaying a 3d-force-graph with custom node images. Until now, these were just .png images and everything works like this: .nodeThreeObject((n) => { const node = n as Node; const data =...
Spenhouet's user avatar
  • 6,576
1 vote
0 answers
96 views

How to generate JavaScript output from the latest Canvg version(4.0.1)?

We are using the Canvg plugin version(2.0.0) (https://github.com/canvg/canvg) in our Javascript project. We are trying to upgrade it to the latest version (4.0.1). We don't use any package manager ...
Vishnu's user avatar
  • 11
0 votes
1 answer
330 views

Canvg error: Cannot read properties of undefined (reading 'documentElement')

For my application I am using Canvg (also jsPDF, but that's not relevant) and when I invoke the canvg() method it gives me this error: Uncaught TypeError: Cannot read properties of undefined (reading '...
jop frenken's user avatar
1 vote
0 answers
143 views

How to download PNG image using s3 URL to it's SVG in ReactJs?

I want to download as a PNG image using amazon s3 url which is a svg. What's the ideal way to convert this SVG to PNG and download it? s3 URL: https://eocs-icons.s3.amazonaws.com/withText/2022/clean....
codingrohtak's user avatar
0 votes
1 answer
161 views

Animated SVGs in canvg on node.js - how to render/request next frame?

I have a node.js process with a canvas that is being exported to a frame buffer as a bitmap (RGBA values in Uint8Array). Now I want to draw SVG to this canvas, and found canvg which works well for ...
Esben von Buchwald's user avatar
0 votes
1 answer
174 views

Does canvg still have a way to trigger code when the render is finished?

There used to be a way to add a callback function renderCallback. I've searched high and low but can't seem to find any examples of how to replicate that in canvg 3.x. Is there anyone who can point me ...
Jamie Poitra's user avatar
0 votes
0 answers
143 views

html2canvas not renderig svg (chartist line)

I am using chartist to take a screenshot of my page which contains a chart line and save it to the server, the page is displayed correctly but the chart is not rendered. I did some research before ...
Rania MALK's user avatar
0 votes
1 answer
1k views

Downloading Canvas as JPG/PNG returns blank image

So, I'm using canvg and the function which converts svg file to a jpg/png just downloads and ignores id of a svg block element, so I get the blank image, what could be wrong? Maybe Vue does not ...
Jan Tuđan's user avatar
0 votes
0 answers
41 views

SVG/Canvas with background image to png conversion gives black background [duplicate]

I have a svg with background patterns defined using images. To convert this SVG into png and save in disk , I am using canvg to convert first into canvas and into png image as follows: const canvas =...
Sanjay's user avatar
  • 515
0 votes
0 answers
118 views

SVG chart is converted wrong with Canvg

When I try to convert a svg chart with Canvg, the bars of the char are missing. I think the problem might be that the svg is attached to the canvas before the bars animations are executed. const ...
Spongi's user avatar
  • 501
0 votes
2 answers
1k views

canvg cannot call a class as a function

For a project I am working on I need to transform a svg to png file. In order to do so I have found multiple guides and explanations online. One of these can be found here: Exporting D3 charts to PDF ...
Stephen's user avatar
  • 963
-1 votes
1 answer
789 views

How to generate an SVG of Highcharts graphics with images on the bars and show on the canvas tag?

I need get chart with images in bars (i using pattern and script Highstocks) and put in a tag Canvas, but when i send SVG to tag Canvas the images in bar disappear. Do you can help me? Follow bellow ...
Tecnologia Grupo Posture's user avatar
0 votes
0 answers
165 views

Print a diagram with html2Canvas, jsPdf, file-saver

I have an Angular application where I use the jsPlumb library to create a diagram. The output of jsPlumb is a wrapper div with many other divs and svgs inside positioned as absolute. This wrapper div ...
Konstantinos Papakonstantinou's user avatar
0 votes
1 answer
3k views

How to display svg image on PDF file with jspdf in vuejs

how to add a logo properly in a pdf file with jspdf in vuejs? I tried to use this addSvgAsImage function like this: const doc = new jsPDF() const logo = '/src/icons/svg/logo.svg' doc.addSvgAsImage(...
Jean-Paul's user avatar
  • 127
1 vote
2 answers
3k views

Integrating Canvg 3.0 with Angular project

In the application I currently develop, I am using the canvg library to make some canvas renderings in the page, and until now I used canvg 2.0 library to achieve this in the following manner: import ...
Artyomska's user avatar
  • 1,319
4 votes
1 answer
7k views

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, ''...
Kavoos's user avatar
  • 377
1 vote
1 answer
293 views

How to include "require" in PhpStorm for my JavaScript code?

I am using the line canvg('canvas', svg); in my code. This means I need canvg.js. I have included canvg.js in my html header. However it gives me an error that "require is undefined". For those that ...
Sharon's user avatar
  • 138
0 votes
0 answers
136 views

How to fix the canvg export in Internet Explorer?

I'm trying to export an image using canvg. It works fine on Chrome and Firefox but it doesn't on Internet Explorer, it changes to resulted image. With IE it also needs to be saved as SVG file and ...
Leo Messi's user avatar
  • 5,217
-1 votes
1 answer
80 views

Fail getting png from svg using canvg

I am using canvg.js to export a svg element to png image using cavas toDataUrl() but the resulting image is not correct I read another related post and they say that there is an error in canvg ...
José Gil Ceballo's user avatar
3 votes
2 answers
439 views

Do I need to remove or delete HTML elements that I created but didn't attach to the DOM?

I'm implementing client side download of some (High)charts that I have. What I'm doing now is getting the SVG source of the charts, creating a "canvas" element & drawing the SVG to said element, ...
nal88's user avatar
  • 33
0 votes
1 answer
3k views

how to add text in canvas with react and canvg library?

i'm trying to add text in canvas ( bottom right ) with react and canvg lib This is what i try : DownloadImage = (i) => { var _this = this; this.modeler.saveSVG(function (err, svg) ...
Ricky's user avatar
  • 17
2 votes
1 answer
728 views

How to fix cairo error in node.js app: Assertion failed: (angle_max >= angle_min)

ERROR I GET: Assertion failed: (angle_max >= angle_min), function _cairo_arc_in_direction, file cairo-arc.c, line 189. With some svg icons my code works fine, but some of them cause issue (error ...
Heydar Gerayzade's user avatar
0 votes
0 answers
646 views

Canvg - SVG Overflowing when using scale

Check this example here : https://jsfiddle.net/znbptw0c/ That SVG is extracted from amCharts library. But when I change it to a canvas image using canvg and transform : scale on the SVG, it cuts off ...
Mojimi's user avatar
  • 2,611
3 votes
2 answers
8k views

Combine two SVG elements into one using Javascript?

Let's say I have the following html context, which I don't have access to its creation : <div id="outer"> <div id="chart-div"> <svg id="chart"></svg> </div> &...
Mojimi's user avatar
  • 2,611
1 vote
0 answers
550 views

html2canvas blurring inner canvas

I have a html that already has a canvas inside it and regular html elements around the canvas. When I use html2canvas in the outer html, the inner canvas becomes blurred but not the outside elements. ...
Mojimi's user avatar
  • 2,611
0 votes
1 answer
1k views

canvg SVG rendering to wrong format

I have a piechart with labels and legend which looks fine in SVG but as soon as I use canvg to transform it to canvas some formats are missing / get wrong. SVG: Canvas: I already inline the CSS to ...
gothmogg's user avatar
0 votes
1 answer
665 views

SVG to Image export performance issues (using canvg / XMLSerializer / getComputedStyle)

I am using canvg to convert a chart svg to an image. We have the issue that by default not all CSS attributes are applied to the image so we ended up using getComputedStyle in a loop. This is a total ...
gothmogg's user avatar
0 votes
0 answers
159 views

Not able to export Highchart "SVG" image in microsoft edge using canvg library

Following code i tried to render and export Highchart SVG Image. I am able to get image downloaded while I Haven't hovered over my image(while there was no tooltip got added) But when i hover over ...
Dhawal's user avatar
  • 84
0 votes
1 answer
285 views

canvg is returning white screen with base64 string with angular5

I am trying to get a snapshot of svg present on a webpage in IE11. But, every time I am getting only white screen. I have done till now: let targetElem = <any>document.getElementById('...
ngWolf's user avatar
  • 307
0 votes
0 answers
227 views

Why when i use canvg ie throw exception Security error?

I have this code,but when i try to use canvas.toDataUrl i have exception "Security error" in ie 11,how i can resolve this problem? var svg = document.querySelector("svg");//get svg var img = ...
StackMan's user avatar
1 vote
1 answer
1k views

How to convert svg to png and save in ie 11?

I try to convert svg to png, but I have some problem with canvg, and I cant understand why.If i delete style from svg it is work,but i want to have png with styles. <!DOCTYPE html> <...
Nikita's user avatar
  • 215
1 vote
0 answers
287 views

amchart ,canvg ,pdf ,canvas,javascript

Why does axis label of Amchart missing, when displaying to PDF after SVG to canvas conversion using canvg parser? var image1 = $('div.amcharts-chart-div').get(0); var svg = image1.innerHTML; if (svg) ...
Khuram Shahzad's user avatar
6 votes
2 answers
930 views

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)....
Marcelo do Pagode's user avatar
1 vote
0 answers
2k views

canvas toDataUrl() returning black image

I'm creating a canvas based on svg using canvg and then through canvas I'm downloading an image. Here is the code for creating an canvas taking svg. //Creating the canvas var myCanvas = document....
Muhammad Faheem Ansari's user avatar
1 vote
1 answer
3k views

How to use canvg and svg to pdf in angular 2?

This is my Script Code. I m using JSPdf. //Add event listener document.getElementById("getPdf").addEventListener("click", getPdf); function getPdf() { //Get svg markup as string var svg = ...
Angu's user avatar
  • 862
1 vote
1 answer
1k views

Appending a div containing canvas is not working

I am making use of canvg to convert svg present in div into canvas(upto this it's working fine) and then copying the innerHTML of div to another div, but it's not working. Canvas is coming but nothing ...
Kumar's user avatar
  • 270
1 vote
0 answers
280 views

Canvas not generated using canvg on IE edge

Canvas not getting generated in IE edge only, instead a black box is appearing. Plugin used is Canvg svg = '<svg version="1.1" class="highcharts-root" style="font-family:&quot;Lucida Grande&...
infinityskyline's user avatar
0 votes
0 answers
2k views

Using html2Canvas to capture SVG image

I'm using html2Canvas library and trying to make a screenshot of a SVG with this code: var svgElements= $container.find('svg'); svgElements.each(function (){ var canvas, xml; canvas = ...
kari29's user avatar
  • 1
0 votes
1 answer
533 views

unable to save chart as image

I have written a function to save the chart as image.Below i have mentioned code which i have written : HTML: <div> <span id="save" onclick="javascript:saveChart1();" style="height:10px;...
sam140's user avatar
  • 219
1 vote
1 answer
280 views

Find the browsers default value for a CSS property with JavaScript

Is it possible to retrieve the browsers default value for a CSS property, ignoring any inline/imported styles, using JS? Some context: I'm using JS to in-line all styles on a specific SVG element and ...
DBS's user avatar
  • 9,187
0 votes
1 answer
643 views

canvg drawSvg() cannot position svg correctly

I have this svg <div style="width: 84px; height: 78px; position: absolute; margin: 0px auto; left: 88px; top: 67px;"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="...
Indronil Chaudhuri's user avatar
0 votes
1 answer
273 views

canvg() issue with overlapping tspan

I need to convert an svg element to png. while converting to png the text is getting overlapped and not aligning properly. The actual image is like this: enter image description here The ...
ACHU's user avatar
  • 11
2 votes
0 answers
2k views

jsPDF: How to properly render HTML + SVG to PDF (using html2pdf.js and canvg.js)?

I am using Treant.js javascript library to create an organisational chart, and jsPDF (along with html2pdf.js and canvg.js) to convert the chart to PDF. Yo convert the SVG elements (the lines that ...
Tanuj Dhaundiyal's user avatar
5 votes
1 answer
4k views

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 ...
Randoms's user avatar
  • 2,110
1 vote
0 answers
459 views

how use canvg for convert svg of bubble chart to png?

how i can use canvg library to convert bubble chart to png? i draw a bubble chart with highcharts library. when i use canvg and save to png i see a empty png. var svg = new Highcharts().getSVG() var ...
mrmr68's user avatar
  • 178
1 vote
1 answer
623 views

canvg not working in Edge

I am taking webpage screenshot of svg content using canvg. In Chrome, Opera and IE11 it seems to work fine, however in Edge browser it only weirdly renders black background with no content on the ...
Gagan's user avatar
  • 305
0 votes
0 answers
369 views

Issue with canvas.toDataUrl: error when the canvas contains a tag image with base64 data

i'm using this function to convert an svg to a jpeg (it includes canvg): svgToDataUrl(svg, format = 'jpeg') { var id = new Date(); var canvasElement = $(`<canvas id="${id}" ...
Daniele's user avatar
  • 81
3 votes
1 answer
3k views

s.substr is not a function

I am using canvg, but when I run this: jQuery("#print").on("click", function() { mySvg(); }); function mySvg() { var svg = jQuery("#map svg"); canvg(document.getElementById('canvas'), svg);...
Roberto Marras's user avatar
0 votes
1 answer
271 views

canvg fails on svg with xmlns

I am using canvg to render the following svg to the canvas however it fails. I am not sure why <svg class="circularReferenceSVG" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/...
Gagan's user avatar
  • 305