Bad quality of SVG export of diagram view

[Christian Kral <dr.christian.kral@…>]

I want to use the SVG export of diagram circuit in a document. I pick one example of the Modelica Standard Library here: Modelica.Electrical.Analog.Examples.HeatingRectifier:

In OpenModelica the diagram view looks nice. I make a right click on the diagram view of the model and export the SVG file HeatingRectifier.svg.

If I convert the SVG file with one of the methods shown in ​https://notesofaprogrammer.blogspot.com/2017/03/converting-svg-to-pdf-on-linux-command.html the outputs are all of bad quality:

• rsvg-convert.pdf and its screenshot rsvg-convert.png
• convert.pdf
• inkscape.pdf

Even if I import the file in LibreOffice Draw, the file looks as bad

• LibreOfficeDraw.png shows the screenshot of the imported SVG file

If import the file SVG manually in Inkscape, ungroup all lines and try to make it look nice by changing the line thickness, I totally fail. The change to a uniform stroke style of 2 pt is shown in image Inkscape_Stroke_style.png

[Christian Kral <dr.christian.kral@…>]

SVG file exported from OMEdit

[Christian Kral <dr.christian.kral@…>]

PDF file converted by rsvg-convert from HeatingRectifier.svg

[Christian Kral <dr.christian.kral@…>]

PNG screenshot of the PDF file converted by rsvg-convert from HeatingRectifier.svg

[Christian Kral <dr.christian.kral@…>]

PDF file converted by convert (ImageMagick) from HeatingRectifier.svg

[Christian Kral <dr.christian.kral@…>]

PDF file converted by Inkscape from HeatingRectifier.svg

[Christian Kral <dr.christian.kral@…>]

Changing the stroke style in Inkscape manually

[Christian Kral <dr.christian.kral@…>]

Screenshot of HeatingRectifier.svg imported in LibreOffice Draw

[Christian Kral <dr.christian.kral@…>]

All the SVG, PDF and PNG files are created under Linux Mint 19 (64bit)

[Christian Kral <dr.christian.kral@…>]

So my conclusions of "bad quality" are:

1. Whenever the SVG file is converted to a PDF file, the thick lines are too thick and the thin lines are too thin.
2. It seems to be a nightmare to process the SVG file by Inkscape (version 0.92), as the lines of the components, connections and connectors seem to be created in a different way and cannot be changed altogether in a uniform way.

[anonymous]

If all you want is pdfs containing OMEdit diagrams, a good workaround is to export diagrams through clipboard into libreffice writer, and create a pdf from there.

[Francesco Casella]

I think if we do provide an SVG export feature, it should be good, otherwise we should remove it, there's not point having such buggy features.

Being able to provide high-quality diagrams of one's models is an essential part of an OOM tool, so I'll mark this for the 2.0.0 release.

BTW, if I open the SVG file in Firefox, the problem with the thick connections does not show up. On the other hand, the icon of the thermal conductor is pitch black, maybe that's a Firefox bug, since all other conversions show something.

Last, but not least, the SVG visualization of Firefox shows the components in the top-right corner, within a much wider extent. I think we should always export an SVG whose extent (or however it is called in SVG parlance) is large enough to contain all elements, but not more. Note that this may be sligthly wider than the Modelica extent, since people sometimes put connectors with their center on the extent boundary.

[Christian Kral <dr.christian.kral@…>]

I tried to import the SVG file created by OpenModelica under Linux Mint 18 and Inkscape version 0.91: So this is one version earlier that the original ticket issue refers to. In Inkscape I changed the line width to 2pt and saved the file as HeatingRectifier_Inkscape0.91.png. This file looks fine.

So whether or not the processed SVG can be modified in the intended way seems to depend on the used Inkscape version and/or the underlying SVG libraries. Therefore the issue may not be related with OpenModelica. Other reasons may be:

• The SVG libraries used in Inkscape 0.92 have changed and do not process the OM files correctly
• The SVG specification may have changed or the SVG version is not specified or processed corectly

