Custom SVGs Formatting

Ignition Early Access
1

I am attempting to add in custom svgs for icons to use within Perspective. I am following the format of the material icons and it will not work. I need some help on formatting my svgs to work the same way as the material icons. I’ve tried several things to get this done. and it appears every time i make a change to the svgs on the gateway server, i have to restart the project also. Here is the svg code:

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 150 150"><defs><style>.cls-1{fill:url(#linear-gradient);}.cls-2{fill:#fff;fill-rule:evenodd;}.cls-3{fill:none;stroke:#fff;stroke-linecap:round;stroke-linejoin:round;stroke-width:5.29px;}</style><linearGradient id="linear-gradient" x1="75.01" y1="2.89" x2="75.01" y2="147.89" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#0f739a"/><stop offset="1" stop-color="#176282"/></linearGradient></defs><title>aqv-icons</title><circle class="cls-1" cx="75.01" cy="75.39" r="72.5"/><path class="cls-2" d="M44.73,73.83V69.56c4.45,4,8.9,4.54,13.35,0q8.4,6.41,16.79,0,8.23,6.41,16.47,0,7,6.41,14,0v4.27c-4.68,3-9.36,3-14,0-5.49,3.21-11,2.83-16.47,0a16.69,16.69,0,0,1-16.79,0C53.63,76.8,49.18,76.87,44.73,73.83Z"/><path class="cls-2" d="M50.68,83.21V79c3.58,4,7.16,4.53,10.73,0q6.75,6.4,13.49,0,6.63,6.4,13.24,0,5.64,6.4,11.29,0v4.26c-3.77,3.05-7.53,3-11.29,0-4.41,3.21-8.83,2.83-13.24,0q-6.75,4.52-13.49,0C57.84,86.18,54.26,86.25,50.68,83.21Z"/><path class="cls-3" d="M13.18,85.27l7.55-9.21c1-2.09,4.16-4.65,6.06-4.65h5.87c2.64,0,4.29,2.31,5.76,4.65L54.24,97.57H95.87l15.82-21.51c1.47-2.34,3.12-4.65,5.76-4.65h5.87c1.9,0,5,2.56,6.06,4.65l7.55,9.21"/></svg>
2

Have you looked at this?
http://forum.inductiveautomation.com/t/feature-custom-svg-icon-creation/23480/2?u=dkylep

3

Yes numerous times. No matter how I format it, it doesn’t work.

4

I just tried to put your sgv file into an icon and I kind of got it to work. I haven’t tried to get the gradient formatting or anything but I here’s a start.

image

I created a new .svg file (called ‘_testIcons.svg’) in ignition’s icon folder

image
image749×86 4.02 KB

added your image path’s to the file and formatted it to fit what was in the other svg files. I did scale your paths down from a 150x150 image down to 24x24 because ignition’s icon only seems to accept 24x24 icons.

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<style>
			.icon { display: none }
			.icon:target { display: inline }
		</style>
	</defs>
	<svg viewBox="0 0 24 24">
		<g class="icon" id="test1">

			<circle transform="scale(0.16 0.16)" cx="75.01" cy="75.39" r="72.5"/>

			<path fill="#FFFFFF" transform="scale(0.16 0.16)" d="M44.73,73.83V69.56c4.45,4,8.9,4.54,13.35,0q8.4,6.41,16.79,0,8.23,6.41,16.47,0,7,6.41,14,0v4.27c-4.68,3-9.36,3-14,0-5.49,3.21-11,2.83-16.47,0a16.69,16.69,0,0,1-16.79,0C53.63,76.8,49.18,76.87,44.73,73.83Z"/>
			<path fill="#FFFFFF" transform="scale(0.16 0.16)" d="M50.68,83.21V79c3.58,4,7.16,4.53,10.73,0q6.75,6.4,13.49,0,6.63,6.4,13.24,0,5.64,6.4,11.29,0v4.26c-3.77,3.05-7.53,3-11.29,0-4.41,3.21-8.83,2.83-13.24,0q-6.75,4.52-13.49,0C57.84,86.18,54.26,86.25,50.68,83.21Z"/>
			<path fill="#FFFFFF" transform="scale(0.16 0.16)" d="M13.18,85.27l7.55-9.21c1-2.09,4.16-4.65,6.06-4.65h5.87c2.64,0,4.29,2.31,5.76,4.65L54.24,97.57H95.87l15.82-21.51c1.47-2.34,3.12-4.65,5.76-4.65h5.87c1.9,0,5,2.56,6.06,4.65l7.55,9.21"/>
		</g>
	</svg>
