Hi all,
I’m working on a very simple SVG that represents 4 states of a machine: manual, auto, off and fault. I created a simple SVG in Inkscape, saved it as a plain SVG, and then dragged it over into the Perspective workspace. When I drop it in the workspace, I get a message
This SVG image contains unsupported elements and may not render correctly when embedded.
Indeed, when I embed the SVG into a Perspective view, it looks different than when I open the plain SVG in Inkscape or Firefox. See below:
It looks like any gradients I applied aren’t being recognized by the designer. Why is that? This isn’t a deal breaker, I just want to understand what will and won’t be visible in the designer so I don’t waste time drawing something complicated that then won’t work like I want it to. What are unsupported elements? Is there a list of them?
By the way, I can see the gradient when I drill into the SVG elements:
Here is the value of gradientTransform:
matrix(1.1716836,0,0,1.0252377,-0.06658026,-2.2651098)
Thank you all in advance!
The short version:
The SVG spec is immense. Really, truly, ridiculously immense.
We employ some extremely limited parsing when you drop an SVG in and choose to embed it. If there’s anything in the SVG we don’t recognize, we don’t reject it - we just don’t assign it any meaning in the output.
For some things, that might be plausible to change on our side. For more exotic SVG features, it’ll probably never happen when embedding in this way; instead, just leave your SVG intact and display it as an image; in that case we don’t know or care about the contents of your SVG, and it’s up to the browser to render it correctly.
And having looked into it since it sounded familiar - we do in fact have a ticket in place to expand our SVG parsing and gradients are mentioned on that ticket.
3 Likes
I had similar problems and you have an official response that explains what’s happening.
I just wanted to add that @nminchin gave a really good tip to make sure you save your SVGs as optimized SVG in Inkscape. It makes the SVG a lot smaller which greatly improves performance when you have a lot of instances of your SVGs on a screen.
For now I have been embedding my less detailed SVGs and loading the more detailed ones into image library. If you save them as optimized SVG they are very small and Ignition can handle them just fine at runtime. I tested 780 instances of one of my valve SVGs with them all bound to the same tag and it was fast using image library to swap what image is loaded to represent a state change.
I have found that animating color using the fill hue feature often distorts SVGs so I only use that on simple svgs. In my case a hue wouldn’t work anyway because I’m animating flow path in a sanitary divert valve so the parts of the valve I’m animating are dynamic.
I'm fairly sure when the tint is changed, the SVG is rasterised, making it pixelated. I would never use tint on image library SVGs
1 Like