# Customised button as an SVG file **URL:** \ **Category:** Ignition\ **Tags:** ignition80, vision\ **Created:** [December 3, 2021, 5:43pm UTC](https://forum.inductiveautomation.com/t/customised-button-as-an-svg-file/53745 "2021-12-03T17:43:45Z")\ **Posts on this page:** 7\ **Page:** 1
**Author:** ![trishadx](https://avatars.discourse-cdn.com/v4/letter/t/eb9ed0/32.png) [@trishadx](https://forum.inductiveautomation.com/u/trishadx)\ **Post date:** [December 3, 2021, 5:43pm UTC](https://forum.inductiveautomation.com/t/customised-button-as-an-svg-file/53745/1 "2021-12-03T17:43:45Z")
Hi guys, I’ve designed a button in inkscape to use in vision client. And I want this to have the same properties as a momentary button. How do I go about assigning this? Or will this only be possible if I overlap my design with a transparent momentary button and link the properties to certain components of the designed button? Thank you ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [December 3, 2021, 6:36pm UTC](https://forum.inductiveautomation.com/t/customised-button-as-an-svg-file/53745/2 "2021-12-03T18:36:14Z")
> [@trishadx](#): > > And I want this to have the same properties as a momentary button Obligatory don't use momentary buttons for control warning. See here for why. > [@Very Concerning Read/Write Issues. Important information for all users](https://forum.inductiveautomation.com/t/very-concerning-read-write-issues-important-information-for-all-users/18583): > > Hello Ignition Members, Disclaimer - All of our senior designers/programmers are qualified for their jobs where I work. These problems are described as I see them, they may not be exactly what happened. Therefor they are to be used for troubleshooting the issue only. Thank you. We are in contact with some ignition developers and are desperately trying to fix this problem. This is a GLOBAL problem therefore it won’t be affecting just us. It may be affecting anyone who is using ignition well. Ti… Not exactly sure what your trying to accomplish but perhaps one of these options will work: - Import the SVG into ignition, and then set the Image path of a momentary push button to the path for the image you want to use. - You could use an image component directly, and affect a similar behavior by using the MousePressed and MouseReleased events. ---
**Author:** ![trishadx](https://avatars.discourse-cdn.com/v4/letter/t/eb9ed0/32.png) [@trishadx](https://forum.inductiveautomation.com/u/trishadx)\ **Post date:** [December 3, 2021, 6:53pm UTC](https://forum.inductiveautomation.com/t/customised-button-as-an-svg-file/53745/3 "2021-12-03T18:53:25Z")
What a misfortune. Definitely will put your advice into practice moving forward In terms of what I’m trying to achieve, I got given instructions to play around with the design of the buttons of the HMI created in Ignition. Personally I like the way the current design of the default buttons look, however a task is a task. I’ll overlap the whole design with a transparent button then connect the SVG design to the components of that button through scripting - bit of a rough way but this is quite useful, thank you for the reminder to use scripting instead of directly tagging to properties ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [December 3, 2021, 6:59pm UTC](https://forum.inductiveautomation.com/t/customised-button-as-an-svg-file/53745/4 "2021-12-03T18:59:53Z")
Can you show your SVG? What is it exactly that is not liked about the default buttons? There might be a way to play around with the L&F in swing and get close. But, it will not be a trivial amount of work or scripting. ---
**Author:** ![trishadx](https://avatars.discourse-cdn.com/v4/letter/t/eb9ed0/32.png) [@trishadx](https://forum.inductiveautomation.com/u/trishadx)\ **Post date:** [December 3, 2021, 7:27pm UTC](https://forum.inductiveautomation.com/t/customised-button-as-an-svg-file/53745/5 "2021-12-03T19:27:18Z")
To be honest the ‘new design’ looks exactly the same but with more rounded edges. Theres a lot to like with the current buttons, i think they’re really easy on the eyes. But different people, different taste I guess. Thank you for the help guys, the scripting is the way to go. however unnecessary, a task is a task! ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [December 3, 2021, 10:45pm UTC](https://forum.inductiveautomation.com/t/customised-button-as-an-svg-file/53745/6 "2021-12-03T22:45:21Z")
Rounded Edges aren’t too difficult, though I’m not sure it’s really worth the effort, depending on the size of your project. For posterities sake: In the `internalFrameActivated` event of a window you can place this code (I put mine in a momentary button for ease of use, so this will not work as is in an `internalFrame` event, the code for getting a reference to the button will need to change. ```auto from java.awt import Insets from javax.swing.border import CompoundBorder class RoundedBorder(CompoundBorder): def __init__ (self,r): self.radius = r def getBorderInsets(self,c,i = None): return Insets(self.radius + 1, self.radius + 1,self.radius + 2, self.radius) def getInsideBorder(self,c = None): return self def getOutsideBorder(self,c = None): return self def isBorderOpaque(self): return True def paintBorder(self,c,g,x,y,width,height): g.drawRoundRect(x,y,width-1,height-1,self.radius,self.radius) #grab a reference to the button btn = event.source.parent.getComponent('Momentary Button 1') btn.setBorder(RoundedBorder(20)) ``` Result: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/6/963ce2a4a9eff2600791d12048c2fd4d6fc4a35a.png) Note, this is just an example, for effecting this change across multiple components you will undoubtedly want to loop through the components list of the root container and modify all of the buttons. You will probably also want a memory tag which holds the corner radius as opposed to hard coding it. You should probably also move the code to a project script and execute it there as opposed to copying this code over and over. Example For Loop: ```auto comps = system.gui.getParentWindow(event).getRootContainer().getComponents() for comp in comps: if isinstance(comp, JButton): comp.setBorder(RoundedBorder(20)) ``` Finally, this does not take into account the background of the button, so if the background color is not transparent and the border radius gets too big, then you will see the still square corners of the background. You can of course write your own JButton class that handled all of this but again a whole lot of work for such a small thing. This was written and tested in 8.1.7 ---
**Author:** ![trishadx](https://avatars.discourse-cdn.com/v4/letter/t/eb9ed0/32.png) [@trishadx](https://forum.inductiveautomation.com/u/trishadx)\ **Post date:** [December 6, 2021, 11:15am UTC](https://forum.inductiveautomation.com/t/customised-button-as-an-svg-file/53745/7 "2021-12-06T11:15:31Z")
Thank you for this! This is perfect actually !