Using SVG with linked Images in Ignition Perspective

cchang · February 28, 2024, 3:21pm

I have an SVG file that pulls in another SVG file as an image object. So in the SVG's code file, there are file paths as shown in the image below.

(Note: I added the "/system/images/" portion)

However, I am unable to display the SVG in Ignition perspective. I'm not sure how Ignition handles SVGs so I'm not sure if what I'm trying to do is possible or not. The thumbnail for this SVG in Image Management is showing as broken (shown below) so it seems like it is not able to locate the source file or it is not able to execute the source code. Or it could be something else. But I did create the proper folders and placed the source file in the location that the SVG is referencing.

Has anyone had any experience using SVGs with links in Ignition? If not, does anyone know how I might be able to display this type of SVG in Ignition? I wasn't sure if I was doing something wrong or if this type of SVG is not supported by Ignition.
(P.S. The SVGs were created in Inkscapes)

victordcq · February 29, 2024, 9:26am

Could you post the converted svg code here?
Also is it really neccecary for the svg to hold the img?

cchang · February 29, 2024, 2:52pm

(Tried to upload the SVGs but it displayed the SVG on the post instead of uploading the SVG files. Anyone know how to get around this?)

As for the reason why, when I use linked images, if I make changes to the source SVG and save the file, the changes I made to that file will apply to all of the images that are linked to that source SVG. So if I have an SVG with 50+ duplicates of a certain symbol, it would be much quicker to have them linked to an external "master copy" so if I ever have to make changes, I only have to make those changes once rather then manually update all 50+ copies of the symbol.

Additionally, I have noticed that when using linked images in an SVG, the file size is drastically reduced versus when copying and pasting the contents of an SVG onto another. This would help reduce/prevent any lags or delays caused by file size when loading SVGs in Ignition.

victordcq · March 1, 2024, 7:34am

You could zip it

cchang · March 1, 2024, 2:21pm

svg.zip (4.3 KB)

Ah thank you. Didn't think about that.

jlandwerlen · March 1, 2024, 4:20pm

Why is it necessary to link? What is it that you are ultimately trying to do?

When you pull in an SVG into Perspective, just drag it on the view, and then select embed.

cchang · March 1, 2024, 7:59pm

I've explained my reasoning in an earlier reply but maybe it wasn't very clear.

I have created a map / floor layout as an SVG for a current project. On this map, there are multiple repeated structures such as tanks, panels, etc. represented by some symbol that I have created. I have 50+ copies of some of these symbols throughout the map.

Now if I were to ever make an update to the symbol or if I wanted to change the symbol, I would have to manually change each and every copy of that symbol. Like I said, some of these symbols have 50+ copies so this could become a very time consuming task. However, if I were to use linked images, all I would have to do is edit one copy (which would be sourced by a separate SVG file) and all of the image objects linked to the source SVG would receive that update as well.

So the main SVG, which holds the many linked image objects, opens without any issue from my computer. However, when I drag the SVG into Ignition, even though I have the source SVGs in the correct folder in Image Management, Ignition is not able to compile that image.

In addition, using the linked images reduces the file size of the main SVG by a lot, and this is important because the file size of these SVGs can be fairly large which could reduce the loading speed of these SVGs.

cchang · March 1, 2024, 8:08pm

I won't be able to share this file or display the full image but here is about 20% of the SVG I am referring to and hopefully this gives you a better understanding of the scale of what I am working with and why I am trying to get SVGs with linked images to work in Ignition.

jlandwerlen · March 1, 2024, 9:08pm

No idea, but a quick goog and found this, maybe it will help?
https://softwarerecs.stackexchange.com/questions/76954/how-can-i-convert-an-svg-with-linked-images-to-embed-those-images-inside-the-svg

I don't think you can use links, another goog returned comments that they are not supported in browsers. No idea if that is accurate or not.

cchang · March 1, 2024, 10:00pm

Not quite what I am looking for but thank you for looking into it. I appreciate your help.

