Hi,
I've been researching how we might bring in visuals from other systems and I think I've run into a limitation with Perspective and it's support for the SVG specification.
The graphic I'm attempting to bring into Perspective is an SVG with embedded raster images (.gif, .png). When I attempt to drag the .svg into Designer I see this warning in the console and my images are not visible. I'm specifically attempting to embed the SVG, not load it as an image. If I load it as an image this all works fine.
20:06:51.417 [perspective-svg-import] WARN Perspective.SvgImporter -- Found unsupported element: image
I wanted to bring this in as an embedded SVG so I could control animations, etc., is there a better way I should be going about this?
Thanks! Newcomer here, so assume I don't know much.
Strip out all the embedded images and embed the svg without them.
Add the embedded images as separate components with the Image component.
Raster images will never be great in web svg renders.
That's the approach I started looking at, but I have hundreds of embedded raster images so I'd need to figure out a strategy to programmatically generate the Perspective configuration vs. manually picking and positioning the images.
You really don't want raster images in Perspective anyway. Even relatively lightweight PNG files will take FOREVER to load. Until the drawing tools come out in 8.3, I highly recommend any Ignition programmer gets themselves familiar with Illustrator or Inkscape.
Not to mention, Perspective being built for responsive design on different resolutions means any raster image is guaranteed to look like crap on at least some devices. Stick with SVGs unless absolutely necessary (e.g. a customer demands it and you can't convince them otherwise)
I hear that, this was just an attempt at a solution to migrate existing visuals so they could be run in parallel to the source system for comparison.
Are the raster images simplistic enough to do a bitmap trace and convert it to vector? I've done that with customer logos and the like.
A lot of them are straight lines, fairly simple, if there weren't so many shadow gradients it'd be even simpler. Some are slightly more complicated or they are .gifs for animations. I'm assuming I could handle animations with CSS.
That said I'm not sure I'd bother converting them, it'd probably be faster to recreate the SVG with SVG components at that point.
That's fair.
That said, I cringe at the thought of animated gifs on an HMI. The whole selling point of Ignition for me is making interfaces that look better than those flashy, overly-busy distraction-fests that were 1990s HMIs.
I don't have any experience in the HMI space to relate, but I can imagine the 1990s were an interesting time for interface design.
I'll give credit to this interface, the animations provide a clear visualization of the running state of the system, it's by no means clunky, the embedded raster images scale perfectly with the SVG. With the exception of some of the noise from the data points on the graphic it's very clean and not what I would consider graphically noisy.
The 90's and 00's were a time when color was being introduced to HMIs...and a lot of engineers thought that if an HMI was capable of 256 colors, they should use all 256 colors.
At the same time, a lot less was demanded of them, and in a lot of cases they were little more than push button replacements. Nowadays every customer wants everything AND the kitchen sink in their HMI.
90's HMIs look like a rainbow threw up.
I think you can do nice graphics work without making a distraction fest but the colors from 90's era HMIs are terrible. I like keeping my color design fairly simple but I like making the graphics look like the thing they represent because I think it makes it easier for new people to understand what the screen is representing.
I just dealt with this problem yesterday and have some tricks that might be helpful for you. One of our graphics people from our parent company made some graphics on canva which they use for business cards and stuff like that. Someone asked me to add similar graphics to an "about" screen for branding consistency. They provided me with a 7 meg+ SVG (yikes).
As I got into the SVG I saw that it was basically a bunch of unnecessary embedded raster graphics. I redrew a bunch of stuff and got it down to 63k.
I was going to suggest trying the BMP trace that @Brian_Stilson mentioned. That worked on 1 or 2 of the graphics. It might struggle with shadow gradients and I see you're saying you have some of those.
If you have to redraw some of the graphics I would recommend setting the opacity of your drawing to 50% and set the color to yellow or red and overlay your drawing on top of what you are drawing. This lets you trace the lines quickly with minimal effort. Once you have the lines matching the graphic you're redrawing you can color it properly and set it back to 100% opacity.
If you embed text on your SVG it will scale nicely with your SVG but it might be in the wrong anchor location and font when you embed it in perspective. You can fix this by using the search box above the embedded SVG's property tree to search for the text itself. This will highlight the element that the text lives in so you can plug in other coordinates to move it to a better spot. You can add a "style" element to modify the font if you need to do that.
Edit:
I forgot to mention. When you're done, make sure you save a copy as "optimized SVG" this makes cleaner markup so you have a smaller file size.
1 Like
I should have mentioned the BMP trace is great, but only works when the raster image is fairly high resolution and has fairly crisp lines. Basically, the more it already looks like an SVG, the easier time you'll have converting it. This approach usually works well on corporate logos, although if you ask, many logos are originally SVG to begin with, and they're usually willing to just send you the file.
It worked great on a QR code too.
I can't even tell you how happy I was that it worked on that. 
1 Like
Thanks everyone this is all super helpful.