You can help by commenting or suggesting your edit directly into the transcript. We'll review any changes before posting them. All comments are completely anonymous. For any comments that need a reply, consider emailing firstname.lastname@example.org.
We are experiencing playback issues from our video hosting provider. Please check back shortly.
Scalable Vector Graphics (SVGs)
Ignition can import any SVG (Scalable Vector Graphic) into a window. Once imported, SVGs can be modified and styled.
Video recorded using: Ignition 7.7
Transcript(open in window)
[00:00] It is very easy to work with Vector Graphics in Ignition. There are over 4000 Vector Graphics in Symbol Factory that you can work with. Of course, we don't have every graphic that you might need. It is possible to create your own Vector Graphics also in Ignition as SVG files that you can import into a screen. So, here in my Documents folder I have two SVG files. The extension is .svg which stands for Scalable Vector Graphic. I could take any SVG file and I can drag it onto my screen. So, let's take the logo of Ignition. I'm going to drag it into my window and you'll see it create an Ignition. Take the second one here which is the factory.svg Drag that onto our screen and I'll see it created. Now sometimes, the graphic will come in, it will be really, really small, like this one, because SVG files actually, they specify a specific width and height. This one, here is at zero, zero. So, when they bring it in, I can actually just resize and make it bigger, so I can then see the graphic. Now, we prefer you to use SVG files over images like PNG, JPGs or GIFs because they are scalable. So, as you have different resolutions, the graphic will look identical in those different resolutions.
[01:06] Whereas, images as the bigger they get, the more pixelated they become. So, by them being scalable of course, we can take them on the screen, we can make'em bigger and the graphics still look crisp. Now, with each SVG file you bring in, it's not just one component. If you look up in the top left of our Project Browser, it's actually grouped of many different components. So, I can actually expand the group here and I can see all the individual Paths that make up that particular graphic. I can easily right-click on the graphic Ignition and I can Ungroup it, allowing me to see all the individual pieces. This is where you can actually take pieces out that you didn't like or modify the existing graphic that you had before. So, working with SVG files, you just simply drag one onto the screen and you can easily you know, apply colors to them, change the way they look and work with them in Ignition, just like you would with any other component. Now, it's important to note that you can also take AutoCAD drawings and you can export those drawings as SVG files, using certain utility programs and we can bring those as a background of our screen that we can then change colors on.