And the SVG with linked images opens without issue on my browser. I would assume as long as the source file and file path found in the SVG code is properly replicated on the host, then I don't think there should be any issue opening these SVGs in a browser.

victordcq · March 4, 2024, 8:32am

Using images for this i dont think is recommended

But you could use "defs" and "use"

This would reduce you having to repeat your work to one definition (in the defs) per main svg. And it allows easier use of seperate styleing (like wanting to turn an icon red or green)

Here is an example
use.zip (391 Bytes)

<svg viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <!-- Some graphical objects to use -->
  <defs>
    <circle id="myCircle" cx="0" cy="0" r="5" />

    <linearGradient id="myGradient" gradientTransform="rotate(90)">
      <stop offset="20%" stop-color="gold" />
      <stop offset="90%" stop-color="red" />
    </linearGradient>
  </defs>

  <!-- using my graphical objects -->
  <use x="5" y="5" href="#myCircle" fill="url('#myGradient')" />
  <use x="15" y="15" href="#myCircle" fill="url('#myGradient')" />
</svg>

[
  {
    "type": "ia.shapes.svg",
    "version": 0,
    "props": {
      "viewBox": "0 0 20 20",
      "elements": [
        {
          "type": "defs",
          "name": "defs",
          "elements": [
            {
              "type": "circle",
              "name": "myCircle",
              "id": "myCircle",
              "cx": "0",
              "cy": "0",
              "r": "5"
            },
            {
              "type": "linearGradient",
              "name": "myGradient",
              "id": "myGradient",
              "gradientTransform": "rotate(90)",
              "elements": [
                {
                  "type": "stop",
                  "name": "stop",
                  "offset": "20%",
                  "stopColor": "gold"
                },
                {
                  "type": "stop",
                  "name": "stop",
                  "offset": "90%",
                  "stopColor": "red"
                }
              ]
            }
          ]
        },
        {
          "type": "use",
          "name": "use",
          "x": "5",
          "y": "5",
          "fill": {
            "url": "url('#myGradient')"
          },
          "href": "#myCircle"
        },
        {
          "type": "use",
          "name": "use",
          "x": "15",
          "y": "15",
          "fill": {
            "url": "url('#myGradient')"
          },
          "href": "#myCircle"
        }
      ]
    },
    "meta": {
      "name": "use_3"
    },
    "position": {
      "x": 463.5,
      "y": 142,
      "height": 300,
      "width": 300
    },
    "custom": {}
  }
]

stonejosiah · March 7, 2024, 9:28pm

Not sure if this would work for you, but you could also add SVGs to a style and then use it with flex containers. Pretty useful if you don't need to manipulate them after you've created them, but still relatively easy to update as needed.

Just make sure to encode the SVG first. (https://codepen.io/jakob-e/pen/doMoML)

SVG Example Style GCS1A_Tank1

.psc-GCS1A_Tank1 {
  background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='3.9124mm' height='3.8568mm' version='1.1' viewBox='0 0 3.9124 3.8568' xml:space='preserve' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='translate(-69.85 -68.527)' fill='none' stroke='%23000' stroke-width='.02065'%3E%3Cpath d='m70.867 69.3a0.15366 0.15366 0 0 1-0.10131 0.19225 0.15366 0.15366 0 0 1-0.19225-0.10129 0.15366 0.15366 0 0 1 0.10128-0.19226 0.15366 0.15366 0 0 1 0.19227 0.10127'/%3E%3Cpath d='m72.957 69.3a0.15366 0.15366 0 0 1-0.10131 0.19225 0.15366 0.15366 0 0 1-0.19225-0.10129 0.15366 0.15366 0 0 1 0.10128-0.19226 0.15366 0.15366 0 0 1 0.19227 0.10127'/%3E%3Cpath d='m70.867 71.377a0.15366 0.15366 0 0 1-0.10131 0.19225 0.15366 0.15366 0 0 1-0.19225-0.10129 0.15366 0.15366 0 0 1 0.10128-0.19226 0.15366 0.15366 0 0 1 0.19227 0.10127'/%3E%3Cpath d='m72.938 71.378a0.15366 0.15366 0 0 1-0.10131 0.19225 0.15366 0.15366 0 0 1-0.19225-0.10129 0.15366 0.15366 0 0 1 0.10128-0.19226 0.15366 0.15366 0 0 1 0.19226 0.10127'/%3E%3Cpath d='m70.504 69.116h0.44562v0.44221h-0.44562z'/%3E%3Cpath d='m70.401 69.017h0.64711v0.66401h-0.64711z'/%3E%3Cpath d='m72.555 69.128h0.47809v0.43704h-0.47809z'/%3E%3Cpath d='m72.464 69.012h0.66763v0.67488h-0.66763z'/%3E%3Cpath d='m72.567 71.205h0.45394v0.44187h-0.45394z'/%3E%3Cpath d='m72.456 71.077h0.68575v0.69299h-0.68575z'/%3E%3Cpath d='m70.491 71.188h0.4627v0.45758h-0.4627z'/%3E%3Cpath d='m70.386 71.084h0.66075v0.66588h-0.66075z'/%3E%3Cpath d='m73.059 70.319a0.25127 0.25127 0 0 1-0.16565 0.31436 0.25127 0.25127 0 0 1-0.31437-0.16563 0.25127 0.25127 0 0 1 0.16561-0.31438 0.25127 0.25127 0 0 1 0.3144 0.1656'/%3E%3Cpath d='m70.936 70.306a0.25127 0.25127 0 0 1-0.16565 0.31436 0.25127 0.25127 0 0 1-0.31438-0.16563 0.25127 0.25127 0 0 1 0.16562-0.31438 0.25127 0.25127 0 0 1 0.31439 0.1656'/%3E%3Cpath d='m71.022 70.281a0.34254 0.34254 0 0 1-0.22583 0.42854 0.34254 0.34254 0 0 1-0.42856-0.2258 0.34254 0.34254 0 0 1 0.22577-0.42857 0.34254 0.34254 0 0 1 0.42859 0.22574'/%3E%3Cpath d='m73.142 70.297a0.34254 0.34254 0 0 1-0.22582 0.42855 0.34254 0.34254 0 0 1-0.42856-0.2258 0.34254 0.34254 0 0 1 0.22577-0.42857 0.34254 0.34254 0 0 1 0.42858 0.22574'/%3E%3Cpath d='m71.108 69.341a0.068212 0.069419 0 0 1-0.045 0.08685 0.068212 0.069419 0 0 1-0.0853-0.04576 0.068212 0.069419 0 0 1 0.045-0.08686 0.068212 0.069419 0 0 1 0.0854 0.04575'/%3E%3Cpath d='m71.388 69.187a0.068212 0.069419 0 0 1-0.045 0.08685 0.068212 0.069419 0 0 1-0.0853-0.04576 0.068212 0.069419 0 0 1 0.045-0.08686 0.068212 0.069419 0 0 1 0.0854 0.04575'/%3E%3Cpath d='m71.825 69.101a0.068212 0.069419 0 0 1-0.045 0.08685 0.068212 0.069419 0 0 1-0.0854-0.04576 0.068212 0.069419 0 0 1 0.045-0.08686 0.068212 0.069419 0 0 1 0.0854 0.04575'/%3E%3Cpath d='m72.306 69.194a0.068212 0.069419 0 0 1-0.045 0.08685 0.068212 0.069419 0 0 1-0.0853-0.04576 0.068212 0.069419 0 0 1 0.045-0.08686 0.068212 0.069419 0 0 1 0.0853 0.04575'/%3E%3Cpath d='m72.138 71.579a0.046717 0.047544 0 0 1-0.0308 0.05948 0.046717 0.047544 0 0 1-0.0585-0.03134 0.046717 0.047544 0 0 1 0.0308-0.05949 0.046717 0.047544 0 0 1 0.0585 0.03133'/%3E%3Cpath d='m72.345 71.514a0.046717 0.047544 0 0 1-0.0308 0.05948 0.046717 0.047544 0 0 1-0.0585-0.03134 0.046717 0.047544 0 0 1 0.0308-0.05949 0.046717 0.047544 0 0 1 0.0585 0.03133'/%3E%3Cpath d='m71.463 71.576a0.046717 0.047544 0 0 1-0.0308 0.05948 0.046717 0.047544 0 0 1-0.0584-0.03134 0.046717 0.047544 0 0 1 0.0308-0.05949 0.046717 0.047544 0 0 1 0.0584 0.03133'/%3E%3Cpath d='m71.806 71.637a0.056012 0.057004 0 0 1-0.0369 0.07132 0.056012 0.057004 0 0 1-0.0701-0.03758 0.056012 0.057004 0 0 1 0.0369-0.07132 0.056012 0.057004 0 0 1 0.0701 0.03757'/%3E%3Cpath d='m71.203 71.436a0.082349 0.083806 0 0 1-0.0543 0.10485 0.082349 0.083806 0 0 1-0.10303-0.05524 0.082349 0.083806 0 0 1 0.0543-0.10486 0.082349 0.083806 0 0 1 0.10304 0.05523'/%3E%3Cpath d='m72.595 70.129v-0.22025'/%3E%3Cpath d='m73.042 69.968a0.046717 0.047544 0 0 1-0.0308 0.05948 0.046717 0.047544 0 0 1-0.0584-0.03134 0.046717 0.047544 0 0 1 0.0308-0.05949 0.046717 0.047544 0 0 1 0.0585 0.03133'/%3E%3Cpath d='m73.008 70.108v-0.13915'/%3E%3Cpath d='m72.596 69.979h0.40294'/%3E%3Cpath d='m72.611 70.122v-0.21257'/%3E%3Cpath d='m72.63 70.105v-0.1955'/%3E%3Cpath d='m72.649 70.091v-0.18184'/%3E%3Cpath d='m70.469 70.645v0.22025'/%3E%3Cpath d='m70.916 70.807a0.046717 0.047544 0 0 0-0.0308-0.05948 0.046717 0.047544 0 0 0-0.0584 0.03134 0.046717 0.047544 0 0 0 0.0308 0.05949 0.046717 0.047544 0 0 0 0.0584-0.03133'/%3E%3Cpath d='m70.882 70.666v0.13915'/%3E%3Cpath d='m70.47 70.795h0.40294'/%3E%3Cpath d='m70.485 70.653v0.21257'/%3E%3Cpath d='m70.504 70.67v0.1955'/%3E%3Cpath d='m70.523 70.683v0.18184'/%3E%3Cpath d='m71.294 70.383a0.061693 0.062785 0 0 1-0.0407 0.07855 0.061693 0.062785 0 0 1-0.0772-0.04139 0.061693 0.062785 0 0 1 0.0407-0.07855 0.061693 0.062785 0 0 1 0.0772 0.04138'/%3E%3Cpath d='m71.327 70.477a0.083333 0.039798 0 0 1-0.0549 0.04979 0.083333 0.039798 0 0 1-0.10427-0.02623 0.083333 0.039798 0 0 1 0.0549-0.0498 0.083333 0.039798 0 0 1 0.10427 0.02623'/%3E%3Cpath d='m71.303 70.557a0.061693 0.062785 0 0 1-0.0407 0.07855 0.061693 0.062785 0 0 1-0.0772-0.04139 0.061693 0.062785 0 0 1 0.0407-0.07856 0.061693 0.062785 0 0 1 0.0772 0.04138'/%3E%3Cpath d='m71.39 70.569a0.026709 0.054072 0 0 1-0.0176 0.06765 0.026709 0.054072 0 0 1-0.0334-0.03564 0.026709 0.054072 0 0 1 0.0176-0.06765 0.026709 0.054072 0 0 1 0.0334 0.03563'/%3E%3Cpath d='m71.147 70.632h0.16943c3e-3 0 5e-3 0.0023 5e-3 0.0051v0.05715c0 0.0028-2e-3 0.0051-5e-3 0.0051h-0.16943c-3e-3 0-5e-3 -0.0023-5e-3 -0.0051v-0.05715c0-0.0028 2e-3 -0.0051 5e-3 -0.0051z'/%3E%3Cpath d='m71.3 70.569h0.0293c4e-3 0 8e-3 0.0033 8e-3 0.0075v0.0075c0 0.0042-3e-3 0.0075-8e-3 0.0075h-0.0293c-4e-3 0-8e-3 -0.0033-8e-3 -0.0075v-0.0075c0-0.0042 3e-3 -0.0075 8e-3 -0.0075z'/%3E%3Cpath d='m71.7 70.374a0.061693 0.062785 0 0 0 0.0407 0.07855 0.061693 0.062785 0 0 0 0.0772-0.04139 0.061693 0.062785 0 0 0-0.0407-0.07855 0.061693 0.062785 0 0 0-0.0772 0.04138'/%3E%3Cpath d='m71.668 70.468a0.083333 0.039798 0 0 0 0.0549 0.04979 0.083333 0.039798 0 0 0 0.10426-0.02623 0.083333 0.039798 0 0 0-0.0549-0.0498 0.083333 0.039798 0 0 0-0.10426 0.02623'/%3E%3Cpath d='m71.692 70.548a0.061693 0.062785 0 0 0 0.0407 0.07855 0.061693 0.062785 0 0 0 0.0772-0.04139 0.061693 0.062785 0 0 0-0.0407-0.07856 0.061693 0.062785 0 0 0-0.0772 0.04138'/%3E%3Cpath d='m71.605 70.56a0.026709 0.054072 0 0 0 0.0176 0.06765 0.026709 0.054072 0 0 0 0.0334-0.03564 0.026709 0.054072 0 0 0-0.0176-0.06765 0.026709 0.054072 0 0 0-0.0334 0.03563'/%3E%3Cpath d='m71.847 70.623h-0.16943c-3e-3 0-5e-3 0.0023-5e-3 0.0051v0.05715c0 0.0028 2e-3 0.0051 5e-3 0.0051h0.16943c3e-3 0 5e-3 -0.0023 5e-3 -0.0051v-0.05715c0-0.0028-2e-3 -0.0051-5e-3 -0.0051z'/%3E%3Cpath d='m71.695 70.561h-0.0293c-4e-3 0-8e-3 0.0033-8e-3 0.0075v0.0075c0 0.0042 3e-3 0.0075 8e-3 0.0075h0.0293c4e-3 0 7e-3 -0.0033 7e-3 -0.0075v-0.0075c0-0.0042-3e-3 -0.0075-7e-3 -0.0075z'/%3E%3Cpath d='m72.208 70.371a0.061693 0.062785 0 0 0 0.0407 0.07855 0.061693 0.062785 0 0 0 0.0772-0.04139 0.061693 0.062785 0 0 0-0.0407-0.07856 0.061693 0.062785 0 0 0-0.0772 0.04138'/%3E%3Cpath d='m72.176 70.465a0.083333 0.039798 0 0 0 0.0549 0.04979 0.083333 0.039798 0 0 0 0.10426-0.02623 0.083333 0.039798 0 0 0-0.0549-0.04979 0.083333 0.039798 0 0 0-0.10426 0.02623'/%3E%3Cpath d='m72.2 70.545a0.061693 0.062785 0 0 0 0.0407 0.07855 0.061693 0.062785 0 0 0 0.0772-0.04139 0.061693 0.062785 0 0 0-0.0407-0.07856 0.061693 0.062785 0 0 0-0.0772 0.04138'/%3E%3Cpath d='m72.113 70.557a0.026709 0.054072 0 0 0 0.0176 0.06765 0.026709 0.054072 0 0 0 0.0334-0.03564 0.026709 0.054072 0 0 0-0.0176-0.06765 0.026709 0.054072 0 0 0-0.0334 0.03563'/%3E%3Cpath d='m72.355 70.619h-0.16943c-3e-3 0-5e-3 0.0023-5e-3 0.0051v0.05715c0 0.0028 2e-3 0.0051 5e-3 0.0051h0.16943c3e-3 0 5e-3 -0.0023 5e-3 -0.0051v-0.05715c0-0.0028-2e-3 -0.0051-5e-3 -0.0051z'/%3E%3Cpath d='m72.203 70.557h-0.0293c-4e-3 0-7e-3 0.0033-7e-3 0.0075v0.0075c0 0.0042 3e-3 0.0075 7e-3 0.0075h0.0293c4e-3 0 7e-3 -0.0033 7e-3 -0.0075v-0.0075c0-0.0042-3e-3 -0.0075-7e-3 -0.0075z'/%3E%3Cpath d='m72.558 71.964a0.19679 0.051918 65.212 0 1 0.0722 0.23786 0.19679 0.051918 65.212 0 1-0.11339-0.09052 0.19679 0.051918 65.212 0 1-0.0722-0.23788 0.19679 0.051918 65.212 0 1 0.11339 0.09049'/%3E%3Cpath d='m72.658 71.899a0.06945 0.068248 0 0 1-0.0458 0.08539 0.06945 0.068248 0 0 1-0.0869-0.04499 0.06945 0.068248 0 0 1 0.0458-0.08539 0.06945 0.068248 0 0 1 0.0869 0.04498'/%3E%3Cpath d='m72.295 71.524 0.17586 0.35855'/%3E%3Cpath d='m73.737 71.932a0.34046 0.34046 0 0 1-0.22445 0.42594 0.34046 0.34046 0 0 1-0.42596-0.22442 0.34046 0.34046 0 0 1 0.2244-0.42597 0.34046 0.34046 0 0 1 0.42599 0.22437'/%3E%3Cpath d='m73.14 72.291 0.53363-0.5288'/%3E%3Cpath d='m73.653 72.277-1.089-1.0766'/%3E%3Cpath d='m73.379 71.674-0.33078-0.33078'/%3E%3Cpath d='m73.052 72.006-0.33696-0.33183'/%3E%3Cpath d='m72.353 70.776-0.21086 0.21086'/%3E%3Cpath d='m71.39 69.812-0.20488 0.20488'/%3E%3Cpath d='m72.786 70.092a1.0721 1.0508 0 0 1-0.70679 1.3147 1.0721 1.0508 0 0 1-1.3413-0.69268 1.0721 1.0508 0 0 1 0.70662-1.3148 1.0721 1.0508 0 0 1 1.3414 0.69252'/%3E%3Cpath d='m73.284 69.921a1.5931 1.5829 0 0 1-1.0503 1.9803 1.5931 1.5829 0 0 1-1.9932-1.0434 1.5931 1.5829 0 0 1 1.05-1.9804 1.5931 1.5829 0 0 1 1.9933 1.0432'/%3E%3Cpath d='m73.178 69.95a1.4744 1.4607 0 0 1-0.97201 1.8275 1.4744 1.4607 0 0 1-1.8447-0.9629 1.4744 1.4607 0 0 1 0.97178-1.8276 1.4744 1.4607 0 0 1 1.8448 0.96267'/%3E%3Cpath d='m73.004 70.025a1.2855 1.2463 0 0 1-0.84752 1.5592 1.2855 1.2463 0 0 1-1.6084-0.82153 1.2855 1.2463 0 0 1 0.84731-1.5593 1.2855 1.2463 0 0 1 1.6085 0.82133'/%3E%3Cpath d='m72.469 69.675 0.65222-0.65563'/%3E%3Cpath d='m71.04 69.677-0.63514-0.65051'/%3E%3Cpath d='m70.394 71.738 0.64881-0.63173'/%3E%3C/g%3E%3C/svg%3E ");
  background-repeat: no-repeat;
  background-size: contain;
}