SVG node background tutorial

I have the demand for individual top/right/bottom/left padding when styling a node. At the moment only padding is supported which affects all 4 sides at once.

My application needs to decorate each node with an icon (additionally to the node label). To make room for the icon I need extra padding just on one side.

[jri]

@jesuspc Eventually I got SVG node background images working, in all major browsers, including european <text> chars, and FontAwesome icons.

Some gotchas:

• Don’t use Base64 encoding in SVG data URLs. Use URL-encoding instead. See https://github.com/cytoscape/cytoscape.js/issues/1873

• The node render function has to return an object containing the SVG (e.g. as data URL) and its dimensions. See https://github.com/cytoscape/cytoscape.js/issues/1802#issuecomment-310386514

• You can’t SVG draw beyond a node’s bounding box. See https://github.com/cytoscape/cytoscape.js/issues/1865

• Webfonts (e.g. FontAwesome) do not work in SVG <text> elements. As fas as I understand this is due to browser oddities (Canvas/SVG/Webfonts), and is not a Cytoscape problem. A workaround is to render the plain SVG glyphs as <path> elements instead. See https://github.com/cytoscape/cytoscape.js/issues/1867

• The XML namespace (<svg> element’s xmlns attribute) is required. A XML declaration (<?xml version="1.0" encoding="..."?>) is not required. See https://github.com/cytoscape/cytoscape.js/issues/1873

As an example see the Cytoscape code in my project, in particular the renderNode function: https://github.com/jri/dm5-topicmap-panel/blob/master/src/cytoscape-renderer.js#L350

[lukethacoder]

Leaving this here incase anyone else runs into the same issue I did. SVG’s fill the node by default, which isn’t the most beautiful thing, so lets add some padding* (not actual padding, just scaling down the icon within the node).

function renderNode(ele) {
  // Icon path is assumed to be of 32x32 in this example. You may auto calculate this if you wish.
  const iconPath = 'M31.4,16.5c0.8,0.8,0.8,2,0,2.8l-6,6c-0.8,0.8-2,0.8-2.8,0l-2.9-2.9c0.6,3,0.2,6.2-1.3,9 c-0.2,0.3-0.5,0.5-0.9,0.5c-0.3,0-0.5-0.1-0.7-0.3l-7.6-7.5l-1.4,1.4C7.9,25.7,8,25.8,8,26c0,1.1-0.9,2-2,2s-2-0.9-2-2 c0-1.1,0.9-2,2-2c0.2,0,0.3,0.1,0.5,0.1l1.4-1.4l-7.5-7.5c-0.5-0.5-0.4-1.3,0.2-1.6c2.7-1.5,5.9-1.9,8.9-1.3L6.6,9.4 c-0.8-0.8-0.8-2,0-2.8l6-6C13,0.2,13.5,0,14,0c0.5,0,1,0.2,1.4,0.6L19.9,5l4.4-4.4c0.8-0.8,2-0.8,2.8,0c0,0,0,0,0,0l4.3,4.3 c0.8,0.8,0.8,2,0,2.8L27,12.1L31.4,16.5z M14,18c-2.5-2.5-6-3.5-9.4-2.8l12.2,12.2C17.5,24.1,16.5,20.5,14,18z M9.4,8l3.7,3.7 l4.6-4.6L14,3.4L9.4,8z M14.6,14.6c0.6,0.4,1.1,0.8,1.6,1.3c0.5,0.5,0.9,1,1.3,1.6L28.6,6.3l-2.9-2.9L14.6,14.6z M28.6,18l-3.7-3.7 l-4.6,4.6l3.7,3.7L28.6,18z';
  const iconColor = '#ffffff';
  const size = 32; // may need to calculate this yourself
  const iconResize = 22; // adjust this for more "padding" (bigger number = more smaller icon)

  const width = size;
  const height = size;
  const scale = (size - iconResize) / size;
  const iconTranslate = iconResize / 2 / scale;
  const backgroundColor = `#33362F`;

  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="${width}" height="${height}">
      <rect x="0" y="0" width="${width}" height="${height}" fill="${backgroundColor}"></rect>
      <path d="${iconPath}" fill="${iconColor}" transform="scale(${scale}) translate(${iconTranslate}, ${iconTranslate}) "></path>
    </svg>`;
  return {
    svg: 'data:image/svg+xml;base64,' + btoa(svg),
    width,
    height,
  };
}

let nodes = [
  {
    data: {
      id: 'id',
    },
    style: {
      shape: 'circle',
      'background-image': (ele) => renderNode(ele).svg,
      'background-opacity': 0,
      width: (ele) => renderNode(ele).width,
      height: (ele) => renderNode(ele).height,
      'border-width': 1,
      'border-color': `#E0749F`,
      'border-opacity': 1,
    },
  },
];

Small snippet to calculate the width/height/scale/position of the <path/> within the <svg/> based on a few params. Still requires you to know the width/height of the <path d=""/> value.

If you’re lucky enough to find an svg icon lib that has all the same size svg icons, even better. My case I have the icon set to 32x32, but you could calculate the size if you had varying <path d=""/> sizes.