# Svg file uncorrectly drawn in node red
**URL:** https://discourse.nodered.org/t/svg-file-uncorrectly-drawn-in-node-red/42381
**Category:** Dashboard
**Created:** [10 March 2021 06:16 UTC](https://discourse.nodered.org/t/svg-file-uncorrectly-drawn-in-node-red/42381 "2021-03-10T06:16:43Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@pfe](https://discourse.nodered.org/u/pfe)
#### Post date: [10 March 2021 06:16 UTC](https://discourse.nodered.org/t/svg-file-uncorrectly-drawn-in-node-red/42381/1 "2021-03-10T06:16:43Z")
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?
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [10 March 2021 07:57 UTC](https://discourse.nodered.org/t/svg-file-uncorrectly-drawn-in-node-red/42381/2 "2021-03-10T07:57:42Z")
Are you using Internet Explorer?
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [10 March 2021 14:32 UTC](https://discourse.nodered.org/t/svg-file-uncorrectly-drawn-in-node-red/42381/3 "2021-03-10T14:32:42Z")
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.
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [10 March 2021 14:45 UTC](https://discourse.nodered.org/t/svg-file-uncorrectly-drawn-in-node-red/42381/4 "2021-03-10T14:45:37Z")
> [@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](https://www.svgviewer.dev/) using the same browser (then try another browser like chrome or ff)
---
### Author:  [@pfe](https://discourse.nodered.org/u/pfe)
#### Post date: [10 March 2021 15:21 UTC](https://discourse.nodered.org/t/svg-file-uncorrectly-drawn-in-node-red/42381/5 "2021-03-10T15:21:05Z")
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?
---
### Author:  [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)
#### Post date: [10 March 2021 15:56 UTC](https://discourse.nodered.org/t/svg-file-uncorrectly-drawn-in-node-red/42381/6 "2021-03-10T15:56:38Z")
Fill can be overridden by other properties. See [this](https://github.com/bartbutenaers/node-red-contrib-ui-svg/wiki/Dynamically-change-a-style-attribute-(like-fill-color)) - 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"`
---
### Author:  [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)
#### Post date: [10 March 2021 16:14 UTC](https://discourse.nodered.org/t/svg-file-uncorrectly-drawn-in-node-red/42381/7 "2021-03-10T16:14:03Z")
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.
---
### Author:  [@pfe](https://discourse.nodered.org/u/pfe)
#### Post date: [11 March 2021 15:33 UTC](https://discourse.nodered.org/t/svg-file-uncorrectly-drawn-in-node-red/42381/8 "2021-03-11T15:33:19Z")
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
---
### Author:  [@system](https://discourse.nodered.org/u/system)
#### Post date: [10 April 2021 15:33 UTC](https://discourse.nodered.org/t/svg-file-uncorrectly-drawn-in-node-red/42381/9 "2021-04-10T15:33:37Z")
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.