SVG background image does not render in IE

[i2shar]

If a node has a SVG background image, it does not render in IE 11. A png does.
SVGs render fine in Chrome, Firefox and Safari.

Here's the plunker: http://plnkr.co/edit/wLuoon?p=preview

[maxkfranz]

I suspect this is an issue with IE itself. It seems some SVGs work, others don't.

[i2shar]

That may not be the case .. if you open the SVG directly in IE, it renders fine. Its only through cytoscape that it doesn't render as a background image. Do you have an example of an SVG that does work in IE?

[maxkfranz]

Please note as noted in another, similar ticket that SVGs are rendered differently in the DOM than in canvas. Cytoscape.js can not change it if IE renders SVGs incorrectly in canvas.

You could try with a simple <canvas> with context.drawImage() to confirm whether IE can render your SVG in canvas. Ref : https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.drawImage

I do not have access to IE, though I suspect the issue is on their side (especially since there is no issue in other browsers). And if so, it would probably make sense for us to file a bug with them.

[jstaehli]

Could you check this again please? For me this problem does not only exist in IE but also in Firefox (Chrome works). Normally I have no SVG problems in Firefox. Could this problem be related to Cytoscape.js?

[maxkfranz]

I have confirmed it functioning correctly on Firefox:

You can try this yourself on the debug page with gnu.svg.

There is probably a problem with your SVG file. It could be it's invalid, it could be too large for the browser, etc. You'll have to investigate and see with your file.

[i2shar]

I verified that this was indeed an IE bug (not surprised). I reported it here : https://connect.microsoft.com/IE/feedbackdetail/view/1161278/canvas-does-not-render-scaled-svg-image

If you are inclined, you can verify it here: http://plnkr.co/edit/kEMS7G?p=preview

For my case, both Chrome and Firefox (both on Mac) worked fine.

[jstaehli]

Thank you very much for your answer. You are right, the gnu.svg example works in Firefox. Strange... So I probably have to check my SVGs.

I tried your plnkr.co example. It works great in Chrome. However both Internet Explorer AND Firefox can't draw the second one on my PC... I am using Firefox 36.0.4 on Windows 7. If I click on Draw2 in Firefox the Console outputs "IndexSizeError: Index or size is negative or greater than the allowed amount" (script.js:17:0)

[i2shar]

I tried the plunkr again on Firefox and it doesn't seem to be working. The issue is that clipping the image outside the bounds of the image size doesn't work in both FF and IE, whereas clipping the images inside or outside the bounds of the images size doesn't work in IE at all, but works in FF

Consider the drawImage() API (as used in the plunkr): https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/drawImage

ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);

Case 1: If sx=0 and sWidth <= dWidth
Works in FF, not in IE.

Case 2: If sx=0 and sWidth > dWidth
Does not work in FF and IE - throws IndexSizeError in FF.

Both cases work in Chrome.

So in the plunkr drawImage2() for Firefox,
ctx.drawImage(image, 0, 0, 40, 51, 0, 0, 41, 51); works but
ctx.drawImage(image, 0, 0, 42, 51, 0, 0, 41, 51); throws IndexSizeError.

I am wondering if cytoscape.js is scaling the image per Case 1 when rendering and if that is causing IE to not render the images at all.

@maxkfranz can you confirm?

[maxkfranz]

Ref : https://github.com/cytoscape/cytoscape.js/blob/v2.3.11/src/extensions/renderer.canvas.drawing-images.js#L101

Example with gnu.svg:

No problem on the latest Firefox. If there's a problem, I don't think it's with Cy.js. Please investigate your SVG file.

[jstaehli]

Thanks. I think I found out what the problem with my SVGs is: They have no width and height attributes in the svg element. If I add something like
<svg ... height="1in" width="1in" ...>...</svg>
or
<svg ... height="1cm" width="1cm" ...>...</svg>
it works in Firefox! However with Percentages e.g.
<svg ... height="100%" width="100%" ...>...</svg>
it does not work anymore. Is this a Browser problem or a Cytoscape.js problem? (Again: Chrome has no problems with the missing width/height attributes)

[jstaehli]

By the way: I just found out that IE sometimes renders SVG in Cytoscape.js if you add
<meta http-equiv="X-UA-Compatible" content="IE=9">
to the header... (At least at my local example, not when trying this in jsbin.com) However I'm not sure if I want to have this line in my HTML :-)

[maxkfranz]

You ought to specify pixels for SVG if you want it to render well in the browser. The size only matters as a relative viewport size for the inner elements. SVG is scalable vector graphics, after all...