</svg>

Then I updated the icons prop.path to “_testIcons/test1” (“file_name/id”).

5

Awesome, thank you. It’s weird how the image looks because it’s not suppose to be like that. This is how its suppose to look. Don’t know if you had to remove some of the xml, which could have caused this.

PitIcon
PitIcon1551×937 39.1 KB

6

That is weird. I didn’t take anything out on purpose. I just copied and pasted from your post. It looks like mine draws a straight line from one side to the other almost as if the rounded ends in the figure don’t get interpreted correctly and the shape just closes.

I don’t know how the ignition software interprets the svg data. Maybe someone could enlighten me. It definitely doesn’t handle some of the, seemingly normal, formatting properly. For example, your linear gradient didn’t seem to work.

I might play around a little bit to see if I can get it to work. I’m curious about this topic because I’ll probably be utilizing some of it.

7

I know it’s been a while but I was just adding a custom icon to my project and ran into a similar issue where it was not displaying as I intended. Which reminded me of this thread. Maybe you’ve already figured this out but I wanted to share, just in case.
I’ve learned that the reason your icon wasn’t displaying correctly is because the one line ‘containing the liquid’ is a stroke path and it had fill="#FFFFFF" set, causing it to try to fill in the shape.

If you get rid of the fill color, set it to none and play around with the stroke width and color on that last path you can get it to display properly.

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<defs>
		<style>
			.icon { display: none }
			.icon:target { display: inline }
		</style>
	</defs>
	<svg viewBox="0 0 24 24">
		<g class="icon" id="test1">

			<circle transform="scale(0.16 0.16)" cx="75.01" cy="75.39" r="72.5"/>

			<path fill="#FFFFFF" transform="scale(0.16 0.16)" d="M44.73,73.83V69.56c4.45,4,8.9,4.54,13.35,0q8.4,6.41,16.79,0,8.23,6.41,16.47,0,7,6.41,14,0v4.27c-4.68,3-9.36,3-14,0-5.49,3.21-11,2.83-16.47,0a16.69,16.69,0,0,1-16.79,0C53.63,76.8,49.18,76.87,44.73,73.83Z"/>
			<path fill="#FFFFFF" transform="scale(0.16 0.16)" d="M50.68,83.21V79c3.58,4,7.16,4.53,10.73,0q6.75,6.4,13.49,0,6.63,6.4,13.24,0,5.64,6.4,11.29,0v4.26c-3.77,3.05-7.53,3-11.29,0-4.41,3.21-8.83,2.83-13.24,0q-6.75,4.52-13.49,0C57.84,86.18,54.26,86.25,50.68,83.21Z"/>
			<path stroke-width="8" stroke-linecap="round" stroke="#FFFFFF" fill="none" transform="scale(0.16 0.16)" d="M13.18,85.27l7.55-9.21c1-2.09,4.16-4.65,6.06-4.65h5.87c2.64,0,4.29,2.31,5.76,4.65L54.24,97.57H95.87l15.82-21.51c1.47-2.34,3.12-4.65,5.76-4.65h5.87c1.9,0,5,2.56,6.06,4.65l7.55,9.21"/>
		</g>
	</svg>
</svg>

image