SVG Rendering black

GoJS
#1

I’m trying to render a SVG as a node but when the SVG renders on the page it display a black image.

Is this the correct way to render the SVG?

    let imgDiagram =
      $(go.Node, 'Auto',
        $(go.Shape, 'Square',
          { fill: 'lighcoral', strokeWidth: 0, width: 35, height: 35 }
        ),
        $(go.Shape,
          new go.Binding('geometry', 'img')
        )
      );

Here is an image on the SVG are being displayed.

image

#2

The value of the Shape.geometry property must be an instance of Geometry. It cannot be a string.

You could call Geometry.parse on the string in a binding conversion function.

Or instead you could bind the Shape.geometryString property. Note that if you use the geometryString property and you want the shape to be filled, you’ll need to make sure that the geometry path string is filled – call Geometry.fillPath on the strings that you have saved in your database or have defined in your code.

#3

I added the Geometry.parse like this.

    function parseSvg(name) {
      console.log('[NAME]', name)
      return go.Geometry.parse(name, true);
    }

    let imgDiagram =
      $(go.Node, 'Auto',
        $(go.Shape, 'Square',
          { fill: 'lighcoral', strokeWidth: 0, width: 56, height: 56 }
        ),
        $(go.Shape,
          new go.Binding('geometry', 'img', parseSvg)
        )
      );

but I still see the black node and not the SVG.

My svg string looks like this.

<svg xmlns="http://www.w3.org/2000/svg" version="1.2" baseProfile="tiny" width="55.3" height="51.8" viewBox="21 6 158 148"><path d="M25,50 l150,0 0,100 -150,0 z" stroke-width="4" stroke="black" fill="rgb(128,224,255)" fill-opacity="1" ></path><path d="M25,50 L175,150 M25,150 L175,50" stroke-width="4" stroke="black" fill="black" ></path><path d="M85,55 L100,75 115,55" stroke-width="4" stroke="black" fill="none" ></path><g transform="translate(0,0)" stroke-width="4" stroke="black" fill="none" ><path d="M87.5,40 l25,-25 m0,25 l-25,-25" ></path></g></svg>
#4

So I made some changes here and I was able to get it working using the go.Picture and I converted my SVG string to use the URL.

That worked nice.

#5

Ah, I was assuming that your strings were geometry path strings:
https://gojs.net/latest/intro/geometry.html

Yes, use Picture to show SVG files. But there are some caveats in some browsers. Please read:
https://gojs.net/latest/intro/pictures.html#UsingSVGAsPictureSource