Perspective SVG Adding Unwanted Offset

Shaun_Chalmers · October 10, 2024, 12:53am

We are creating a series of template views in Perspective (Ignition 8.1.43) and have been working with SVG files for all the graphical elements.

We are using images within Coordinate containers with no issues everywhere else in the project.
However, there is one SVG which should be positioned at 0,0 within the image but for some unknown reason has a 5/6px Y offset when added to the runtime.

We have attempted recreating the file multiple times, including from other source files which don't have the offset when used.

Our current observation and theory is that there is some sort of bug when working with small SVG files (this SVG is 21px X 10px), as every other SVG has been fine, and they are bigger in size (20px+ X 20px+).

I have included a screenshot of the issue, and attached the SVG we are using.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   width="21"
   height="10"
   viewBox="0 0 5.5562499 2.6458333"
   version="1.1"
   id="svg1"
   sodipodi:docname="blower_head.svg"
   inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:svg="http://www.w3.org/2000/svg">
  <sodipodi:namedview
     id="namedview1"
     pagecolor="#505050"
     bordercolor="#ffffff"
     borderopacity="1"
     inkscape:showpageshadow="0"
     inkscape:pageopacity="0"
     inkscape:pagecheckerboard="1"
     inkscape:deskcolor="#505050"
     inkscape:document-units="px"
     inkscape:zoom="33.098946"
     inkscape:cx="12.115189"
     inkscape:cy="4.2750606"
     inkscape:window-width="1920"
     inkscape:window-height="1017"
     inkscape:window-x="1912"
     inkscape:window-y="-8"
     inkscape:window-maximized="1"
     inkscape:current-layer="layer1" />
  <defs
     id="defs1" />
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1">
    <rect
       style="fill:#aaaaaa;fill-opacity:1;stroke:#000000;stroke-width:0.158741;stroke-dasharray:none"
       id="rect1"
       width="5.3975081"
       height="2.4870923"
       x="0.079274215"
       y="0.079274215" />
  </g>
</svg>

Steve_Laubach · October 10, 2024, 2:33am

Can you post the SVG code in a code block?

Shaun_Chalmers · October 10, 2024, 2:50am

Hi Steve, thanks for the question. I have updated my post.
It should just be a grey box with border that is 21px X 10px as shown.

Steve_Laubach · October 10, 2024, 4:33am

It's rendering properly for me. What version of Ignition are you running?

This is how it looks in 8.1.43

As with all SVGs it is rendering in a viewbox that is aligned with the drawing window.

This is how the viewbox settings looked after I embedded it

This is the json

[
  {
    "type": "defs",
    "id": "defs1",
    "name": "defs1"
  },
  {
    "type": "group",
    "id": "layer1",
    "elements": [
      {
        "type": "rect",
        "fill": {
          "opacity": "1",
          "paint": "#aaaaaa"
        },
        "stroke": {
          "dasharray": "none",
          "paint": "#000000",
          "width": "0.158741"
        },
        "id": "rect1",
        "name": "rect1",
        "x": "0.079274215",
        "y": "0.079274215",
        "width": "5.3975081",
        "height": "2.4870923"
      }
    ],
    "name": "layer1"
  }
]

Just to make sure I'm clear. If I make the viewbox bigger than the SVG it will resize but it will resize based on whichever is the smallest dimension relative to the SVG and it will float around inside the draw window.

If you want it to resize with your draw window you're probably better off just dragging a label on the screen and giving it a border and a background color.

Shaun_Chalmers · October 10, 2024, 7:18pm

I am running 8.1.43 as well.
Flex Container

Embedded Image

Image not embedded in a second container.

lrose · October 10, 2024, 7:39pm

If you look at the JSON that @Steve_Laubach posted, you will notice that the height and width of his SVG match the dimensions of the viewBox. That is why yours doesn't look correct. Your SVG size is different in each of the screen snips you provided and none of them match the view box dimensions..

Shaun_Chalmers · October 10, 2024, 8:00pm

We are working through the Image Management tool. Is Steve working with a custom Icon set?

lrose · October 10, 2024, 9:01pm

No, I don’t believe so, but embedded SVG or imported image, in the long run doesn’t matter as the renderer sees an SVG with a View Box that is smaller than its container, and so it will position its self relatively in that container.

Personally, I would askew the image management tool, and instead just embed the SVG (unless the SVG does not need be dynamic and will be fairly static over the life of the project).

Steve_Laubach · October 10, 2024, 11:53pm

I just copied the SVG text to a text file, saved it as an SVG and embedded it in Ignition. I'm not using the SVG. I was just trying to replicate the behavior you were experiencing to hopefully help.

I'm not using a custom icon set. I just loaded it into ignition on my home computer.

Shaun_Chalmers · October 14, 2024, 8:31pm

Hi Steve, I have tried a number of different things but we are still getting occasional objects that display this issue.

