Svg file uncorrectly drawn in node red

[pfe]

Hello
I'm trying to load a svg ( from visio) file into the contrib-ui-svg. The file is not rendered correctly in node-red. See file attached

I don't see why, outside Node.red, all objects are correctly drawn...
I have the latest svg module and I use chrome on windows 10.
Any suggestions?

[Steve-Mcl]

Are you using Internet Explorer?

[TotallyInformation]

If you share the visio file, I'll happily try it myself.

Worth noting though that Visio is a very complex beast somewhat long in the tooth. It predates SVG by a long way so who knows what it does!

You might want to try using PowerPoint which seems to produce decent SVG files? Even try running the visio through LibreOffice and output to SVG that way to see if it makes a difference.

Otherwise, it is probably an issue in the SVG library that node is using and you may need to raise an issue against the node.

[Steve-Mcl]

@TotallyInformation

Otherwise, it is probably an issue in the SVG library that node is using and you may need to raise an issue against the node.

Is that likely considering the browser renders SVG?

@pfe Try pasting your SVG into this using the same browser (then try another browser like chrome or ff)

[pfe]

Hello all,
I discuss directly to the owner of the SVG drawing component, it seems that it is visio that has specifics multiples layers in the svg. SO use the integrated editor to drawn the svg.
But now I try to access the fill attribute from an object but It doesnt work....
My object has an attribute fill and I send a message
{
"command": "update_attribute",
"selector": "#e1",
"attributeName": "fill",
"attributeValue": "red"
}
but the object doesnt react to the message. I compared the code and drawing of the sample ( with camera ) but I can't figure out what the problem is..
Any Ideas?

[Steve-Mcl]

Fill can be overridden by other properties. See this - in particular the line "Watch out: (as you can see in the animation) as soon as the CSS style attributes have been applied, the SVG attribute values won't be displayed anymore (due to their lower priority)!"

other thoughts...

• does element e1 exist?
• does element e1 have a fill attribute? (i.e. have you tried "command":"set_attribute")
• does the element e1 have a css class or css selector setting its colour?
  • try setting the style via "command": "update_style"

[TotallyInformation]

So as mentioned, this is a Visio issue and this isn't surprising to me as I use Visio regularly. As I say, it is a beast of an application.

Try the LibraOffice method I mentioned or try running the SVG through different editors to see which handle it and can maybe export something simpler.

SVG, like HTML, is not an exact science I'm afraid. Each SVG editor and library handles it slightly differently and the complexity of SVG can be enormous so not surprising that there are sometimes issues.

Another thing you might be able to play with is the layering in Visio. But I'd probably keep that as a last resort.

And again, you might want to look at alternative tools unless you are forced to use Visio for some reason.

[pfe]

Hello, I made some further investigations : set_attribute has no effect if the object has not the style area and the fill property must be set as attribute.. every others styles like contour are not working. ( with
{
"command": "set_attribute",
"selector": "#circle_23",
"attributeName": "fill",
"attributeValue": "#ffe07d"
}

The style "area" are used by simple forms ( line, rectangle, circle) . "Contour" style are used by shapes.
Has anyone a sample svg + flow that use contour and can be "filled" by programm?
Thx