This lesson is part of the Perspective Components and Bindings course. You can browse the rest of the lessons below.

LESSON LIST

Autoplay Off
Take topic challenge

Supplemental Videos

Description

Learn how to use SVGs (Scalable Vector Graphics) in your Perspective project.

Video recorded using: Ignition 8.0

Transcript

(open in window)

[00:00] In this lesson, we'll talk about SVGs in the Perspective module. SVGs, or scalable vector graphics, can easily be added to any container in Perspective. I have my Designer open and we're looking at a View. If I were to have some SVGs on my local file system here, I can simply drag and drop the SVGs into a container, we'll move my window out of the way here. We'll resize the SVG and you can see that the image scales up nicely. Now by default, we try to preserve the aspect ratio on the image. So if the component gets resized in an odd way, you can determine how we should preserve the aspect ratio. So, for example, if I click the drop-down here, we'll select minimum X, maximum Y, and you can see that the image repositions itself towards the bottom of the component now. You can also, with this drop-down, specify none but of course you want to be careful because that's a great way to make sure your image gets warped. In most cases, you'll probably want to avoid none. Now, you can also take a look at the elements property, which shows you all the individual elements in your image. So if I start drilling down here, eventually I'll get to an element that represents a path or a shape somewhere on this image. So of course I can bind to and make changes to my image from here. However, in some cases, your SVGs might be rather complex, so it might be easier to demonstrate this on a simpler SVG. So if we go back to my files here I have a simple little circle, which I'll drag and drop into my view. And again just to demonstrate, if we were to take a look under the elements property, you can see is considerably more simplistic. We'll take a look at the fill, and of course we can change the color here. So if you wanted to have a display that changed color based on a tag value or something else, you could easily start placing bindings on these properties.

You are editing this transcript.

Make any corrections to improve this transcript. We'll review any changes before posting them.