The SVG file exported by OpenModelica reads:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="370.064mm" height="422.981mm"
 viewBox="0 0 1049 1199"
 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  
 version="1.2" baseProfile="tiny">
<title>OMEdit - OpenModelica Connection Editor</title>
<desc>Generated by OMEdit - OpenModelica Connection Editor</desc>
<defs>
</defs>

so it seems to be SVG version 1.2 which was released in 2008, see ​https://en.wikipedia.org/wiki/Scalable_Vector_Graphics#Development_history. Possibly, switching to SVG version 2.0 in OMEdit could resolve the issue with the SVG file export and processing.

[Christian Kral <dr.christian.kral@…>]

PNG export of SVG file with changed line width in Inksape 0.91

[Martin Sjölund]

OMEdit exports SVGs by asking Qt to export the view. There is nothing we do very differently except I think Adeel changes the background color or something.
Maybe there is some changes for line widths; I don't know though.

[massimo ceraolo]

Replying to sjoelund.se:

OMEdit exports SVGs by asking Qt to export the view. There is nothing we do very differently except I think Adeel changes the background color or something.

Maybe update Qt?
If I'm not mistaken the used Qt version is rather old (something around 5.6)
There are other tickets awaiting solution from a Qt upgrade

[Martin Sjölund]

On Linux it uses whatever Qt version your OS comes with. Could try it under Ubuntu 19.04 or 19.10 for a really new one (Qt 5.12) and see if the problem is there. But I guess there is not much difference.

[Adeel Asghar]

It doesn't matter if you use Qt 5.6 or Qt 5.12 as according to the ​documentation Qt 5.12 is using SVG 1.2.

[Adeel Asghar]

I think the problem is probably the stroke used around the lines. I am not sure but I will test if disabling it makes any difference.

And yes I will do the test as soon as I get some time for it :).

[massimo ceraolo]

Replying to adeas31:

It doesn't matter if you use Qt 5.6 or Qt 5.12 as according to the ​documentation Qt 5.12 is using SVG 1.2.

Ah, ok. I did not check.
Strangely enough, SVG 1.2 seems not to exist, as it can be inferred from ​https://www.w3.org/TR/SVG2/changes.html. In page ​https://inkscape.org/it/develop/about-svg/ there is the following sentence:

The only thing in Inkscape which currently is not standard-compliant is flowed text. This is because the standardization process for SVG 1.2, where flowed text was supposed to be included, was interrupted.

So, it seems that Qt is based on a dropped version of SVG.

[ulrich1a]

Qt uses a special SVG profile which is the "tiny" profile 1.2. It is especially used at mobile devices and has less features compared to the full profile.

The exported SVG-files are correct. They are correctly rendered in Inkscape, in Firefox and others.

The problematic property is the use of a transform, which scales the line together with the attribute vector-effect="non-scaling-stroke". This combination is not correctly handled by most rendering tools, which make a PDF out of the SVG. The connection lines have a scale factor hidden in the transform matrix of 10. A workaround is to identify the connection lines in the SVG file and make the stroke-width by a factor 10 smaller. Such a file gives the expected output with a broken PDF-rendering tool. I have tried this with Inkscape by loading the "corrected" SVG-file and save it as a PDF-file.

The connection lines seem to be in the first part of the SVG-file and can be identified by the coordinates. An example. The annotation of the connection line contains:

Line(points={{-70,50},{-20,50}}

The SVG-file contains

d="M-70,50 L-20,50"

Ulrich

[ulrich1a]

The following workflow gave me a good vector representation of the OMEdit Diagram on Debian Buster:

1. print the Diagram with a rightclick into a PDF-File. Set the options to color print.
2. Import the PDF-File in Inkscape (0.92-4) and save as normal SVG.
3. Open the SVG with an editor and make the stroke-width of the connections smaller by a factor of 10.
4. Open this SVG in Inkscape and create a PDF from it.

This PDF looks like the OMEdit Diagram. Only some components names are ending with 3 dots instead of the full text due to a different font size.