Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

SVG not rendering under IE (tested under IE 11)

See original GitHub issue

Hi, Max: Could this potentially be a bug? So here’s my html. Note that

              .selector('#bird')
                  .css({
                    'background-image': 'circle.svg'
                  })

You can see the bird image references to ‘circle.svg’, a very simple svg:

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 17.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 312 312" enable-background="new 0 0 312 312" xml:space="preserve">
 <circle cx="100" cy="100" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8 />
    <title>Cytoscape.js initialisation</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
    <script src="http://cytoscape.github.io/cytoscape.js/api/cytoscape.js-latest/cytoscape.min.js"></script>
    <script>
        $(function(){ // on dom ready

            var cy = cytoscape({
              container: document.getElementById('cy'),

              style: cytoscape.stylesheet()
                .selector('node')
                  .css({
                    'height': 80,
                    'width': 80,
                    'background-fit': 'cover',
                    'border-color': '#000',
                    'border-width': 3,
                    'border-opacity': 0.5
                  })
                .selector('.eating')
                  .css({
                    'border-color': 'red'
                  })
                .selector('.eater')
                  .css({
                    'border-width': 9
                  })
                .selector('edge')
                  .css({
                    'width': 6,
                    'target-arrow-shape': 'triangle',
                    'line-color': '#ffaaaa',
                    'target-arrow-color': '#ffaaaa'
                  })
                .selector('#bird')
                  .css({
                    'background-image': 'circle.svg'
                  })
                .selector('#cat')
                  .css({
                    'background-image': 'https://farm2.staticflickr.com/1261/1413379559_412a540d29_b.jpg'
                  })
                .selector('#ladybug')
                  .css({
                    'background-image': 'https://farm4.staticflickr.com/3063/2751740612_af11fb090b_b.jpg'
                  })
              .selector('#aphid')
                  .css({
                    'background-image': 'https://farm9.staticflickr.com/8316/8003798443_32d01257c8_b.jpg'
                  })
              .selector('#rose')
                  .css({
                    'background-image': 'https://farm6.staticflickr.com/5109/5817854163_eaccd688f5_b.jpg'
                  })
              .selector('#grasshopper')
                  .css({
                    'background-image': 'https://farm7.staticflickr.com/6098/6224655456_f4c3c98589_b.jpg'
                  })
              .selector('#plant')
                  .css({
                    'background-image': 'https://farm1.staticflickr.com/231/524893064_f49a4d1d10_z.jpg'
                  })
              .selector('#wheat')
                  .css({
                    'background-image': 'https://farm3.staticflickr.com/2660/3715569167_7e978e8319_b.jpg'
                  }),

              elements: {
                nodes: [
                  { data: { id: 'cat' } },
                  { data: { id: 'bird' } },
                  { data: { id: 'ladybug' } },
                  { data: { id: 'aphid' } },
                  { data: { id: 'rose' } },
                  { data: { id: 'grasshopper' } },
                  { data: { id: 'plant' } },
                  { data: { id: 'wheat' } }
                ],
                edges: [
                  { data: { source: 'cat', target: 'bird' } },
                  { data: { source: 'bird', target: 'ladybug' } },
                  { data: { source: 'bird', target: 'grasshopper' } },
                  { data: { source: 'grasshopper', target: 'plant' } },
                  { data: { source: 'grasshopper', target: 'wheat' } },
                  { data: { source: 'ladybug', target: 'aphid' } },
                  { data: { source: 'aphid', target: 'rose' } }
                ]
              },

              layout: {
                name: 'breadthfirst',
                directed: true,
                padding: 10
              }
            }); // cy init
        }); // on dom ready
    </script>
</head>
    <body>
        <div id="cy" style="width:800px;height:600px"></div>
    </body>
</html>

Under Chrome, it renders like this: capture1

Under IE, it renders like this: capture2

You can see that under IE, the SVG is not rendered at all.

Issue Analytics

State:
Created 9 years ago
Comments:9 (6 by maintainers)

Top GitHub Comments

2reactions

maxkfranzcommented, Jan 6, 2015

SVG rendering is different under the DOM compared to a canvas. I’ll test this out relatively soon, but I often do not have high hopes for anything IE-related.

0reactions

maxkfranzcommented, Sep 30, 2015

Thanks!

The change I pushed allows for specifying the dimensions manually. It also gets the correct image dimensions automatically from IE. However, IE just doesn’t seem to be able to render (maybe just particular?) SVGs in canvas.

I tested in a Windows 10 VM with IE11 latest and Edge latest. Edge seems OK. IE doesn’t render the SVG. I tried with gnu.svg in the debug page.