Bug 133020 - Problems rendering SVG from Draw.io: HTML inside foreignObject
Summary: Problems rendering SVG from Draw.io: HTML inside foreignObject
Status: NEW
Alias: None
Product: LibreOffice
Classification: Unclassified
Component: Draw (show other bugs)
Version:
(earliest affected)
6.4.3.2 release
Hardware: x86-64 (AMD64) All
: medium normal
Assignee: Not Assigned
URL:
Whiteboard:
Keywords:
Depends on:
Blocks: SVG-Import
  Show dependency treegraph
 
Reported: 2020-05-13 21:59 UTC by David García
Modified: 2023-11-08 06:01 UTC (History)
3 users (show)

See Also:
Crash report or crash signature:


Attachments
Original Visio file and SVG file (43.94 KB, application/x-zip-compressed)
2020-05-13 21:59 UTC, David García
Details
see the image (209.90 KB, image/png)
2020-05-17 09:53 UTC, BogdanB
Details
Screenshot (75.29 KB, image/png)
2020-05-17 17:41 UTC, Telesto
Details
My screenshot (44.71 KB, image/png)
2020-05-17 17:46 UTC, David García
Details
video of the bug (1.77 MB, video/mp4)
2020-05-17 20:41 UTC, BogdanB
Details
Correct rendering of the SVG File (54.33 KB, image/png)
2020-05-17 21:51 UTC, David García
Details
video (2.18 MB, video/mp4)
2020-05-17 21:52 UTC, BogdanB
Details
video3 (526.17 KB, video/mp4)
2020-05-17 21:58 UTC, BogdanB
Details
SVG produced with draw.io 21.0.6 (40.10 KB, image/svg+xml)
2023-05-20 09:37 UTC, David García
Details

Note You need to log in before you can comment on or make changes to this bug.
Description David García 2020-05-13 21:59:16 UTC
Description:
Hello,

I’m experiencing problems when opening SVG files in Draw.

My file SVG file was converted and exported by Drawio from an original Visio file.

When I open it in Draw, I get the following message: “Viewer does not support full SVG 1.1”.

I’ve detected the following problems in LO 6.4.3 and 7.0 alpha 1 for Windows 10:

1. The imported object doesn't look like my diagram.

2. It’s imported as an image, which means that I can't select any of its elements.

Steps to Reproduce:
1. I open the SVG file in Draw.

Actual Results:
1. The imported object doesn't look like my diagram.

2. It’s imported as an image, which means that I can't select any of its elements.

Expected Results:
1. The design of my diagram is preserved.

2. I can select every element of my diagram.


Reproducible: Always


User Profile Reset: No


OpenGL enabled: Yes

Additional Info:
I used LO 6.4.3 and 7.0 alpha 1 for Windows 10.
Comment 1 David García 2020-05-13 21:59:54 UTC
Created attachment 160792 [details]
Original Visio file and SVG file
Comment 2 BogdanB 2020-05-17 09:52:08 UTC
It's ok on
Version: 6.4.3.2
Build ID: 747b5d0ebf89f41c860ec2a39efd7cb15b54f2d8
CPU threads: 4; OS: Linux 5.4; UI render: default; VCL: gtk3; 
Locale: ro-RO (ro_RO.UTF-8); UI-Language: en-US
Calc: threaded
Comment 3 BogdanB 2020-05-17 09:53:13 UTC
also is ok on
Version: 7.0.0.0.alpha1
Build ID: 6a03b2a54143a9bc0c6d4c7f1...
CPU threads: 4; OS: Linux 5.4; UI render: default; VCL: gtk3; 
Locale: ro-RO (ro_RO.UTF-8); UI: en-US
Calc: threaded
Comment 4 BogdanB 2020-05-17 09:53:48 UTC
Created attachment 160927 [details]
see the image

see the image
Comment 5 BogdanB 2020-05-17 09:54:54 UTC
And also I can move any shape form there anywhere.
Comment 6 BogdanB 2020-05-17 09:55:50 UTC
You could try a reset user profile: Open LibreOffice - Help - Restart in Sfae MOde - Restart - Factorry reset. Maybe everything is now ok.
Comment 7 David García 2020-05-17 10:30:10 UTC
Hi, @BogdanB,

Thank you for your feedback.

1. I've clicked on Restart in Safe Mode, and then on Restart with Default Settings (with both suboptions enabled). Is this the factory reset you mentioned? I had never tried this feature before.

Unfortunately, my problems with my SVG file are still there.

