Making changes to embedded SVG in perspective

Hi Guys,

I am using perspective with SVG and I have found that embedding them to get access to binding elements is a huge help with the project I am currently working on.
The SVG is created in inkscape from there I have 30+ bindings setup on the individual elements.

Here is the issue, there is a very good chance that when this project is reviewed by the client they will want changes to the SVG. Some of this chances I might be able to do by manipulating the elements but there is a good chance that I will need to go back to inkscape.

If I need to go back to inkscape for "major" changes the only way I can bring in the new changes is by deleting the existing embedded SVG but from what I can see this would also delete my bindings on that existing SVG.

The only way I can see to make this less impact full would be to:

  • Breakup the SVG into smaller chunks so it minimises the amount of bindings I need to re-do when re-embedding
  • Try to import most of the changes directly into the "elements" array

Is there anything I am missing?

I am sure the long awaited drawing tools will fix this issue?

I haven't done this myself, but I know Nader uses dynamic bindings based on the element ID which should solve this issue in theory

1 Like

Thanks Ryan,

I did some more searching based on this and found this post. Seems to answer my questions.
Thanks.

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:
	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 for the inspiration for this idea from this post:

2 Likes

You also give all of your elements meaningful ids and then reference the ids instead of structures. Then it doesn't matter where you move your elements, it'll always just work. This is how I believe Nader does it as well

Chris,

where did you use this code to transverse the SVG structure?

It went through a few more iterations but I ended up deploying it as a function in the gateway scripting module.

This way I was able to call it from anywhere in my project as a single line of code and just pass it the path to the embedded SVG, name of the properties I wanted to change and the value to change it to.

I wonder what the performance of this method is given that you are putting a script on every property change? My standard design philosophy would say this kind of solution should be avoided.

It depends what has to be changed.
Some changes requires this.
For thinks like colors/animations i would suggest using css though, but that probably is harder if they change the image often

I would agree with this sentiment.

1 Like