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"?>