2. Since you're using Linux, I thought it was a problem affecting only the Windows version of LO, but I've checked on a different computer running Windows 10 and LO 6.4.3.2 and everything's OK there.

On my computer, I've disabled OpenGL and hardware acceleration as a last resort, but I get the same issue.

I have no idea why my SVG file isn't rendered properly on my computer, a problem that I also have on 7.0.0 alpha 1. Maybe another piece of software is causing a conflict on my laptop.

Is there anything else I could try? It's not a big deal to me, as I'll be formatting my computer soon and hopefully things will be back to normal.
Comment 8 David García 2020-05-17 11:18:34 UTC
I've just uninstalled LO (with Revo Uninstaller just to make sure), restarted my PC and installed LO 6.4.3.2 again, but I get the same issues with my SVG file.

I'm out of ideas. I wonder if I'm the only one facing this problem.
Comment 9 Telesto 2020-05-17 17:40:10 UTC
I reproduce the issue
Version: 7.0.0.0.alpha1+ (x64)
Build ID: f9790da286f2d2fa47f1748f8cfa6172c6622ca3
CPU threads: 4; OS: Windows 6.3 Build 9600; UI render: Skia/Raster; VCL: win; 
Locale: de-CH (nl_NL); UI: en-US
Calc: CL

Including: “Viewer does not support full SVG 1.1”.
Comment 10 Telesto 2020-05-17 17:41:25 UTC
Created attachment 160940 [details]
Screenshot
Comment 11 David García 2020-05-17 17:46:49 UTC
Created attachment 160942 [details]
My screenshot

Here's my screenshot. You can see that my SVG is rendered incorrectly, but in different way.
Comment 12 David García 2020-05-17 17:49:18 UTC
Now that I look again at both screenshots, the rendering problems are the same. It's just that my page is landscape.
Comment 13 BogdanB 2020-05-17 20:41:13 UTC
Created attachment 160952 [details]
video of the bug

I am not sure of the steps I need to do to repeat the bug. 
Please see the video and confirm if you see the bug.

Version: 6.4.3.2
Build ID: 747b5d0ebf89f41c860ec2a39efd7cb15b54f2d8
CPU threads: 4; OS: Linux 5.4; UI render: default; VCL: gtk3; 
Locale: ro-RO (ro_RO.UTF-8); UI-Language: en-US
Calc: CL
Comment 14 David García 2020-05-17 21:48:58 UTC
Hi, @BogdanB,

Thank you for testing the issue.

1. In your screenshot, the SVG file is rendered correctly.

2. In your video, the SVG is not rendered correctly. If you compare the screenshot and the video, you'll notice the difference. When I send this comment, I'll upload my screenshot of the correct rendering, obtained by opening not the SVG file, but the original Visio file.

3. About my steps, I just click, in Draw, on File > Open, but if I click on Insert > Page, as you did, I still have the same issue.

4. I need to make a correction. I said above that, on my dad's computer, my SVG file was rendered correctly, but I was wrong. By mistake, I opened the Visio file, instead of the VSG file. Therefore, the issues are the same on both computers.

5. This makes me wonder: when you made the screenshot (not the video), are you sure you opened the SVG file and not the Visio file?
Comment 15 David García 2020-05-17 21:51:33 UTC
Created attachment 160956 [details]
Correct rendering of the SVG File

This is a screenshot to show how the SVG file should be rendered. It was obtained by opening the original Visio file on LibreOffice.
Comment 16 BogdanB 2020-05-17 21:52:59 UTC
Created attachment 160957 [details]
video

See video with your files opened on my computer
Comment 17 BogdanB 2020-05-17 21:58:41 UTC
Created attachment 160958 [details]
video3

inserting the SVG
Comment 18 David García 2020-05-17 22:05:47 UTC
@BogdanB, in your second video, you opened the original Visio file: it's rendered correctly, as it's rendered correctly on my computer. My issue only concerns the SVG file.

I noticed that, when you previewed the SVG file, it wasn't rendered correctly, so maybe when Drawio converts Visio files into SVG files, it produces bad files.

Actually, I've just opened my SVG file in Inkscape and it's not rendered correctly either.
Comment 19 Eyal Rozenberg 2021-05-19 22:23:15 UTC
I've just opened the SVG with:

Version: 7.2.0.0.alpha0+ / LibreOffice Community
Build ID: 0c67217d767baada12587dace9d29b955d50e774
CPU threads: 4; OS: Linux 5.10; UI render: default; VCL: gtk3
Locale: en-US (en_IL); UI: en-US
TinderBox: Linux-rpm_deb-x86_64@86-TDF, Branch:master, Time: 2021-04-26_09:25:26

