MBS ImageMagick Speed for Rendering SVG

Hi all,

I came across this post and have much interest in using SVG images in my Xojo projects.
https://forum.xojo.com/1819-svg-support

Honestly the ability to zoom in on a vector image and have it remain 100% crisp is very appealing vs. the bitmap image “blocky” zoom :wink:

I have modified Christian’s example on the post in order to try and maximize the speed of the 400% Zoom. I have a portion of my enterprise app that is similar to Visio and I am trying to see if this scenario will work for me to render SVG images. Unfortunately I will have up to 200 images tied to instantiated class objects so speed is important.

Compiling and running this project helps the speed, but doesn’t give me 400% zoom instantly.

If this is not possible that is great, but I figured I would try :slight_smile:

Here is the sample project: https://www.dropbox.com/s/f9wj3jrrpv9w89x/MBS_RastorTest.zip

Thank you once again!
Mike

Can I take this as a sample project for my plugins?

Its a modified version of your original code snippet. Thanks Christian!

Thanks. Will add it with little modifications :slight_smile:

Thank you very much!!!

welcome. I’m always happy to get examples contributed.

[quote=120209:@Mike Cotrone]I have modified Christian’s example on the post in order to try and maximize the speed of the 400% Zoom. I have a portion of my enterprise app that is similar to Visio and I am trying to see if this scenario will work for me to render SVG images. Unfortunately I will have up to 200 images tied to instantiated class objects so speed is important.
[/quote]

Maybe you could use a thread to prepare for each image the zoomed version in the background which you keep in an array. Upon the need to display, you verify if the image has already been prepared. If not, you run the existing code, otherwise you load it in RastoredVectorImage and it displays instantaneously.

From running the project, it seems to take approximately 3 seconds to zoom. For 200 images, it would take 10 minutes to prepare all of them.

Thread will not help here. The plugin functions in GraphicsMagick do not yield time.

For background processing, please put it in a helper console app and run with shell class.

A simple XML reader that took an SVG and turned it into Object 2D’s and could do the reverse would be a very useful SVG addition

The TinySVG spec should be possible to support and map directly into object 2D

[quote=120255:@Christian Schmitz]Thread will not help here. The plugin functions in GraphicsMagick do not yield time.
For background processing, please put it in a helper console app and run with shell class.[/quote]

A blank screen is the last thing you want. You got to show something to the user while the SVG is zoomed in.

Loading time at 100% is instant. Why not load at 100% in a buffer picture, and display a 400% bitmap zoom in the Canvas while the enlarged SVG is preparing. Eventually with a small box and a ProgressWheel saying “Preparing vector image”. When the SVG at 400% is ready, display it instead. For the user, it will be a much better experience.

[quote=120361:@Michel Bujardet]A blank screen is the last thing you want. You got to show something to the user while the SVG is zoomed in.

Loading time at 100% is instant. Why not load at 100% in a buffer picture, and display a 400% bitmap zoom in the Canvas while the enlarged SVG is preparing. Eventually with a small box and a ProgressWheel saying “Preparing vector image”. When the SVG at 400% is ready, display it instead. For the user, it will be a much better experience.[/quote]
For one image that would be fine but for more than 10 the delays would be to severe.

Thanks for all of the ideas Michel!

If you display bitmaps pending update with a vector, to the user, there is no real delay. He may notice the increase in resolution, a bit like web pictures update after displaying.

There is another way to process pictures in the background, though : a helper app you spawn which sole purpose is to enlarge pictures so they be displayed instantly at 400% when needed. Pretty much the same idea than the thread, except as Christian said it could not be done, spawning another app renders it possible. 10 images = 30 seconds.

I have no idea about the app you want to build, but why do you have the 10 images to be ready instantly ? If you display all 10, each will be so small, vector is no point. If you display full window as now, you have time to prepare backstage.

[quote=120376:@Michel Bujardet]If you display bitmaps pending update with a vector, to the user, there is no real delay. He may notice the increase in resolution, a bit like web pictures update after displaying.

There is another way to process pictures in the background, though : a helper app you spawn which sole purpose is to enlarge pictures so they be displayed instantly at 400% when needed. Pretty much the same idea than the thread, except as Christian said it could not be done, spawning another app renders it possible. 10 images = 30 seconds.

I have no idea about the app you want to build, but why do you have the 10 images to be ready instantly ? If you display all 10, each will be so small, vector is no point. If you display full window as now, you have time to prepare backstage.[/quote]

It would be similar to a MS Visio or Omnigraffle to an extent where a user would zoom in on a network layout all together. I was taking a stab in the dark on the SVG format since it has no scaling distortion that bitmaps do. NP as I’ll wait for Xojo to implement support some day. I did vote on that topic also.

Thanks again!

Use Object 2D
It’s all vectors even in memory

[quote=120390:@Norman Palardy]Use Object 2D
It’s all vectors even in memory[/quote]
I am using drawpicture for the images and object 2D for the lines. Ill convert over from drawpicture to object2d like you are saying. Thank you again guys!

I wasn’t sure if I was going to gain any zoom in quality from switching from drawpicture to pixmapshape… my PNG is the exact same quality no matter if it runs through either. That was the main reason for this exercise anyhow :wink: When you say use Omnigraffle and load an EPS or SVG image you can zoom as close in as you want and it never distorts since they are native vector graphics. Even though Object2D is vector it still is displaying a bitmap image.

:wink: Thanks again for everyones help. This was a good learning exercise.

IF the image is all vectors the only way you will retain that quality is to open it in a way that it stays vectors

I don’t know of any means to convert an EPS or SVG into something that is all vectors internally

Norman can you give me an example please? If say I have an eps SVG image already to start. Thank you.

I am looking at FolderItem.OpenAsVectorPicture … I assume I bring in my vector picture and use object2d to display? Thanks again!

Edit. This looks like it only opens .PICT files… :slight_smile:

Right
Thats why I said some time ago

[quote=120268:@Norman Palardy]A simple XML reader that took an SVG and turned it into Object 2D’s and could do the reverse would be a very useful SVG addition
The TinySVG spec should be possible to support and map directly into object 2D[/quote]

SVG is just XML and it has rects and all sorts of “objects”
It’s the only way you’ll get an SVG as Object2D’s
Everything else will give you some raster format which will scale like crap