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
2
votes
2 answers

Canvg not supporting css

I have inline svg with is loaded dynamically from server. I want that svg to be manupulated or modifed using inline css. I have searched for converting that modified svg into png or base64 image. After long search i have decided to stick with Canvg.…
2
votes
1 answer

Canvg conversion - weird behavior when using a fill url

I'm trying to convert svg to canvas using the canvg js lib. The original svg contains a rect which has a fill attribute of url to a svg pattern. When I convert the svg to canvas using canvg: canvg(document.getElementById('canvas'), svg); The image…
Rivka
  • 171
  • 1
  • 6
2
votes
4 answers

When using canvg to convert Highchart SVG into PNG, all text appears twice - how to solve?

Here's my (truncated) example SVG image (made with Highcharts, http://www.highcharts.com/ ) - when I render that onto a canvas (with canvg (https://github.com/gabelerner/canvg and code adapted from here: https://stackoverflow.com/a/8997520/2067690)…
HumanInDisguise
  • 1,335
  • 4
  • 17
  • 29
2
votes
1 answer

canvg doesn't work with svg already placed in body?

I want to converty my SVG into CANVAS and then save it as image. I have svg already genereated by javascript in my page. I use this code: $("#menu-save-image").click(function () { var svg = document.getElementsByTagName('svg'); var canvas =…
sko
  • 431
  • 1
  • 5
  • 10
2
votes
1 answer

JQuery: use element's html() (innerHTML) as a parameter to canvas's drawSvg method

I am trying to convert/ put an SVG into a canvas using the drawSvg() function. The command is: ctx.drawSvg(SVG_XML_OR_PATH_TO_SVG, dx, dy, dw, dh);. This works fine when I specifically put the svg in as a parameter, for example:…
yodofizzy
  • 63
  • 2
  • 14
2
votes
1 answer

How to convert/export d3.js graph (callapsible tree) to SVG/PDF/PNG

I'm building an d3.js collapsible tree and used this (http://bl.ocks.org/mbostock/4339083) example for my work. This works great but I also will provide an option to download/export this tree as SVG/PDF/PNG. I searched a long time to handle this…
user3017615
  • 549
  • 1
  • 5
  • 9
2
votes
1 answer

SVG to Canvas with Canvg - line filled in and background lines dropped?

I am attempting to convert a SVG to Canvas using Canvg. Right out of the box is pretty good. Original SVG Graph Canvas Render I am having a hard time figuring out: Why is the line "getting filled in"? It appears that a line is being drawn from…
jeffhuber
  • 139
  • 2
  • 11
2
votes
1 answer

Mysterious growth after copying a SVG to a canvas

I have a svg on my page that I need to export to a png, so following the advice here, I'm using canvg. The copy seems to work fine at first but then the canvases height starts mysteriously increasing. Am I doing something obviously wrong? I've tried…
woggles
  • 7,444
  • 12
  • 70
  • 130
1
vote
0 answers

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 like npm in our project. We are directly using the…
Vishnu
  • 11
  • 1
1
vote
0 answers

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.svg
codingrohtak
  • 160
  • 8
1
vote
2 answers

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 Canvg from 'canvg/dist/browser/canvg.min.js'; //…
Artyomska
  • 1,309
  • 5
  • 26
  • 53
1
vote
1 answer

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 don't know the first two lines of canvg.js…
Sharon
  • 138
  • 16
1
vote
0 answers

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. I've tried disabling imageSmoothingEnabled on the…
Mojimi
  • 2,561
  • 9
  • 52
  • 116
1
vote
1 answer

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.
Nikita
  • 215
  • 3
  • 13
1
vote
0 answers

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) { svg = svg.replace(/\r?\n|\r/g,…
1 2
3
8 9