Preview (image) resolution and SVG support

[r00tr4v3n]

How does Qt/QON handle svg files? They seem to be rendered at a specific resolution.
I tried to measure the pixel width of a PDF to insert images at maximum or relative size and it seems to yield 96 dpi.
Would it be possible to increase this number for the preview and export and/or add a native svg support?

[pbek]

I think it's handled how QTextBrowser handles it.

[pbek]

Would it be possible to increase this number for the preview and export and/or add a native svg support?

I don't know and never researched it. 😬

[r00tr4v3n]

I tried changing the resolution in the printer and in the document without success.

[Kvcd12]

r00tr4v3n - I recently used a PNG in one of my markdown files. I had also created an SVG. So, I inserted the SVG. The PNG/SVG is basically a screen shot with arrows. Everything looked fine, including the arrows. I don't remember the DPI. I created a new SVG at 192 DPI. I inserted that SVG into QOwnNotes. I then added a screen shot to the SVG and inserted that into QOwnNotes. In the preview, the SVG without the screen shot looks like your example. However, the SVG with the screen shot looks decent. Export note as PDF ... and view at 200% ... the SVG without the screen shot looks decent (of course subjective; is not as crisp as the text) and the SVG with the screen shot doesn't look very good. Screen shot of the preview:

[r00tr4v3n]

What are you saying? We should scale all images by 200%?
I think the QTextEdit causes a Moiré/aliasing-effect with its lower resolution of 96dpi (?).

[Kvcd12]

In my simple view, both of my SVGs in the preview should look the same. Either similar to your screen shot or not. The top one, without an image, is similar to your screen shot. The bottom, with an image, is sharp. My guess is the preview sees the top one as SVG and does what it does to it; however, the preview sees the bottom one and "thinks" image (even though it is an SVG) and displays it as such. And this is the difference in the PDF export. The top one is processed as an SVG, maybe not as nicely as can be, but decent; and the bottom one is processed as an image and thus the result (looking at the non image elements) is not as nice. I am guessing. But - they should look the same in the preview and they don't.

[Kvcd12]

In regards to the 200%, that was the zoom in the PDF. I was curious to know what each looked like. To my surprise the SVG without the image looked sharper, crisper. The SVG with the image - paying attention to the SVG elements - was not as sharp or as crisp. Thus, the PDF results were the complete opposite of the preview.

[Kvcd12]

r00tr4v3n

The SVGs I had created have width and height set at 100%:

<svg width="100%" height="100%" viewBox="0 0 800 600"

If I changed the values to pixels, say something like this:

<svg width="800px" height="600px" viewBox="0 0 800 600"

The preview looks A LOT better.

Exporting to PDF (preview) is still not ideal.

Exporting to HTML ... and using wkhtmltopdf (to turn the HTML into a PDF) ... works really well. The SVG looks like SVG (in the wkhtmltopdf created PDF). (Note, without the above change, wkhtmltopdf was unable to process the SVGs; which is discussed here: (wkhtmltopdf/wkhtmltopdf#4486).)

[r00tr4v3n]

How did you manage to use an <svg> tag? I don't see it in the html subset of QTextEdit. There is nothing rendered for me.

[pbek]

@Kvcd12, if you are referring to wkhtmltopdf, Webkit is used there. In our case there is QTextBrowser.

[Kvcd12]

r00tr4v3n - I was assuming you have access to the SVG file before you insert it into QOwnNotes. I created my own to test this. After I created them, I opened the SVG file in a text editor and edited the width and height. That appeared to fix the QOwnNotes preview issue. And it also fixed the wkhtmltopdf issue.

pbek - Understood.

[r00tr4v3n]

My SVGs are generated, changing them manually or via a background script is no really a sustainable or long term solution.

[pbek]

You could "convert" them to inline SVGs and change the sizes there (if that works with QTextBrowser)...

[Kvcd12]

r00tr4v3n - Understood.

QOwnNotes preview:

SVG file at 100% for width and height:

SVG file at width="680px" height="510px":

[r00tr4v3n]

You could "convert" them to inline SVGs and change the sizes there (if that works with QTextBrowser)...

You mean parsing the SVG source?

@Kvcd12 That looks way better! My guess still is the lack of anti-aliasing in QTextBrowser. One would have to get the resolution of the screen and change the size of the image accordingly.

BTW: I am trying to build a universal solution for UML and LaTex with some limited formatting settings. JLatexMath is unfortunately buggy in this regard.

[Kvcd12]

@r00tr4v3n - A huge difference. It looks like SVG vector graphics.

One would have to get the resolution of the screen and change the size of the image accordingly.

For the preview so you can see the text in relation to the SVG? SVG too small, too big kind of thing?

[Kvcd12]

When I was looking around for solutions I visited the Qt Bug Tracker. There are a few entries like this: SVG not rendered properly. And the answer is sometimes this: The example SVG does not conform to SVG Tiny 1.2, which is what Qt supports. Use QtWebKit to render full spec SVGs. Thus, if one has fancy or complicated SVG, QTextBrowser probably can't handle it. More info here: https://doc.qt.io/qt-5/svgrendering.html

[pbek]

You mean parsing the SVG source?

Yes. Reading the SVG file, adding the attributes, showing it as inline image in html. 😁

[r00tr4v3n]

For the preview so you can see the text in relation to the SVG? SVG too small, too big kind of thing?

Yes and also to make it an even multiple of the screen resolution.

Yes. Reading the SVG file, adding the attributes, showing it as inline image in html. grin

It doesn't seem to be that easy. Changing the width only changes the outer bounds, not the paths...
EDIT: The viewBox was missing in the plantuml generated file! When adding it with the native resolution I can change the size by width and height.

At least for the UML and formulas it would be easier to fork JLatexMath and fix the resolution. Can I provide the jar via script repository though? GPL2 should allow that at least.

[pbek]

I think bundling the jar shouldn't be a problem.

[Kvcd12]

@r00tr4v3n

also to make it an even multiple of the screen resolution

I do not understand this. I am trying to learn. For example, my screen resolution is 1600x1200. So you would make the image 400x300? Thank you.

[r00tr4v3n]

before	after

This is better. Though I feel like I used a sledgehammer to crack a nut...

I do not understand this. I am trying to learn. For example, my screen resolution is 1600x1200. So you would make the image 400x300? Thank you.

In theory, yes. But I guess the image resolution was the main problem and I'm content with the result.

[github-actions]

This issue is stale because it has been open for 30 days with no activity.

[github-actions]

This issue was closed because it has been inactive for 14 days since being marked as stale.