I'm currently preparing a pull request for https://github.com/A----/highcharts-export-clientside/issues/27, which depends on this. It would be nice if I could add this package as an actual dependency with a semver version constraint instead of locking it to a git commit.

It seems like https://www.npmjs.com/package/canvg is not an official package and also says it's a "port" and that "all browser-specific code has to be removed". Could you maybe publish an official package at NPM if @yetzt makes the name available, so this can be properly depended on?

From [email protected] on August 05, 2010 14:25:18

As requested by an SVG-edit user [1], it would be nice to have support for elements. Thanks!

[1] https://code.google.com/p/svg-edit/issues/detail?id=635

Original issue: http://code.google.com/p/canvg/issues/detail?id=51

I got the canvas after v.render({...}), and then I use the canvas to carry out "canvas.toDataURL('image/jpeg', 1)", it was failed, hint me: "DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported." I can't find out what was tainted, can you help me?

From [email protected] on August 10, 2012 08:43:50

What steps will reproduce the problem? 1.Use the user interface to add a picture to fill a Raphael Object. 2.Click Button for Raphael to Canvas conversion. 3.Image fill will be cut up and repositioned. What is the expected output? What do you see instead? Expected output would be the images not cut up and repositioned but I see them cut up and repositioned. What version of the product are you using? On what operating system? Not Sure. OS is Windows 7. Please provide any additional information below. I have attached two files that are images that display what I am talking about. I have created this user interface in Raphael and what the user can do is fill the different raphael objects with pictures. After they get done doing that I want to have them click a button to begin the SVG to canvas conversion. Issue is when they do this the images get all cut up and repositioned. I do not understand why. Please help.

Attachment: screenshot1.png screenshot2.png

Original issue: http://code.google.com/p/canvg/issues/detail?id=158

update deprecated rollup-plugin-babel to @rollup/plugin-babel

Also switches to current API with babelHelpers: 'runtime', adding @babel/runtime as dependency and externals as required for this option per https://github.com/rollup/plugins/tree/master/packages/babel#babelhelpers . and removing now outdated and invalid runtimeHelpers.

(Also switches .babelrc to use "json" file extension.)

1. Can we eject .eslintrc so we can edit it here for our future needs?
2. Can we eject .browserlistrc so we can edit it here for our future needs?
3. Issue 104 is broken (in both v2/v3, need to move it to broken, this is my mistake from earlier - i went through all the generated images and v3 matches or beats v2 on all of them!) <== never mind it's already listed in broken
4. Should we add back jsfiddle/codepen link for people to replace/submit issues?
5. Do we want to support the existing browser use cases: 5a) Explain to people how to use it w/o yarn using cdns including the dependencies? 5b) canvg() without parameters replacing everything? 5c) .drawSvg(...) support (may be useful on node also)?
6. image.crossOrigin = 'Anonymous' needed?

@dangreen thoughts?

From [email protected] on July 12, 2013 02:11:40

Hello!

I'm using CanVG to draw some country flags. Thanks for great library, it helped me a lot. Unfortunately, I have problems with some svg files. See attached archive for used svg files and expected and actual results comparison. What steps will reproduce the problem? 0.

First of all, there is possibly a bug in the svg.ToNumberArray function. I understand that it should be posted as another issue, but in the current state some files (such as sm.svg) just can't be opened at all due to the NS_ERROR_ILLEGAL_VALUE error.

Proposed quick fix for CanVG v1.3 goes at the bottom.

1. Use the following code to draw SVG using CanVG: function drawFlag(flagImage) { var c=document.getElementById("myCanvas"); if (flagImage !== null) { var cxt=c.getContext("2d"); cxt.fillStyle = 'rgba(255,255,255,1)'; cxt.fillRect(0, 0, cxt.canvas.width, cxt.canvas.height); cxt.drawSvg( 'Stringified SVG data from web service goes here', 0, 0, cxt.canvas.width, cxt.canvas.height ); } else { c.style.display="none"; } } ... Your browser does not support the canvas element.

