Images, SVGs, and Icons in Perspective

1. Drag an Image component from the component palette onto the container.
   
   
   
   
2. At the top of the Designer in the Menu Bar, select  Tools > Image Management.  
3. In the Image Management tool, look through the different folders for an image file you want.
4. Right click on the image to copy the path for the image.
   
   
   
   
5. In the Property Editor, paste the image path into the source property for the Image component. You need to add "/system/images" to the beginning of the path.
   
   
   
   The image now appears inside the Image component on the container.
   
   

For more information on the Image component and all of its properties, see Perspective - Image.

1. In the Designer, open the view in which you want to put the image. 

2. Locate the image on your computer and drag it onto the view. Note that we already resized this image in a graphics editing program so that it is the size we want. 
   
   

   The following feature is new in Ignition version 8.0.3
   Click here to check out the other new features

3. Starting in version 8.0.3, you have the option of saving the image as a link or embedding the image in the view. The Link Image screen is displayed. Choose the Save and Link radio button and then click Upload. Note that this will save the image in the Image Management Tool and it can be used repeatedly.
   
   
   
   
4. The image now appears in the view. Drag one of the corner nodes to make the image component border the same size of the image.
   
   
   
   
   
5. Now your image is on the view.  Save your project.  We added a company logo SVG file as well as some navigation buttons to this home page.
   
   

1. At the top of the Designer in the Menu Bar, select Tools > Image Management.
2. Next,  drag and drop the image from the local file system directly onto the  Image Management  window.

Alternatively, the Image Management window has an Upload button to pass images in. Locate the directory you wish to upload the image. You may use the root folder, or create a new folder to keep your images organized.

1. In the Image Management tool, click on the Upload New Image icon. An Open dialog window appears. 
2. Navigate to your image on the local system. 
3. Select the image, then click Open to upload it.

You can also use a file path to a local image. Enter the file path in the source property for the Image  component . This is done by prefixing the file path with  file:///  . An example Image Path would look like this:

It is important to understand that this will only work if the image is accessible from where the client is running. So if you access an image from the designer on the local machine, clients that launch elsewhere may not have the image stored in the same location.

Single images, as well as entire directories, may be downloaded from the Image Management tool. This is useful when migrating a project to another Gateway. Image downloads can be taken from either the Image Management or Image Browser  windows.

1. At the top of the Designer in the Menu Bar, select Tools > Image Management .
2. Select the image, images, or folder you want and click the Save As   icon.
3. Choose a destination folder for the downloaded files.
   
   
   
   
4. Click Save. All images and subfolders in the selected folder will be copied to the selected directory.

Example with Custom Icon Repository

In this example we'll make a custom repository file with icons. The name of the file is example.svg. We'll then use the icons in this file and other repositories to create a Horizontal Menu component as follows; 

1. First we created the repository file in xml.   

    Click here to see the icon repository code

   <?xml version="1.0" encoding="utf-8"?>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">	
   
   	<!--a red circle-->
   	<svg viewBox="0 0 24 24" id="red-circle">
   		<circle cx="12" cy="12" r="6" stroke="black" stroke-width="1" fill="red" />  
   	</svg> 
   
   	<!--a blue circle-->
   	<svg viewBox="0 0 24 24" id="blue-circle">
   		<circle cx="12" cy="12" r="6" stroke="black" stroke-width="1" fill="blue" />  
   	</svg> 
   
   	<!--a triangle-->
   	<svg viewBox="0 0 24 24" id="triangle">
           <path d="M12 0 L3 22 L21 22 Z" />
       </svg>
   		
   	<!--roman numeral one icon-->
   	<svg viewBox="0 0 24 24">
   		<g id="one">
   			<rect
   			   id="rect3723" width="15.09025" height="3.0526078" x="4.4548745" y="2.4385488" />
   			<rect
   			   id="rect3723-3" width="15.09025" height="3.0526078" x="4.4548745" y="19.510113"/>
   			<rect
   			   id="rect3755" width="3.4557824" height="16.990929" x="10.272108" y="3.5045362" />
   		</g>
   	</svg>
   	<!--roman numeral two icon-->	
   	<svg viewBox="0 0 24 24">
   		<g id="two">
   			<rect
   			   id="rect3723" width="15.09025" height="3.0526078" x="4.4548745" y="2.4385488" />
   			<rect
   			   id="rect3723-3" width="15.09025" height="3.0526078" x="4.4548745" y="19.510113" />
   			<rect
   			   id="rect3755" width="3.4557824" height="16.990929"  x="6.8435426" y="3.5045362" />
   			<rect
   			   id="rect3755-9" width="3.4557824" height="16.990929" x="13.700686" y="3.5045002"/>
   		</g>
   	</svg>	
   </svg>
   

2. Once created, we saved the file in the following directory: 
   
   C:Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\icons





3. Now we can use the icons in this icon repository in our components.  For this example, we put a Horizontal Menu component in a Coordinate view. 

4. We use two icons from the new example repository and one from the materials repository. We set the properties as follows for the Horizontal Menu component: 

   Top Level Properties

   Property	Value
   props.items.0.enabled	true
   props.items.0.icon.path	example/one
   props.items.0.icon.color	#4747FF
   props.items.0.label	Proposal
   props.items.0.style.color	#4747FF
   props.items.0.style.fontFamily	Verdana
   props.items.1.enabled	true
   props.items.1.icon	example/two
   props.items.1.color	#008000
   props.items.1.label	Project Documents
   props.items.1.style.color	#008000
   props.items.1.style.fontFamily	Verdana
   props.items.2.enabled	true
   props.items.2.icon.path	material/folder_special
   props.items.2.icon.color	#AC00AC
   props.items.2.label	Appendix
   props.items.2.style.color	#AC00AC
   props.items.2.style.fontFamily	Verdana
   props.style.borderBottomStyle	double
   props.style.borderLeftStyle	none
   props.style.borderRightStyle	none
   props.style.borderTopStyle	double
   props.style.borderTopWidth	4
   props.style.borderBottomWidth	4

5. When we put the Designer into Preview  mode. The component appears as follows: