Add an example of how to render an SVG file

[azuredusk10]

I found it really hard to work out how to render an SVG in my app without making it blurry.

Using a GtkImage made the SVG blurry on my HiDPI monitor, especially when scaled up to a larger size.

I was helpfully pointed in the direction of the Paintable interface, but the only example was in the GtkDemo app and written in C, which I struggled to understand as I am coding in Javascript.

In the end, my attempt at a Paintable implementation didn't work. I resorted to asking AI, which pointed me in the direction of the GtkDrawingArea widget, which I was able to get working much more easily.

Rendering an SVG on the web is as simple as rendering a raster image. I was surprised to find it so much harder to do in a GTK app. I'd suggest adding an example of how to render an SVG image in GTK to lower the barrier to entry for people whose background is in web development.

[sonnyp]

Moved to https://github.com/workbenchdev/demos which is the repository containing Library entries.

Did you try GtkPicture?

Using a GtkImage made the SVG blurry on my HiDPI monitor, especially when scaled up to a larger size.

That's odd, did you use pixel-size ?

[azuredusk10]

Yes, I used pixel-size on the GtkImage.

I just tried it with GtkPicture and the result was the same; SVGs are rendered as if they're raster images, so they appear blurry on HiDPI monitors at their intrinsic side, and blurry for everyone when scaled up.

Rendering SVGs using a GtkPicture:

Rendering SVGs using a GtkDrawingArea with a draw function:

[sonnyp]

Ok so GtkImage and GtkPicture only render svg at their intrinsic size and then upscale that. It's not related to high dpi monitors but rather the default svg size set in the xml document.

Using Librsvg and DrawingArea is the right approach. From a DX perspective I understand this is a bit unexpected.

I have made a demo, can you review it and tell me if it's clear enough from your pov?

https://github.com/workbenchdev/demos/pull/140

[azuredusk10]

Brilliant! I'm really glad to see an example of this. I've added some comments in the linked issue. I think this will be really helpful for new developers coming from a web development background. Thank you for doing this.

[sonnyp]

@azuredusk10 I don't see the comments, can you point them to me?

[azuredusk10]

@sonnyp of course! I left them on this PR: https://github.com/workbenchdev/demos/pull/140

[sonnyp]

@azuredusk10 I think they might be drafted, you need to submit the review in that case

[azuredusk10]

@sonnyp thank you, I'd never done a review before. I think I've submitted it!

[sonnyp]

Great first review :1st_place_medal: thanks