2. Check results visually What is the expected output? What do you see instead? See corresponding png files in the attached archive. Upper image is the CanVG output. Lower image is the expected output (produced by in Firefox) What version of the product are you using? On what operating system? I'm using CanVG v1.3. Some of this files were displayed correctly on v1.2. OS is the Debian Linux. Please provide any additional information below. Proposed quick fix for CanVG v1.3. Change CanVG code:

           svg.ToNumberArray = function(s) {
       var a = svg.trim(svg.compressSpaces((s || '').replace(/,/g, ' '))).split(' ');
                   var result = [];  // added code
       for (var i=0; i<a.length; i++) {
           a[i] = parseFloat(a[i]);
                           if (!isNaN(a[i])) {  // added code
                               result.push(a[i]);  // added code
                           }  // added code
       }
       return result;  // it was 'return a;'
   }
   

Otherwise it will fail on sm.svg, and some other files, because it contains stroke-dasharray:none

The problem code in canvg.js was: if (this.style('stroke-dasharray').hasValue()) { var gaps = svg.ToNumberArray(this.style('stroke-dasharray').value); if (typeof(ctx.setLineDash) != 'undefined') { ctx.setLineDash(gaps); } else if (typeof(ctx.webkitLineDash) != 'undefined') { ctx.webkitLineDash = gaps; } else if (typeof(ctx.mozDash ) != 'undefined') { ctx.mozDash = gaps; }

Firefox had failed on the last line with the message: Error: NS_ERROR_ILLEGAL_VALUE: Illegal value

Attachment: buggy.zip

Original issue: http://code.google.com/p/canvg/issues/detail?id=238

In this PR the following changes are implemented:

• there is a single source file canvg.src.js (any modifications must be done in this file from now on)

  • This file is used by Rollup to generate canvg.js and canvg.node.js.
  • I suggest adding a CONTRIBUTING section to README.md or a PR template to remind the contributors not to modify canvg.js nor canvg.node.js. They should modify only canvg.src.js and then build.

• when running npm run build it will generate canvg.js and canvg.node.js

  • canvg.js is meant for usage in the browser and doesn't use jsdom nor xmldom
  • canvg.node.js is meant for usage in node, and therefore it uses jsdom and xmldom to simulate the window behavior
  • Builds can be generated separately by running npm run build:browser and npm run build:node

• Tests are ran using AVA and reported to the console using tap-diff. The command is still npm run test.

  • Browser side tests are ran by instantiating a local webserver on port 3123 (can be changed with ENV variables) then using puppeteer to simulate user interaction with a headless browser. Actual generated images are saved to test/actual_browser
  • Node tests are ran with AVA in the same way they are ran actually, but actual results are saved to test/actual_node.
  • browser and node tests can be run separately using npm run test:node and npm run test:browser

• Both browser and node tests consider the test passed if the generated images are similar (given a certain threshold) to the expected image. Similarity is determined using blink-diff

  • The difference between images, when their difference is above the threshold, are stored in test/diff_node and test/diff_browser for further inspection.

• given that now we're using a testing framework, the test tasks will exit with non-zero status if any test fails. (prior to this PR, it didn't matter if tests failed). This is the intended behavior for tests tasks if you want to automate them using (for exaple) Travis.

• files to test are listed in test/_svgs.js as a object with structure {file: description} to provide more info about the test we are running. Prior to this, the files to test where obtained from the svgs folder.

• Users can test the examples by running npm start and navigating to http://localhost:3123/examples/index.htm. I added this instruction to README.md

• I added an alternative example index at examples/index.html which also displays

  • The image from test/expected as dataURI
  • The image from test/expected as blob
  • The image from canvg as dataURI (using canvas.toDataURL)
  • The image from canvg as blob (using canvas.toBlob)

I have a SVG with foreignObject as follows. <svg id="comp_gen_summary" width="912" height="200"><text x="912" y="10" text-anchor="end" font-size="10px" font-family="Axiforma" fill="rgba(0,0,0,.56)">Confidence score 95%</text><g><circle class="legend-circle" cx="5" cy="46" r="5" fill="#00229ed4"></circle><circle class="legend-circle" cx="5" cy="64" r="5" fill="#007fc6d4"></circle><text class="legend-text" x="26" y="49" font-size="10px" font-family="Axiforma" fill="#00229ed4">Men</text><text class="legend-text" x="26" y="67" font-size="10px" font-family="Axiforma" fill="#007fc6d4">Women</text><text x="68.30995178222656" y="67" fill="rgba(0,0,0,.56)" font-size="10px" font-family="Axiforma">- Equality Index</text></g><text x="464" y="46" font-size="10px" font-family="Axiforma" fill="#00229ed4">Pay gap 2018</text><text x="496.80995178222656" y="94" text-anchor="middle" font-size="40px" font-family="Axiforma Medium" fill="#00229ed4">10.4%</text><foreignObject x="696" y="46" width="216" height="154"><body style="font: 14px Axiforma; background-color: rgb(255, 255, 255);">In year 2018 Gender Male's pay gap is 10.37. Male employees are being payed above your Equality Index threshold</body></foreignObject></svg>

While converting, it is ignoring the foreignObject. Is there any workaround to this? Thanks.

I'm trying to use 3.0.0 in a project, and its fixed an issue I had with 2.0, so thats great! But there are a few weird things. The first is a type error when trying to use it server-side:

node_modules/canvg/lib/Transform/types.d.ts:5:18 - error TS2304: Cannot find name 'RenderingContext2D'.

5     unapply(ctx: RenderingContext2D): void;
                   ~~~~~~~~~~~~~~~~~~

(and a bunch more)

it seems that the globals.d.ts file isn't included in the generated lib directory. In general I'm using canvg server side and client side - I would really prefer if you could just use something like tsc to turn the code to modern JS, and let users take care of e.g. async transforms and other rollup/webpack features to support older browsers. (a separate issue took a while to track down because the async transform made it hard to figure out what was throwing).

Overall this is super work tho!

Hello, I wanted to ask, why canvas was moved from dev dependency to dependency in https://github.com/canvg/canvg/commit/a6bc36b1e3e4bb010d5d135405317666462252c9 - could this be reverted and a new version released?

Would you like to work on a fix?

• [ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

The following SVG will not render using Canvg.

<svg version="1.1" baseProfile="full" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" id="react-sketch-canvas" style="width: 100%; height: 100%;" viewBox="0 0 1059 675" width="1059" height="675"><g id="react-sketch-canvas__eraser-stroke-group" display="none"><rect id="react-sketch-canvas__mask-background" x="0" y="0" width="100%" height="100%" fill="white"></rect></g><defs></defs><g id="react-sketch-canvas__canvas-background-group"><rect id="react-sketch-canvas__canvas-background" x="0" y="0" width="100%" height="100%" fill="white"></rect></g><g id="react-sketch-canvas__stroke-group-0" mask="url(#react-sketch-canvas__eraser-mask-0)"><path id="react-sketch-canvas__0" d="M 238.43209838867188,439.17108154296875 C 238.37274169921875,439.17108154296875 237.90307006835937,439.97108154296876 238.13531494140625, 439.17108154296875 C 238.36755981445313,438.37108154296874 237.9771484375,435.97108154296876 239.59332275390625, 435.17108154296875 C 241.2094970703125,434.37108154296874 241.62747802734376,435.17108154296875 246.2161865234375, 435.17108154296875 C 250.80489501953124,435.17108154296875 251.14334716796876,435.2710815429688 262.536865234375, 435.17108154296875 C 273.9303833007813,435.0710815429687 281.3144897460937,434.87108154296874 303.18377685546875, 434.67108154296875 C 325.0530639648438,434.47108154296876 349.8433471679688,434.2710815429688 371.88330078125, 434.17108154296875 C 393.9232543945312,434.0710815429687 396.82886962890626,434.17108154296875 413.383544921875, 434.17108154296875 C 429.93822021484374,434.17108154296875 437.06492919921874,434.17108154296875 454.65667724609375, 434.17108154296875 C 472.24842529296876,434.17108154296875 482.7284790039063,435.26245727539066 501.34228515625, 434.17108154296875 C 519.9560913085937,433.0797058105469 529.1119018554688,430.9040588378906 547.7257080078125, 428.7142028808594 C 566.3395141601562,426.52434692382815 576.7741577148438,427.0140441894531 594.4113159179688, 423.2218017578125 C 612.0484741210937,419.4295593261719 624.8318969726563,413.06443481445314 635.9114990234375, 409.75299072265625 C 646.9911010742187,406.44154663085936 639.7039428710938,409.7242004394531 649.809326171875, 406.6645812988281 C 659.9147094726562,403.60496215820314 674.3360229492188,398.48902587890626 686.4384155273438, 394.45489501953125 C 698.5408081054687,390.42076416015624 699.9802490234375,390.22630004882814 710.3212890625, 386.4939270019531 C 720.6623291015625,382.7615539550781 728.2006225585938,379.92344970703124 738.1436157226562, 375.79302978515625 C 748.0866088867188,371.66260986328126 754.6994506835938,368.4070251464844 760.0362548828125, 365.8418273925781 C 765.3730590820312,363.27662963867186 761.634521484375,364.6594177246094 764.82763671875, 362.967041015625 C 768.020751953125,361.2746643066406 771.296630859375,360.0413452148438 776.0018310546875, 357.37994384765625 C 780.70703125,354.7185424804687 784.63330078125,352.45399169921876 788.3536376953125, 349.6600341796875 C 792.073974609375,346.86607666015624 791.9567626953125,346.61561889648436 794.603515625, 343.41015625 C 797.2502685546875,340.20469360351564 800.190625,335.5882080078125 801.58740234375, 333.6327209472656" fill="none" stroke-linecap="round" stroke="black" stroke-width="30"></path></g></svg>

Even the demo only produces a blank output for the SVG.

Reproduction

https://canvg.js.org/demo/

Canvg version

4.0.1

Possible solution

Is my SVG invalid/unsupported somehow? I'm able to render it in various online SVGviewers (like so).

Hi canvg/canvg!

This is a one-off automatically generated pull request from LGTM.com :robot:. You might have heard that we’ve integrated LGTM’s underlying CodeQL analysis engine natively into GitHub. The result is GitHub code scanning!

With LGTM fully integrated into code scanning, we are focused on improving CodeQL within the native GitHub code scanning experience. In order to take advantage of current and future improvements to our analysis capabilities, we suggest you enable code scanning on your repository. Please take a look at our blog post for more information.

This pull request enables code scanning by adding an auto-generated codeql.yml workflow file for GitHub Actions to your repository — take a look! We tested it before opening this pull request, so all should be working :heavy_check_mark:. In fact, you might already have seen some alerts appear on this pull request!

Where needed and if possible, we’ve adjusted the configuration to the needs of your particular repository. But of course, you should feel free to tweak it further! Check this page for detailed documentation.

Questions? Check out the FAQ below!

FAQ

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | @swc/helpers (source) | ^0.3.2 -> ^0.4.0 | | | | |

Release Notes

Configuration

📅 Schedule: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

• [ ] If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

Would you like to work on a fix?

• [X] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

Current and expected behavior

Tracing through the code, as far as I can tell, in SVGElement.ts

const viewBoxAttr = this.getAttribute('viewBox')
//....
 if (!viewBoxAttr.hasValue()) {
      viewBoxAttr.setValue(`0 0 ${originWidth || width} ${originHeight || height}`)
    }

Doesn't work as expected because getAttribute('viewBox') wasn't called with the createIfNotExists parameter set to true, so the viewBoxAttr.setValue(... does nothing.

https://github.com/canvg/canvg/blob/cd004e5ca121ff1a51f4bd55da6d803d9e95c1f1/src/Document/SVGElement.ts#L161

Reproduction

Any SVG with no viewbox attribute can't be resized

Canvg version

v4.0.1

Possible solution

Add 'true' as a second parameter to this.getAttribute('viewBox' ...)

Would you like to work on this feature?

• [ ] Check this if you would like to implement a PR, we are more than happy to help you go through the process.

What problem are you trying to solve?

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 static SVG images so far.

But I also need to show animated SVGs. Currently I can only get the first frame of the SVG rendered on the canvas by using v.start() or v.render().

I understand that in a node.js environment we cannot call requestAnimationFrame() so that's probably why canvg does only render the first frame. It seems to work out of box on the basic example in a browser.

Describe the solution you'd like

I'm looking for a way to trigger the rendering again in a node.js process, based on timer or external event, with awareness for the time that has passed since last render, in respect for the animation progress.

  const preset = presets.node({
    DOMParser,
    canvas: Canvas,
    fetch,
  })

  const canvas = preset.createCanvas(width, height)
  const ctx = canvas.getContext('2d') // TODO: switch to RGB24

  const svgStr = getSVG(t, 'Thank you')
  const v = Canvg.fromString(ctx, svgStr, preset)
  v.start()
 
  async function drawFrame() {

    // I need something here to request the next frame of
    // the animation so it can be drawn on the canvas before
    // the canvas is exported as bitmap.
    // Example of what I need:
    await v.nextFrame(new Date().getTime())
   
    const renderedImage = ctx.getImageData(0, 0, width, height)
    const buffer = Buffer.from(renderedImage.data)
    em.emit('newFrame', buffer)
  } 

  someTrigger.onEvent(drawFrame)

Describe alternatives you've considered

No response

Documentation, Adoption, Migration Strategy

No response