NS_ERROR_ILLEGAL_VALUE error and some problem SVG files.

[gabelerner]

From azar...@gmail.com 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

[gabelerner]

From numeri...@gmail.com on August 01, 2013 07:51:54

Thanks for this post. The proposed fix to canvg code did the trick for me.

[gabelerner]

From azar...@gmail.com on August 06, 2013 22:31:00

Glad to help! :)

[gabelerner]

From dan...@trydesignlab.com on September 10, 2013 13:20:45

I also appreciate the fix! Is there any chance of this getting merged into the project?

[gabelerner]

From azar...@gmail.com on September 12, 2013 00:15:56

I hope that the CanVG Author will include this fix or likewise code in the future version. Proposed fix is quick & dirty code, maybe the Author will propose more elegant solution. The key point is conversion error which is triggered when CanVG tries to convert 'none' to float.

[gabelerner]

From gabelerner@gmail.com on September 17, 2013 17:54:59

should be fixed by r182

Status: Fixed

[gabelerner]

From azar...@gmail.com on September 22, 2013 20:18:55

Great, thanks! NS_ERROR_ILLEGAL_VALUE should be fixed now. Please, take a look at the problem SVG files in attach as well.

[gabelerner]

From gabelerner@gmail.com on September 22, 2013 20:46:23

Status: Accepted

[gabelerner]

From openja...@gmail.com on October 10, 2013 12:21:15

Hi

I have the same problem and the r182 (or r18x) didn't solve the problem.
I have still the NS_ERROR_ILLEGAL_VALUE message in FF

The reason is that the ToNumberArray still returns arrays like [NaN]

[gabelerner]

From gabelerner@gmail.com on November 23, 2013 10:25:41

@azartox: I just ran de.svg from your zip file on my example page in chrome and firefox and it rendered fine. What svgs are buggy?

@openjacob: Please attach your svg file so that I can debug further.

[gabelerner]

From azar...@gmail.com on November 25, 2013 01:00:23

@gabelerner: Please see de.png to look at differences between CanVG output (upper image) and expected output (lower image, produced by in Firefox). In this particular case the first stripe of the german flag is white instead of black. This is because in my code I fill canvas with white color.

For other files the differences can be more serious. For example, in by.svg whole svg element (ornament) is missing in the CanVG output.

[gabelerner]

From vladim...@gmail.com on January 31, 2014 02:57:52

One more example of code which causes specified error.

Tested in Firefox 26 on site " http://canvg.googlecode.com/svn/trunk/examples/index.htm " and in my software. On that site no canvg or svg output.

[gabelerner]

From gabelerner@gmail.com on January 31, 2014 18:53:11

I just fixed the stroke-dasharray=0 error in firefox causing NS_ERROR_ILLEGAL_VALUE in r193

[gabelerner]

From gabelerner@gmail.com on January 31, 2014 19:30:38

fixed by r194 and r195

Status: Fixed
Owner: gabelerner@gmail.com

[gabelerner]

From azar...@gmail.com on February 04, 2014 22:29:23

Thanks, many issues were fixed successfully. But unfortunately there are some files that still can't be rendered correctly (see attach).

*.svg is original files
*.png were saved from canvg canvas via "Save As"

1851212562_canvg.png and 3908626053_canvg.png have some positioning problems, not sure that it is a bug in canvg but still... :)

Other files has some missing elements when rendered by canvg, please compare *.svg and *.png visually.

BTW, I changed the canvas background color to black. If it is white, some other files has problems, such as german flag discussed above, but I think that it is OK. It seems that these SVGs were initially created on black background.

Thanks for good work one more time!

Attachment: 486239698.svg 486239698_canvg.png 1851212562.svg 1851212562_canvg.png 3212842636.svg 3212842636_canvg.png 3908626053.svg 3908626053_canvg.png ad.svg ad_canvg.png

[gabelerner]

From gabelerner@gmail.com on March 15, 2014 13:11:53

I just tested all of these in the latest version on Chrome and they all seem to be pixel perfect. Make sure you use http://canvg.googlecode.com/svn/trunk/canvg.js in your testing instead of the latest download until I release a new download.