This object allows me to use fit: none and then shrink the view to just show the view.

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="20" height="20" version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-20.987 -72.87)">
  <path transform="matrix(.34752 0 0 .40131 28.187 71.644)" d="m-6.3317 3.5915 13.922 24.114h-13.922l-13.922-1e-6 6.9612-12.057z" fill="#3bda24" stroke="#000" stroke-width=".53639"/>
 </g>
</svg>

However this object which is exactly the same with just a different size viewbox in the SVG behaves with the bugged view.

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="10" height="10" version="1.1" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-20.987 -72.87)">
  <path transform="matrix(.34752 0 0 .40131 28.187 71.644)" d="m-6.3317 3.5915 13.922 24.114h-13.922l-13.922-1e-6 6.9612-12.057z" fill="#3bda24" stroke="#000" stroke-width=".53639"/>
 </g>
</svg>

Are you able to recreate this behaviour? I am still using the Image component to display the SVG.

lrose · October 15, 2024, 5:50pm

So, I looked into this, and I am able to replicate this with the Image Component. Looking at the rendered html and css in the browser (Chrome), I can see no reason why the loaded Image would have this padding added.

For what it's worth, I don't understand the transforms nor the odd relative positions that Inkscape has chosen to use to generate this simple image. Sometimes Inkscape does some wacky crap, anyway, I simplified the SVG so that I could manipulate it, plus I thought perhaps the transforms were possibly playing into the issue. Doesn't seem like that is the case.

This SVG will produce the exact same image. I'm just using Absolute coordinates, and nice even numbers.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="20" height="20" version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <path d="M10,0 L20,20 L0,20Z" fill="#3bda24" stroke="#000" stroke-width=".5"/>
</svg>

nminchin · October 15, 2024, 9:50pm

Yes... Yes it does. I always make sure to:

Save the SVG as an optimised svg
Check over the SVG xml and fix any transforms and just dumb things that would make modifications directly to the xml by a human impossible
Try not to use transforms, instead, move the path nodes instead

victordcq · October 16, 2024, 8:44am

could someone get me a copy of the view with svg?

lrose · October 16, 2024, 1:18pm

Okay, looking into this again this morning, in order to get view json for @victordcq, and I believe I have confirmed that it was indeed the weird transforms that are causing this.

Image component settings are all the same only the SVG's have changed. I'm not sure why I didn't see this yesterday, but the Image component does cache things (another reason I'm not a huge fan). Notice how the hand written 10x10 properly scales to twice the size as expected.

Here is the hand written SVG I used just change the height, width, and view box settings to get the different sizes.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="20" height="20" version="1.1" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
  <path d="M10,0 L20,20 L0,20Z" fill="#3bda24" stroke="#000" stroke-width=".5"/>
</svg>

Here is the Inkscape SVG again

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="10" height="10" version="1.1" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-20.987 -72.87)">
  <path transform="matrix(.34752 0 0 .40131 28.187 71.644)" d="m-6.3317 3.5915 13.922 24.114h-13.922l-13.922-1e-6 6.9612-12.057z" fill="#3bda24" stroke="#000" stroke-width=".53639"/>
 </g>
</svg>

And here is the View JSON:

{
  "custom": {},
  "params": {},
  "props": {
    "defaultSize": {
      "height": 762,
      "width": 1055
    }
  },
  "root": {
    "children": [
      {
        "meta": {
          "name": "test"
        },
        "position": {
          "height": 100,
          "width": 100,
          "x": 54,
          "y": 216
        },
        "props": {
          "source": "/system/images/test.svg",
          "style": {
            "borderStyle": "solid"
          }
        },
        "type": "ia.display.image"
      },
      {
        "meta": {
          "name": "test1"
        },
        "position": {
          "height": 100,
          "width": 100,
          "x": 267.5,
          "y": 222
        },
        "props": {
          "source": "/system/images/test1.svg",
          "style": {
            "borderStyle": "solid"
          }
        },
        "type": "ia.display.image"
      },
      {
        "meta": {
          "name": "test2"
        },
        "position": {
          "height": 100,
          "width": 100,
          "x": 54,
          "y": 416
        },
        "props": {
          "source": "/system/images/test2.svg",
          "style": {
            "borderStyle": "solid"
          }
        },
        "type": "ia.display.image"
      },
      {
        "meta": {
          "name": "test4"
        },
        "position": {
          "height": 100,
          "width": 100,
          "x": 267.5,
          "y": 417
        },
        "props": {
          "source": "/system/images/test4.svg",
          "style": {
            "borderStyle": "solid"
          }
        },
        "type": "ia.display.image"
      },
      {
        "meta": {
          "name": "Label"
        },
        "position": {
          "height": 44,
          "width": 175,
          "x": 17,
          "y": 160
        },
        "props": {
          "text": "Hand written SVG view box 10x10"
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "Label_0"
        },
        "position": {
          "height": 44,
          "width": 175,
          "x": 230,
          "y": 160.6666717529297
        },
        "props": {
          "text": "Hand written SVG view box 20x20"
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "Label_1"
        },
        "position": {
          "height": 44,
          "width": 175,
          "x": 16.5,
          "y": 360.66668701171875
        },
        "props": {
          "text": "Inkscape SVG view box 10x10"
        },
        "type": "ia.display.label"
      },
      {
        "meta": {
          "name": "Label_2"
        },
        "position": {
          "height": 44,
          "width": 175,
          "x": 229.5,
          "y": 360.3336870117187
        },
        "props": {
          "text": "Inkscape SVG view box 20x20"
        },
        "type": "ia.display.label"
      }
    ],
    "meta": {
      "name": "root"
    },
    "type": "ia.container.coord"
  }
}

