# Making changes to embedded SVG in perspective

**URL:** <https://forum.inductiveautomation.com/t/making-changes-to-embedded-svg-in-perspective/71116>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [March 15, 2023, 8:46pm UTC](https://forum.inductiveautomation.com/t/making-changes-to-embedded-svg-in-perspective/71116 "2023-03-15T20:46:01Z")\
**Posts on this page:** 1\
**Showing post:** 4

<div class="post-metadata">

**Author:** ![Chris.Wyllie](https://avatars.discourse-cdn.com/v4/letter/c/5fc32e/32.png) [@Chris.Wyllie](https://forum.inductiveautomation.com/u/Chris.Wyllie)\
**Post date:** [March 16, 2023, 2:06am UTC](https://forum.inductiveautomation.com/t/making-changes-to-embedded-svg-in-perspective/71116/4 "2023-03-16T02:06:47Z")

</div>

For anyone reading this (including me) in the future this is how I ended up doing it. There are other ways that maybe better or more efficient.

For my case my SVG was being used in a template with a UDT so:

1. Created my SVG in inkscape making sure to give all the object I will interact with names (and Id's)
2. Created some custom properties on the root of the view template. The idea being these will be the "interface" to hold the script code (to run on property change); I can then just bind tags to these properties. If the SVG is deleted these props remain as they are on the root.
3. Right clicked on the property and added the code to transverse the SVG structure and change the property I wanted. In one of my cases the code looked like this:

```auto
	Debug = False
	if Debug: system.perspective.print("Starting")
	
	
	GroupName = "Alarm_Box"
	ElementName = "Alarm_indicator"
	ElementProperty = "fill"
	ElementSubProperty = "paint"
	
	#here is the logic for the new value of the property based off the tag value (currenValue)
	if currentValue.value:
		value = "#ff0000" #red
	else:
		value = "#00ff00" # green
	
	#Link to the SVG drawing elements
	SVG_Groups = self.getChild("ProtectionRelay").props.elements[1].elements
	
	#Find the group we are intrested in
	for SVG_Group in SVG_Groups:
		if Debug: system.perspective.print("Searching Group:"+ SVG_Group.name)
		
		if SVG_Group.name == GroupName:
			
			#Now search for the Element we want to edit
			SVG_Elements = SVG_Group.elements
			for SVG_Element in SVG_Elements:
				if Debug: system.perspective.print("Searching Elements:"+ SVG_Element.name)
				
				if SVG_Element.name == ElementName:
					if Debug: system.perspective.print("Found it")
					
					#Now we look for the property and sub property and update its value
					setattr(getattr(SVG_Element,ElementProperty),ElementSubProperty,value)
					
					if Debug: 
						test = getattr(getattr(SVG_Element,ElementProperty),ElementSubProperty)
						system.perspective.print("Read back: " + test)
						system.perspective.print("Attempted: " + value)
					
					# No need to search the rest of the elements
					break
			# No need to search the rest of the groups
			break

```

1. Now I can just bind my tags to the property I created on the root.

Now I can delete and re-import the SVG as much as I want provide I keep the group and element names the same.

Thanks to [nader.chinichian](https://forum.inductiveautomation.com/u/nader.chinichian) for the inspiration for this idea from this post:

> [@Perspective large and complex SVG animation tips please](https://forum.inductiveautomation.com/t/perspective-large-and-complex-svg-animation-tips-please/63526/19):
>
> So @victordcq has written a module to handle click events for SVG. I think the first idea @nader.chinichian had was to use scripting over bindings. If you use bindings and update the SVG, then you will most likely wipe out and break the bindings. Scripting wouldn’t have this limitation, plus using scripting potentially you could have all scripts in one location, depends on how you have things arranged and your needs. I am however a little confused on what he meant by creating own protocol and …

---

_[View the full topic](https://forum.inductiveautomation.com/t/making-changes-to-embedded-svg-in-perspective/71116)._