I confirm that I can't ungroup the diagram object so as to access its constituent shapes. I would also expect that an SVG file opened in LO draw

Now, if I right-click it and choose "Edit with external tool", it opens Inkscape, not an image editor. And in Inkscape, I can ungroup the shapes and manipulate them to my liking.

Both in LO Draw and in Inkscape I can see the bottom piece of text saying "viewer does not support full SVG 1.1".

I should also mention that this is not limited to the attached SVG file. If I save some SVG file I create in Inkscape, and open in from LO Draw, I also get the same thing: A single, non-ungroupable, object, editable with an external tool.
Comment 20 QA Administrators 2023-05-20 03:17:39 UTC Comment hidden (obsolete)
Comment 21 David García 2023-05-20 09:36:44 UTC
Hi,

I've tested it again on LibreOffice 7.5.3.2 (x64) and Windows 11 (22h2), but I get, for the most part, the same results. I don't know if the problem has to do with the conversion made by draw.io from the Visio format, but just in case, I've opened again my original Visio file and I have exported it into a new VSG file (see attached). The latest draw.io version avalaible as a web app, as of May 20 2023, is 21.0.6.

1. Once again, if I open the SVG file on LibreOffice Draw, I get an image, not an editable document.

2. The document still presents the same problems with formatting. The main apparent issue is that the text is cut.

3. If I open my previous SVG, I still get the message “Viewer does not support full SVG 1.1”, but if I open my newly produced SVG, I get this message instead: "Text is not SVG – cannot display".

4. My original Visio document still works fine in Draw, so I could just use it in LibreOffice and forget about my SVG document. It's just that I was hoping to make a full transition from Microsoft Office to LibreOffice and forget about my old files, but I keep my originals just in case.

5. As I said in a previous post, my SVG file doesn't work very well with Inkscape either, so the issue doesn't just affect LibreOffice.

Edit: before posting this message, I've tried something else. I've created a new draw.io file using one of the templates, I've exported it as an SVG file and, when I've opened it in LibreOffice and Inkscape, it still has the same issues. Therefore, it looks like, regardless the source of the file (whether it's a new document or it's imported from a Visio document), draw.io generates problematic SVG files. In fact, I have found this:

https://github.com/jgraph/drawio/issues/774

Let me know if there's something else I could try.

Thanks!
Comment 22 David García 2023-05-20 09:37:42 UTC
Created attachment 187410 [details]
SVG produced with draw.io 21.0.6
Comment 23 David García 2023-05-20 09:52:40 UTC
This is the last comment from one the draw.io developers in the thread mentioned in my previous post (https://github.com/jgraph/drawio/issues/774):

"Will we implement native SVG text in the app and export that, no, never. If you need this beyond anything, fork the project and implement it."

This thread explains how they tried to provide a workaround when exporting the draw.io document into the SVG format, but the SVG file still doesn't work well in LibreOffice or in Inscape. They actually recommend exporting the document as a PDF document instead.

It looks like the draw.io developers don't intend to change this behaviour in the long term.
Comment 24 Piotr 2023-05-25 18:53:15 UTC
I confirm the error, indeed when opened in Draw, it is 1 image, as you can't select any of its elements and at the bottom it says: "Viewer does not support full SVG 1.1". Version I tested with: 

Version: 7.5.3.2 (X86_64) / LibreOffice Community
Build ID: 9f56dff12ba03b9acd7730a5a481eea045e468f3
CPU threads: 12; OS: Windows 10.0 Build 19045; UI render: Skia/Vulkan; VCL: win
Locale: pl-PL (pl_PL); UI: pl-PL
Calc: CL threaded
Comment 25 Kira Tubo 2023-11-08 06:01:08 UTC
I get the same results as Piotr in Comment 24. Imported SVG looks more or less like Telesto's image in Comment 9.

Version: 24.2.0.0.alpha0+ (X86_64) / LibreOffice Community
Build ID: 676e0527d2f31556eccae314fbb12ce204f02ec7
CPU threads: 6; OS: Windows 10.0 Build 22621; UI render: Skia/Raster; VCL: win
Locale: en-US (en_US); UI: en-US
Calc: CL threaded

Interestingly, in older versions, like 5.4 and 4.0, the imported SVG is editable, though there are a few additional issues, like missing text and background colors in the shapes.