Ignition 8.1.35 if you believe that may be important.

Shaun_Chalmers · October 16, 2024, 9:12pm

Thanks Louis. I tried working only within notepad to modify your hand coded SVG.
Despite that I wasn't able to replicate your results with the handcoded one.
During some further testing yesterday we found that creating an SVG 18px tall or above works without any problems. When working with smaller SVGs, they gradually gained the offset pixel by pixel.
This is my hand modified 10x10, it displays the same issue as the Inkscape one.

<?xml version="1.0" encoding="UTF-8"?>
<svg width="10" height="10" version="1.1" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
  <path d="M5,0 L10,10 L0,10Z" fill="#3bda24" stroke="#000" stroke-width=".3"/>
</svg>

I have tried saving it with different names in the image tool to prevent the caching being an issue, and get consistent results.

@victordcq
Here are the multiple sizes of SVG. Try working through them in a view and see if the offset changes as it did for us.

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="10" height="10" version="1.1" viewBox="0 0 10 10" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-20.987 -72.87)">
  <path transform="matrix(.34752 0 0 .40131 28.187 71.644)" d="m-6.3317 3.5915 13.922 24.114h-13.922l-13.922-1e-6 6.9612-12.057z" fill="#3bda24" stroke="#000" stroke-width=".53639"/>
 </g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="11" height="11" version="1.1" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-20.987 -72.87)">
  <path transform="matrix(.34752 0 0 .40131 28.187 71.644)" d="m-6.3317 3.5915 13.922 24.114h-13.922l-13.922-1e-6 6.9612-12.057z" fill="#3bda24" stroke="#000" stroke-width=".53639"/>
 </g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="12" height="12" version="1.1" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-20.987 -72.87)">
  <path transform="matrix(.34752 0 0 .40131 28.187 71.644)" d="m-6.3317 3.5915 13.922 24.114h-13.922l-13.922-1e-6 6.9612-12.057z" fill="#3bda24" stroke="#000" stroke-width=".53639"/>
 </g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="13" height="13" version="1.1" viewBox="0 0 13 13" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-20.987 -72.87)">
  <path transform="matrix(.34752 0 0 .40131 28.187 71.644)" d="m-6.3317 3.5915 13.922 24.114h-13.922l-13.922-1e-6 6.9612-12.057z" fill="#3bda24" stroke="#000" stroke-width=".53639"/>
 </g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="15" height="15" version="1.1" viewBox="0 0 15 15" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-20.987 -72.87)">
  <path transform="matrix(.34752 0 0 .40131 28.187 71.644)" d="m-6.3317 3.5915 13.922 24.114h-13.922l-13.922-1e-6 6.9612-12.057z" fill="#3bda24" stroke="#000" stroke-width=".53639"/>
 </g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-20.987 -72.87)">
  <path transform="matrix(.34752 0 0 .40131 28.187 71.644)" d="m-6.3317 3.5915 13.922 24.114h-13.922l-13.922-1e-6 6.9612-12.057z" fill="#3bda24" stroke="#000" stroke-width=".53639"/>
 </g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="17" height="17" version="1.1" viewBox="0 0 17 17" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-20.987 -72.87)">
  <path transform="matrix(.34752 0 0 .40131 28.187 71.644)" d="m-6.3317 3.5915 13.922 24.114h-13.922l-13.922-1e-6 6.9612-12.057z" fill="#3bda24" stroke="#000" stroke-width=".53639"/>
 </g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="18" height="18" version="1.1" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-20.987 -72.87)">
  <path transform="matrix(.34752 0 0 .40131 28.187 71.644)" d="m-6.3317 3.5915 13.922 24.114h-13.922l-13.922-1e-6 6.9612-12.057z" fill="#3bda24" stroke="#000" stroke-width=".53639"/>
 </g>
</svg>

<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="19" height="19" version="1.1" viewBox="0 0 19 19" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(-20.987 -72.87)">
  <path transform="matrix(.34752 0 0 .40131 28.187 71.644)" d="m-6.3317 3.5915 13.922 24.114h-13.922l-13.922-1e-6 6.9612-12.057z" fill="#3bda24" stroke="#000" stroke-width=".53639"/>
 </g>
</svg>