Improved SVG Importing & Rendering, and Convert To Drawing

nader.chinichian · November 3, 2022, 12:26pm

I simply want to use textPath in my SVG with following code:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">

  <path
    id="MyPath"
    fill="none"
    stroke="red"
    d="M10,90 Q90,90 90,45 Q90,10 50,10 Q10,10 10,40 Q10,70 45,70 Q70,70 75,50" />

  <text>
    <textPath href="#MyPath">Quick brown fox jumps over the lazy dog.</textPath>
  </text>
</svg>

This is the result is the browsers:
path

And this is the import result in Perspective and as you can see it doesn't understand href attrib.

victordcq · November 4, 2022, 7:53am

its understanding the href attribute. but the textPath's text seems to be empty and somehow got an extra text element above it.

mperkins · November 4, 2022, 2:43pm

That's a good catch, and it should be an easy fix. I'll see if I can fast track a bug fix for it. Thank you for bringing it to my attention.

nader.chinichian · November 14, 2022, 7:29pm

Hi @mperkins
The new import SVG update, duplicate texts with one level tspan tag.
For Example, following SVG code in the previous version only add one text element:

<?xml version="1.0" encoding="UTF-8"?>

<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg id="svg5" width="210mm" height="297mm" version="1.1" viewBox="0 0 210 297" xmlns="http://www.w3.org/2000/svg">

<g id="layer1">

<text id="text236" x="60.280502" y="53.846066" style="fill:#4d4d4d;font-family:D-DIN;font-size:2.8222px;" xml:space="preserve"><tspan id="tspan234" x="60.280502" y="53.846066" style="fill:#4d4d4d;stroke-width:.52917">This </tspan></text>

</g>

</svg>

But in the new one, we have both text and nested tspan and both text and tspan include text attrib.

There are two major problems with this:
1 - For dynamic text binding I need manually delete tspan which is a very time-consuming task.
2 - It introduces an unwanted bigger file size which leads to an increased loading page.

I really do like the previous import tools that only create one SVG text tag without tspan

mperkins · November 14, 2022, 9:33pm

I really do like the previous import tools that only create one SVG text tag without tspan

The original SVG importer did not support tspans, it just read the text from the child nodes and inserted it in the element. The old behavior might be desirable in this instance... but what about

<text><tspan stroke="green">some green text</tspan> <tspan stroke="red">some red text</tspan></text>

the old importer would result in <text>some green text some red text</text>

the good news is the fix for the other text path issue should fix this so that
<text><tspan stroke="green">some green text</tspan> <tspan stroke="red">some red text</tspan></text>
is retained

nader.chinichian · November 16, 2022, 11:04am

So in the case of parent text tag value is empty please leave it empty and don't duplicate Tapan value for that.

nader.chinichian · January 19, 2023, 5:58am

Hi @mperkins
it seems the SVG document with less than 15px 15px size have problem when importing into the perspective:
This is the SVG (I wrap SVG file in the zip so I can upload it here)
M12.zip (432 Bytes)

After import, it is out of the box. I also test it in 8.1.12 which doesn't have this new update so this problem is very old.

victordcq · January 19, 2023, 10:19am

dont use scale on text, use font size
font-size:4 seems to be oke

mperkins · January 20, 2023, 9:21pm

looks like the font-size SVG element attribute isn't being picked up by our importer, recommend working around it using @victordcq 's workaround

j.israelsen · March 29, 2023, 5:16pm

I'm trying out the "Convert to Drawing" feature and I'm a bit confused. I've tried converting piping and my pipes seem to disappear. I have the following test screen:

When I convert, the pipes disappear:

Also, I tried doing the "Convert to Drawing" on the thermometer seen on the same test screen. Somehow, when I select convert on that component the pipes also disappear. What am I missing here?

mperkins · March 30, 2023, 6:13pm

Hi

I'm trying out the "Convert to Drawing" feature and I'm a bit confused. I've tried converting piping and my pipes seem to disappear. I have the following test screen:

There was a bug introduced in 8.1.23 that resulted in incorrect dimensions and viewBoxes for pipes that were converted to a drawing. This was fixed in 8.1.25. It is highly likely that this is the bug that you are encountering. Which version of Ignition are you using?

Also, I tried doing the "Convert to Drawing" on the thermometer seen on the same test screen. Somehow, when I select convert on that component the pipes also disappear. What am I missing here?

hmm, I know this seems obvious, but are you sure you had the Thermometer component selected before right clicking? I'm not aware of any bugs relating to the selection of SVG elements, not that it's not possible, but convert to drawing appears to work for the Thermometer on my development environment.

j.israelsen · March 30, 2023, 7:03pm

