Display SVG or PNG returned from API

Targets Windows
1

I need to be able to display an SVG or PNG image returned from an API call. SVG would be ideal but I understand Desktop does not support SVG. In any case, let’s assume I am dealing with a PNG, I need some help trying to display the image in the application to the end user.

I have a rough idea on what I need to do, but not sure how to execute this. Possible steps:

  1. Make API call by constructing the URL in code (I can do this part)
    e.g. https://quickchart.io/graphviz?format=png&width=100&height=150&graph=graph{a--b}

  2. Store the returned png image from the API in memory as raw data (somehow?)

  3. Use an DesktopImageViewer to display the image

I am not sure if the above steps are correct. If so, please could anyone help me achieve what I am looking for, especially step 2?

2

You can use an DesktopHTMLViewer to show SVG images. So you could:

  1. Call the API and get the SVG
  2. Store the string returned
  3. Use the HTMLViewer to show it (you can load a string directly into the viewer).
3

If you want to go PNG:

Just grab the data with URLConnection, create the picture using Picture.FromData, then set that picture to the ImageViewer.Image property.

var u as new URLConnection
var imageData as String = u.SendSync( "GET", "https://quickchart.io/graphviz?format=png&width=100&height=150&graph=graph%7Ba--b%7D" )
if u.HTTPStatusCode = 200 then
  var p as Picture = Picture.FromData( imageData )
  ImageViewer1.Image = p
end if

If you want to use an HTMLViewer for the SVG (not what I’d do in this scenario), you can just load the URL in the HTMLViewer.

4

Thank you so much! Can I ask why you would not use SVG?

5

There is a plugin for rendering SVG. Einhugur SVG Plugin

1 Like
6

It’s not that I wouldn’t use SVG, I just wouldn’t do it with an HTMLViewer. It’s a bit overkill and won’t give you an object you can manipulate as a native Xojo object unless you use the third-party resource suggested by Tim, which I understand is well worth it.

1 Like
7

Ah I see. Thanks for the explanation!

8

I use the plugin from einhugur to display SVG and it works perfectly, you can use a simple canvas to display the PNG.

Or create a single components that loads the SVG or the PNG depending on the format.

9

The MBS plugins can render SVG images into a Xojo picture via the resvg library.
https://www.monkeybreadsoftware.net/class-resvgmbs.shtml

In our tests, the MBS plugin produced a better result compared to the Einhuger plugin.

1 Like
10

in what sense?

-Karen

11

The Einhuger plugin failed to correctly render some SVGs we tested due to limitations in the underlying SVG library. The library which the MBS plugin uses handled these correctly.

12

Fro the SVGs I needed to render the Einhuger plugin worked fine… but they were not complex. Were your tests with very complex ones?

BTW IMO these days SVG support should be in the Xojo framework! I know there is a feature request for it.

-Karen

13

Can’t remember if they were complex or not. They rendered okay in web browsers and resvg (which is what MBS uses) but didn’t renderer correctly by the Einhuger plugin (lunasvg).

Xojo could integrate with one of these libraries quite easily. I think it would be a bad idea for them to write their own SVG parser as it would take 100’s of man hours to get something decent.