Vision SVGs & Stroke Widths Not Preserved

AIO · October 14, 2025, 8:44pm

Hi folks,

Trying my hand at creating some SVGs to import to Vision, having issues with how they are importing.

I’m using lines and arcs to create some P&ID components, however the stroke width of the items appears to get lost on import.

The components in Inkscape:

The components on a web tool to confirm sanity:

The components when loaded into Vision:

The component on the left uses rectangles for the vertical lines. The object on the right uses lines with a stroke width of 3px. The arc, similarly, is a stroke-only arc, and the 3px width is not preserved. I’ve tried simplifying the paths, exporting as SVG 1.1, exporting as an optimized SVG. All to the same end in Vision import. I’ve referenced the heck out of the page in the user manual.

So my question: What have I done wrong? Is there a workaround I should know about? is there a better way to go about creating line diagrams that maintain stroke width and scale well?

SVG for reference:

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

<svg
   width="1016"
   height="670"
   viewBox="0 0 268.81666 177.27083"
   version="1.1"
   id="svg1"
   inkscape:version="1.4.2 (f4327f4, 2025-05-13)"
   sodipodi:docname="Test3.svg"
   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="#ffffff"
     bordercolor="#000000"
     borderopacity="0.25"
     inkscape:showpageshadow="2"
     inkscape:pageopacity="0.0"
     inkscape:pagecheckerboard="0"
     inkscape:deskcolor="#d1d1d1"
     inkscape:document-units="mm"
     inkscape:zoom="8"
     inkscape:cx="657.25"
     inkscape:cy="248.5625"
     inkscape:window-width="2560"
     inkscape:window-height="1369"
     inkscape:window-x="-8"
     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">
    <g
       id="g7"
       inkscape:label="bridgeVert1"
       transform="translate(-6.746875,10.451042)">
      <rect
         style="fill:#000000;stroke:#000000;stroke-width:0.0507508;stroke-dasharray:none"
         id="rect1-277-6-8-0"
         width="0.74299926"
         height="2.5950825"
         x="-161.10588"
         y="39.183708"
         transform="scale(-1,1)"
         inkscape:label="vert2" />
      <rect
         style="fill:#000000;stroke:#000000;stroke-width:0.0507508;stroke-dasharray:none"
         id="rect1-277-6-8-0-2"
         width="0.74299926"
         height="2.5950825"
         x="-161.10588"
         y="43.591404"
         transform="scale(-1,1)"
         inkscape:label="vert1" />
      <path
         style="fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:0.793757;stroke-dasharray:none"
         id="path7-1-6"
         sodipodi:type="arc"
         sodipodi:cx="-42.685097"
         sodipodi:cy="161.13126"
         sodipodi:rx="1.2778016"
         sodipodi:ry="1.2797894"
         sodipodi:start="0"
         sodipodi:end="3.1415927"
         sodipodi:arc-type="arc"
         d="m -41.407295,161.13126 a 1.2778016,1.2797894 0 0 1 -0.638901,1.10833 1.2778016,1.2797894 0 0 1 -1.277802,0 1.2778016,1.2797894 0 0 1 -0.6389,-1.10833"
         sodipodi:open="true"
         transform="rotate(-90)"
         inkscape:label="arc1" />
    </g>
    <path
       style="fill:#000000;fill-opacity:0;stroke:#000000;stroke-width:0.793757;stroke-dasharray:none;stroke-linecap:butt"
       id="path7-1-6-3"
       sodipodi:type="arc"
       sodipodi:cx="-53.169212"
       sodipodi:cy="157.69165"
       sodipodi:rx="1.2778016"
       sodipodi:ry="1.2797894"
       sodipodi:start="0"
       sodipodi:end="3.1415927"
       sodipodi:arc-type="arc"
       d="m -51.891411,157.69165 a 1.2778016,1.2797894 0 0 1 -0.638901,1.10833 1.2778016,1.2797894 0 0 1 -1.277801,0 1.2778016,1.2797894 0 0 1 -0.638901,-1.10833"
       sodipodi:open="true"
       transform="rotate(-90)"
       inkscape:label="arc1" />
    <path
       style="fill:none;fill-opacity:0;stroke:#000000;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
       d="m 157.29479,49.642448 v 2.645833 z"
       id="path7"
       inkscape:label="vert2" />
    <path
       style="fill:none;fill-opacity:0;stroke:#000000;stroke-width:0.79375;stroke-dasharray:none;stroke-opacity:1"
       d="m 157.29479,54.050141 v 2.645833 z"
       id="path7-6"
       inkscape:label="vert1" />
  </g>
</svg>

paul-griffith · October 14, 2025, 10:46pm

It's not a 1:1 replacement, because dropping an SVG in directly gets you access to all the internal 'bits' of the SVG if you need to do things like dynamically update colors, but if you just need to drop an SVG on the page, you can upload it to Image Management first and then embed it via the Image component. Et voila:

(Your particular SVG probably needs a more useful viewbox defined for this to work well).

The user manual alludes to this, but there's two lossy parts here:

The conversion of the underlying SVG into known elements by the third party Apache Batik library
The conversion of those Batik library components into Vision/Java Swing components.

I couldn't tell you which one is the problem here offhand, but either way I wouldn't hold your breath waiting on us to fix this first party. Embedding the image is definitely the easiest solution for the moment.

As a tangent, while it's technically possible, in my experience trying to do line diagrams that scale well in Vision is an enormous endeavor that I would hesitate to undertake, especially if you're trying to make them out of many individual components arranged "just so" in the designer.

The only reasonable way to do a P&ID or similar style diagram in Vision is to make the entire thing as a monolithic SVG in an external tool then drop that entire SVG in to Ignition (rendering it as an image).

nminchin · October 15, 2025, 7:33am

I can see in your svg that there are indeed multiple stroke widths used by your components. I can also see lots of transforms, mm units (use pixels), Inkscape layers (remove these), decimal viewbox values (set to integers).

In general, you want to keep imported svgs as simple as possible in terms of how they're built.

use integer viewbox values
design in pixels
avoid creating transforms if you can
remove Inkscape layers and keep your components in the root
obviously set your strokes to the same values
save as a simple svg or optimised svg, not an Inkscape svg

I suspect they're showing the same in Inkscape because Inkscape is scaling them with those transforms, but it isn't translating the same when imported into inkscape

AIO · October 15, 2025, 3:38pm

Thanks, Paul.

It's helpful to know that the image import will work for this. And I definitely don't intend to import a bunch of tiny parts to make line diagrams - I just cut down the greater P&ID for testing and troubleshooting. I appreciate all the insight here - thanks for taking the time to explain it.

AIO · October 15, 2025, 3:41pm

Thanks for the tips, Nick!

That's where my inexperience with Inkscape comes in - I did my best to design in px and keep strokes the same, but clearly that effort was not successful. I'll have to spend some additional time getting my Inkscape workspace configured to make it simpler / easier.

AIO · October 15, 2025, 8:06pm

Changing these settings (specifically the viewbox to px) seems to have solved most of my woes, including reducing transforms and aligning things to a regular grid. The other thing I did was toggled stroke scaling. Thank you, again, for the tips.

nminchin · October 16, 2025, 10:49am

No worries. You can actually see what you're going to get in Inkscape by opening the xml editor in Inkscape. Then you can see if you've got any weirdness that Inkscape has added