SVG files importing empty/corrupted

Ignition
,
1

I have several SVG files that I want to import and use as icons in my perspective project. But every time I try, the SVG gets brought in as some sort of blank or corrupted image. I've tried uploading the SVG files (Menu Icons) by following the custom icon repository instructions from the user manual, which just don't show up in the project, even if I close and reopen the whole designer.

Forum Screenshot 26
Forum Screenshot 261127×621 41.1 KB

And I've tried using the perspective icon manager project that one of the designers before me had gotten from the exchange I believe, but when I try to upload icons there, they come back blank or with some sort of corrupted small dot.

Forum Screenshot 27
Forum Screenshot 271919×912 32.8 KB

It's totally possible that I am doing something wrong rather than this being a bug, but I've spent several days trying to troubleshoot with no success.

2

They may be corrupted somehow. You may try convert them to another .svg through some tool to see if they stop being corrupted after.

You may use photoshop, illustrator...or something like:
World's Best SVG Compressor

Cheers!

3

Ignition doesn't support the complete SVG standard. There are a number of posts here on the forum with recommendations, particularly for Inkscape, on how to export them for best results.

4

Open one of the SVG's in a text editor. Copy that text and paste it here as pre-formatted text.

See Wiki - how to post code on this forum. If you're not sure how to do that.

1 Like
5

This is the text from one of the svgs I am trying to upload (I believe it was designed in Adobe Illustrator)

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Battery" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 6001 6001">
  <defs>
    <style>
      .cls-1 {
        stroke-width: 40px;
      }

      .cls-1, .cls-2 {
        stroke: #231f20;
        stroke-miterlimit: 10;
      }

      .cls-2 {
        stroke-width: 18px;
      }
    </style>
  </defs>
  <path class="cls-1" d="M3950.08,143.17c23.71,3.71,47.52,5.15,71.05,9.92,105.54,21.38,212.96,101.41,212.96,179.17v442.16l461.47.03c259.18,8.63,510.22,154.72,543.93,332.02,2.22,11.66-2.73,24.69,5.34,34.75v4313.51l-16.17,67.19c-49.86,131.24-203.4,241.17-394.12,280.47-42.22,8.7-85.78,12.21-128.49,19.15H1318.82c-41.26-7.4-83.3-10.65-124.32-19.14-216.2-44.77-378.88-177.26-409.76-329.53-2.17-10.72,3.4-23.47-8.87-32.35V1155.44c11.76-14.62,9.21-34.33,13.85-51.71,48.14-180.51,271.5-314.93,539.59-329.29l465.65-.03v-450.69c0-82.18,154.83-181.82,277.36-177.94l6.65-2.62h1871.12ZM4021.08,774.41v-427.94c0-29.88-54.65-60.14-98-58.39l-1812.98-.03c-33.8.84-68.04,9-86.23,29.44-4.96,5.58-15.9,23.5-15.9,28.98v427.94h2013.12ZM1322.13,923.11c-174.71,12.84-308.88,109.58-325.07,227.95l-.04,4288.16c11.84,128.74,166.78,226.32,352.95,234.57h3324.92c193.42-7.36,344.8-108.51,357.1-240.27V1162.43c-9.72-126.12-150.71-229-336.23-240.26l-3373.63.94Z"/>
  <path class="cls-2" d="M1973.99,3683.26c-175.41-17.81-259.99-243.02-140.64-373.83l1634.54-1632.26c174.41-138.67,422.05,30.22,356.8,243.13l-308.44,1003.72,510.41-.09c193.09,11.52,287.73,218.54,169.1,371.25l-1632.11,1629c-174.04,123.03-404.25-33.34-350.85-242.87l345.4-998.06h-584.21ZM3985.33,3162.91h-678.03c-41.88,0-91.26-70.34-80.28-111.6l347.53-1142.35-1533.75,1535.45h723.51c56.36,0,106.81,80.58,84.29,132.64l-379.96,1107.08,1516.69-1521.23Z"/>
</svg>
6

Interesting. If I embed it as an SVG it works fine
battery

So it must be something specific to the icon interface you're using.

7

That shows up fine for me.

animation

8

Ok, I fixed it (attached). Now let's see if I can explain it.

Documentation has a space in the path that shouldn't be there but custom icons are loaded from SVG icon library files at this spot on a windows box:
C:\Program Files\Inductive Automation\Ignition\data\modules\com.inductiveautomation.perspective\icons

Your SVG in this spot is not like embedded SVGs on screens or SVGs loaded into image library. The ones in this spot take up 24x24 tiles where the icon name shows up when you point the icon control to the icon library (the name of your custom SVG. "Custom-sample" in this case).

So you have to update all of your SVGs to be in a 24x24 viewbox and you need to eliminate the classes stuff you had on this SVG.

I just opened your SVG in inkscape. changed the viewbox to 24x24. Changed the pen thickness to .1. Held CTRL and resized the drawing down to fit in the viewbox and saved as optimized.

Then I opened it in a text editor and copied the text over into the library SVG.

Custom-sample

Note: The library file gets loaded when you open your designer. You won't see changes to your icon library until you reopen the designer. Or at least, that's what I do. It's been a few years since I made a custom icon.

Edit:
The forum is reading the icon file and displaying it as an image. You can click on that to download the SVG.