# SVG for Xojo?

**URL:** <https://ifnotnil.com/t/svg-for-xojo/2439>\
**Category:** Other\
**Created:** [15 April 2022 02:11 UTC](https://ifnotnil.com/t/svg-for-xojo/2439 "2022-04-15T02:11:28Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![npalardy](https://ifnotnil.com/user_avatar/ifnotnil.com/npalardy/32/10_2.png) [@npalardy](https://ifnotnil.com/u/npalardy)\
**Post date:** [15 April 2022 02:11 UTC](https://ifnotnil.com/t/svg-for-xojo/2439/1 "2022-04-15T02:11:28Z")

</div>

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](https://ifnotnil.com/t/svg-for-xojo/2439/12)

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 !

---

<div class="post-metadata">

**Author:** ![Karen](https://ifnotnil.com/letter_avatar_proxy/v4/letter/k/7feea3/32.png) [@Karen](https://ifnotnil.com/u/Karen)\
**Post date:** [15 April 2022 03:10 UTC](https://ifnotnil.com/t/svg-for-xojo/2439/2 "2022-04-15T03:10:23Z")

</div>

Hmmm… What about converting Object2Ds to SVG?

- Karen

---

<div class="post-metadata">

**Author:** ![npalardy](https://ifnotnil.com/user_avatar/ifnotnil.com/npalardy/32/10_2.png) [@npalardy](https://ifnotnil.com/u/npalardy)\
**Post date:** [15 April 2022 04:10 UTC](https://ifnotnil.com/t/svg-for-xojo/2439/3 "2022-04-15T04:10:01Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Rick.A](https://ifnotnil.com/user_avatar/ifnotnil.com/rick.a/32/217_2.png) [@Rick.A](https://ifnotnil.com/u/Rick.A)\
**Post date:** [15 April 2022 14:37 UTC](https://ifnotnil.com/t/svg-for-xojo/2439/4 "2022-04-15T14:37:40Z")

</div>

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](https://www.svgator.com/)**
>
> It's SVG animation made easy - Create impressive SVG animations online, without any coding skills. Add them easily to your website. Get started for free!

---

<div class="post-metadata">

**Author:** ![npalardy](https://ifnotnil.com/user_avatar/ifnotnil.com/npalardy/32/10_2.png) [@npalardy](https://ifnotnil.com/u/npalardy)\
**Post date:** [15 April 2022 15:50 UTC](https://ifnotnil.com/t/svg-for-xojo/2439/5 "2022-04-15T15:50:28Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Rick.A](https://ifnotnil.com/user_avatar/ifnotnil.com/rick.a/32/217_2.png) [@Rick.A](https://ifnotnil.com/u/Rick.A)\
**Post date:** [15 April 2022 16:53 UTC](https://ifnotnil.com/t/svg-for-xojo/2439/6 "2022-04-15T16:53:03Z")

</div>

> [@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.

---

<div class="post-metadata">

**Author:** ![npalardy](https://ifnotnil.com/user_avatar/ifnotnil.com/npalardy/32/10_2.png) [@npalardy](https://ifnotnil.com/u/npalardy)\
**Post date:** [15 April 2022 18:55 UTC](https://ifnotnil.com/t/svg-for-xojo/2439/7 "2022-04-15T18:55:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Rick.A](https://ifnotnil.com/user_avatar/ifnotnil.com/rick.a/32/217_2.png) [@Rick.A](https://ifnotnil.com/u/Rick.A)\
**Post date:** [15 April 2022 20:36 UTC](https://ifnotnil.com/t/svg-for-xojo/2439/8 "2022-04-15T20:36:34Z")

</div>

Can I use it to build UIs ?

---

<div class="post-metadata">

**Author:** ![npalardy](https://ifnotnil.com/user_avatar/ifnotnil.com/npalardy/32/10_2.png) [@npalardy](https://ifnotnil.com/u/npalardy)\
**Post date:** [15 April 2022 21:02 UTC](https://ifnotnil.com/t/svg-for-xojo/2439/9 "2022-04-15T21:02:53Z")

</div>

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](https://ifnotnil.com/t/svg-for-xojo/2439/12))

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)

1. draw the picture into the canvas with

```auto
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

---

<div class="post-metadata">

**Author:** ![DaveS](https://ifnotnil.com/user_avatar/ifnotnil.com/daves/32/79_2.png) [@DaveS](https://ifnotnil.com/u/DaveS)\
**Post date:** [15 April 2022 21:44 UTC](https://ifnotnil.com/t/svg-for-xojo/2439/10 "2022-04-15T21:44:19Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![npalardy](https://ifnotnil.com/user_avatar/ifnotnil.com/npalardy/32/10_2.png) [@npalardy](https://ifnotnil.com/u/npalardy)\
**Post date:** [15 April 2022 21:50 UTC](https://ifnotnil.com/t/svg-for-xojo/2439/11 "2022-04-15T21:50:32Z")

</div>

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](https://ifnotnil.com/t/svg-for-xojo/2439/12))

---

<div class="post-metadata">

**Author:** ![npalardy](https://ifnotnil.com/user_avatar/ifnotnil.com/npalardy/32/10_2.png) [@npalardy](https://ifnotnil.com/u/npalardy)\
**Post date:** [15 April 2022 22:13 UTC](https://ifnotnil.com/t/svg-for-xojo/2439/12 "2022-04-15T22:13:07Z")

</div>

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

[Yet another movie](http://great-white-software.com/miscellaneous/Screen%20Recording%202022-04-15%20at%204.11.29%20PM.mov)

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

---

<div class="post-metadata">

**Author:** ![cm\_rb](https://ifnotnil.com/letter_avatar_proxy/v4/letter/c/977dab/32.png) [@cm\_rb](https://ifnotnil.com/u/cm_rb)\
**Post date:** [11 March 2023 22:59 UTC](https://ifnotnil.com/t/svg-for-xojo/2439/13 "2023-03-11T22:59:27Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![npalardy](https://ifnotnil.com/user_avatar/ifnotnil.com/npalardy/32/10_2.png) [@npalardy](https://ifnotnil.com/u/npalardy)\
**Post date:** [12 March 2023 00:29 UTC](https://ifnotnil.com/t/svg-for-xojo/2439/14 "2023-03-12T00:29:15Z")

</div>

Thats good questions for @einhugur

---

<div class="post-metadata">

**Author:** ![einhugur](https://ifnotnil.com/user_avatar/ifnotnil.com/einhugur/32/5207_2.png) [@einhugur](https://ifnotnil.com/u/einhugur)\
**Post date:** [12 March 2023 00:45 UTC](https://ifnotnil.com/t/svg-for-xojo/2439/15 "2023-03-12T00:45:19Z")

</div>

Its a SVG Renderer, not SVG Creator.

---

<div class="post-metadata">

**Author:** ![cm\_rb](https://ifnotnil.com/letter_avatar_proxy/v4/letter/c/977dab/32.png) [@cm\_rb](https://ifnotnil.com/u/cm_rb)\
**Post date:** [12 March 2023 07:27 UTC](https://ifnotnil.com/t/svg-for-xojo/2439/16 "2023-03-12T07:27:50Z")

</div>

Ok, thanks.

---

<div class="post-metadata">

**Author:** ![samRowlands](https://ifnotnil.com/user_avatar/ifnotnil.com/samrowlands/32/121_2.png) [@samRowlands](https://ifnotnil.com/u/samRowlands)\
**Post date:** [13 March 2023 00:46 UTC](https://ifnotnil.com/t/svg-for-xojo/2439/17 "2023-03-13T00:46:11Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![cm\_rb](https://ifnotnil.com/letter_avatar_proxy/v4/letter/c/977dab/32.png) [@cm\_rb](https://ifnotnil.com/u/cm_rb)\
**Post date:** [13 March 2023 19:56 UTC](https://ifnotnil.com/t/svg-for-xojo/2439/18 "2023-03-13T19:56:30Z")

</div>

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)](https://xmlgraphics.apache.org/batik/)), maybe that will do the job.

---

<div class="post-metadata">

**Author:** ![samRowlands](https://ifnotnil.com/user_avatar/ifnotnil.com/samrowlands/32/121_2.png) [@samRowlands](https://ifnotnil.com/u/samRowlands)\
**Post date:** [14 March 2023 01:15 UTC](https://ifnotnil.com/t/svg-for-xojo/2439/19 "2023-03-14T01:15:59Z")

</div>

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.
