Adjust Node size to dimensions of data-uri encoded svg background image

[LuiSlacker]

I'm consuming an API that returns a SVG for each node encoded as a Data-URI inside data field.

    [
     {
      "group": "nodes",
      "classes": "source-A"
      "data": {
        "id": "A.A.7",
        "presentation": "data:image/svg+xml,%3Csvg%20xmlns%3Axlink%3D...",
        "source": "A"
      }
     }, ...
  

I'd now like to adjust the nodes width and height to the background SVGs dimensions. I could create a new Image, load the SVG and then get the dimensions. But since this is an async operation, it won't return the width/ height for cytoscape immediately.

    var cy =  cytoscape({
    container: document.querySelector('#cy'),
    elements: data,
    style: [
      {
        selector: '.source-A',
        css: {
          shape: 'roundrectangle',
          'background-color': 'white',
          'background-image': 'data(presentation)',
          'background-fit': 'none',
          width: function(ele) {
            var i = new Image();
            i.src =  ele.data().presentation;
            return i.onload = function() {
              return i.width;
            }
          },
          height: ...,
          'border-width': '1px'
        }
      },

Any ideas how to achieve this?

[maxkfranz]

You can create an SVG object and find the attributes with its dimensions. If the SVG doesn't have those attributes defined, then I don't think you can really get the dimensions reliably. You can try adding them to the DOM and querying the size, but the default size is just what's set in the attributes as far as I know -- so SVGs with undefined attributes won't have a reliable size.

Really, you're best off just setting node sizes manually in the stylesheet and setting the background width/height appropriately in your stylesheet as well.

[LuiSlacker]

I can't go with fixed node dimensions though, since the svgs from the API vary in size quite a bit.
I'm rendering an abstract syntax tree of two merged mathematical formulas with some of the (math-syntax)nodes being collapsed and therefore having the SVG render math in infix notation, which certainly requires more space.

Now with the style option of 'background-fit': 'contain' the equal or multiply sign are displayed way too big, whereas highly collapsed nodes(e.g. the sum) might be too small.

Also, with the SVG object approach you mentioned, how would I create these object async within the cytoscape mapper function? See 2ndsnippet in original question?

[maxkfranz]

http://stackoverflow.com/questions/231679/get-size-of-svg-graphics-by-javascript#1577890

Basically, load the svg string as an object and get the attribute or parse/grep the svg as a string and look for the attribute.