SVG for Xojo?

[npalardy]

OK so who would like to use SVG in desktop apps ?
There are some things that obviously wont work from SVG (like animation) in a conventional Xojo desktop app as things would probably land in a canvas

There are some interesting developments on the horizon so … YAY !!!

This is just a glimpse of loading & manipulating an SVG in Xojo

edit : see SVG for Xojo? - #12 by npalardy

before you ask

1. no its not Xojo code based - its a plugin (and quite fast)
2. the demo shows rotating the svg - NOT a xojo object
3. yes you can have a copy of the svg file and open it in your browser to see that it really is an svg

The plugin is literally days old at this point so theres a fair amount of work yet to do but … its coming along !

[Karen]

Hmmm… What about converting Object2Ds to SVG?

• Karen

[npalardy]

Object 2ds get a long way there
But this is going the other way
Reading an svg file and actually rendering it
So much depends not JUST on XML handling but proper interpretation of the drawing commands, clipping paths etc
And thats where what exists today for dealing with SVG in Xojo isnt up to the task
What I’ve tried with ones that exist doesnt clip properly ( and thats was just the first issue I found)

But, so far, this plugin IS and makes some decently complex SVG images possible as it is lightning fast

That “animation” in the movie is, at EVERY slide of the slider, reloading and reinterpreting the SVG rotating it and then giving me an image to draw in a canvas paint event.
Hugely inefficient code but it was literally just a quick hack and it flies

[Rick.A]

SVG is the solution for a DOSE, Draw Once Show Everywhere (I made it up right now )

That’s the Web interface design option for resolution independent, looking good, presentation (+ the compressed WOFF2 for some icons as subsets of fonts)

Bitmaps are not great for creating interfaces, because they differs from screen to screen, usually getting blurry, and increasing immensely the size of the application needing different sets of bitmaps.

Most UIs probably will migrate to lightweight vector options at some point, and for features like animations, they will be compiled to some intermediate optimized format in memory. As we used to handle in the Adobe Flash era.

Bitmaps for interfaces are most for backgrounds needing pictures.

SVGator: Free SVG Animation Creator Online - No Coding

[npalardy]

This had more to do with using SVG inside a Xojo desktop app - not a web one - as one more image source (like JPG, PNG, PDF, TIFF) which today isnt really viable with Xojo

[Rick.A]

@npalardy

using SVG inside a Xojo desktop app - not a web one

@Rick.A

Most UIs probably will migrate to lightweight vector options at some point

Part of such technologies will tend to converge. SVG and glyphs tends to be used as UI parts of all interfaces, Web, Mobile and Desktop.

[npalardy]

Youre completely missing the point of the original post
If you want to use SVG IN Xojo desktop apps right SVG is not very well supported

THAT is the point of the post I made above
Focus !

Its a teaser for a coming capability in an alpha release of a plugin

[Rick.A]

Can I use it to build UIs ?

[npalardy]

I suppose a person could
You’d end uploading an svg into a picture then drawing that into a canvas - for now
Better than nothing

Thats what the initial demo movie does
Thats an svg loaded in then rendered into a picture that can be drawn in a canvas

An updated demo (edit - see SVG for Xojo? - #12 by npalardy)

Note that the none of Xojos graphics scaling etc is required (which is why when the image is scaled it comes out nice & SHARP still instead of getting pixelated as scaling increases)
Basically there are only a handful of lines of code (note this is not literally the code as posting that would reveal more than I care to at this point)

1. take svg and turn it into a Xojo picture with the right scale & rotation

// var m_svg as SVGImage is declared else where

// rotate the image by some angle around ANY point we want in the image
// we chose the middle of the image for simplicity
m_svg.Rotate(sliderRotation.value, m_svg.Width/2, m_svg.height/2)

// convert the scaled SVG image to a raster we can draw in Xojo
Var p as picture = m_svg.ToPicture(g.width * scale, g.height * scale)

2. draw the picture into the canvas with

g.DrawPicture(p, 0, 0)

As I said some things cant/wont work since I’m not sure what you’d use in Xojo
Animated SVG’s since theres not sitable control type in Xojo

Dont know if it would be possible for the author to create an “SVGImageWell” or something like that which could show animated SVG’s in Xojo desktop apps (that’d be kind of neat but not sure how useful)

As the library this is based on updates & incorporates new features I’m sure we’ll see updates

[DaveS]

question … in your updated demo (impressive BTW)… why does the rotation change when you change scale? they should be independent

[npalardy]

I apply the rotation in the Paint event so its rotating it more than once
Its literally a bug
I’d need to relocate the rotation code from the paint event into the action of the slider so it only changes the rotation when that value changes and not on every repaint

details details details

EDIT : yup
Rotation is cumulative so on every draw it would rotate by that amount again and again
Moving the code into the sliders change event works much better (edit see SVG for Xojo? - #12 by npalardy)

[npalardy]

I suppose I could make the drawing centre the scaled image as well

Yet another movie

OH I forgot the BEST part
I’m told the plugin should work on macOS, Windows, Linux and iOS (dunno about Android)

[cm_rb]

What is the status of this plugin? Can it group/ungroup? Can it export/save to SVG?

[npalardy]

Thats good questions for @einhugur

[einhugur]

Its a SVG Renderer, not SVG Creator.

[cm_rb]

Ok, thanks.

[samRowlands]

WKWebView will render a SVG (offscreen) and then you can grab the PDF data from the view as a NSImage. From there, you can draw it into a Xojo picture.

Not the most elegant solution, it’s what I did for SVG Converter back in 2015.

[cm_rb]

Hello Sam,
thanks, I already have your SVG Converter app
I need a SVG plugin which allows reading and rendering, grouping/ungrouping, selecting, moving, rotating and saving/exporting. It seems there is nothing available for Xojo.
For Java I found the „Batik“ library from Apache (Apache(tm) Batik SVG Toolkit - a Java-based toolkit for applications or applets that want to use images in the Scalable Vector Graphics (SVG)), maybe that will do the job.

[samRowlands]

Sorry about that, I used the “cheat” that I described to read SVG files, I don’t actually read 'em, I let WebKit read 'em and then I get a PDF NSImage to which I can then draw into a picture and save it as a different format.

At first I did experiment with a SVG → Object2D converter, but it would hard crash with some SVG files. So I didn’t go down that route.