Hello, yes I have been using 8.1.23. Here is a summary:

I upgraded to version 8.1.26, this resolved the pipe conversion.
Before I upgraded to 8.1.23, I tried doing the "convert to drawing" with the Thermometer component again. I was able to recreate the issue (Where it converted the pipes instead of the Thermometer. I know it's super weird). Unfortunately, even after upgrading to 8.1.26 it seems that this issue still occurs. It appears this happens if I delete the pipes, re-add the pipes, and then try to convert the Thermometer.

mperkins · April 3, 2023, 2:58pm

I'll investigate this and create a bug ticket.

msteele · April 3, 2023, 3:18pm

Has anyone figured out a good workflow to export to a SVG file after converting a component to a drawing? I am bumping these over to Figma for mockups and prototyping.

hpark · April 3, 2023, 5:27pm

Hi @msteele, at the present there is no direct method to export SVG from the Designer. Perhaps others can chime in, the only method comes to mind involves a manual process of composing your own SVG markup with copied paths... As an alternative, using screen capture of the component and assigning interactions to create your Figma prototypes would be one method.

mperkins · April 3, 2023, 5:34pm

@hpark is correct that there isn't a way to do this directly through Perspective

however is there is a workaround that takes advantage of Perspective being web Based

Open the view containing the Drawing Component in the client (Browser)
Inspect element or find the element in the Elements Tree
Right click on the <svg> element and copy it to a .svg file
Prepend the .svg file with <?xml version="1.0" encoding="UTF-8" standalone="no"?>

nminchin · July 16, 2024, 6:04am

v8.1.19
I'm having some issues using a feColorMatrix filter with the saturate type.

This is what the browser expects to see:

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f1" x="0" y="0">
      <feColorMatrix type="satureate" value="0.1" />
    </filter>
  </defs>
  <rect width="90" height="90" fill="red" filter="url(#f1)" />
</svg>

But the type in the Ignition defs filter element is what determines this part:

So I can therefore not set the type to saturate...

This is the Ignition SVG I've got:

Ignition SVG Component

[
{
"type": "ia.shapes.svg",
"version": 0,
"props": {
"viewBox": "0 0 24 24",
"elements": [
{
"type": "defs",
"name": "defs",
"elements": [
{
"type": "filter",
"id": "desaturate",
"elements": [
{
"type": "feColorMatrix",
"name": "saturate",
"values": 0.1
}
]
}
]
},
{
"type": "ellipse",
"name": "ellipse",
"cx": "11.372",
"cy": "11.331",
"rx": "9.7",
"ry": "8.7383",
"fill": {
"paint": "#217821"
},
"stroke": {
"linecap": "round",
"width": ".5"
},
"filter": "url(#desaturate)"
}
]
},
"meta": {
"name": "filter-desaturate_0"
},
"position": {
"x": 6,
"y": 11.5,
"height": 107,
"width": 100
},
"custom": {}
}
]

and this is what I see in the browser:

BTW this is after editing the SVG elements after embedding into Ignition. Directly after importing, the circle isn't visible at all presumably because the filter element doesn't exist.
This is the unedited initially embedded SVG:

Which becomes this in the browser:

I'm starting to think perhaps i'm not in the right version... do you know what version these improvements were implemented in? (would be good to add this into the OP)

This is the raw SVG:

SVG IS HERE >> <<

Edit: looks like you can't actually see it in the browser...

Edit2: I can use a matrix instead to desaturate it, but now I have another issue. I want to dynamically apply the filter based on a binding, but I can't work out how I can do this with the dynamically named id values I can't use a binding to set the filter to url(#desaturate) because the id is dynamically renamed to s0_1-desaturate in the client. And I can't use a binding to the filter's id field either, because it looks like this doesn't update to the dynamically produced name, it remains set to desaturate in the client.

I will open a new topic for this "bug".

Steve_Laubach · July 16, 2024, 12:36pm

Try making a copy of your SVG and converting the circle to a path. I've seen some shape definitions not show up when I embed SVGs and converting to path has made them show up so far.

peter · July 16, 2024, 1:38pm

nminchin:

This is what the browser expects to see:

<svg height="100" width="100" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <filter id="f1" x="0" y="0">
      <feColorMatrix type="satureate" value="0.1" />
    </filter>
  </defs>
  <rect width="90" height="90" fill="red" filter="url(#f1)" />
</svg>

It looks like you have a typo here: "satureate" instead of "saturate". And given that this documentation says "saturate", I'd say that this is not what the browser expects to see /s

victordcq · July 16, 2024, 2:09pm

regardless of the typo, its all about the attribute "type" that can not be defined because in perspective the property "type" is used to deterime the svg type (feColorMatrix), not the attribute "type"