Graphics.DrawSVG method

[quote=228787:@Sam Rowlands]It’s funny how these things work out… I just wrote an SVG to PDF converter today as I wanted to use some SVG vectors in my Xojo application.

Once I finish my current project, I’ll tart it up and stick it out there too.[/quote]

Hi Sam, how did it go: Did you finnish your SVG to PDF converter?

Yes indeed, you can download it from the Mac App Store.
https://itunes.apple.com/gb/app/svg-converter-convert-svg/id1075707641?mt=12

Looks really good and seems to do it work :slight_smile:

I misunderstood your first post, I guess: I thought you where developing a class for Xojo to sell or share.

:slight_smile:

[quote=313096:@Dan Berghult]Looks really good and seems to do it work :slight_smile:
I misunderstood your first post, I guess: I thought you where developing a class for Xojo to sell or share.
:-)[/quote]
Sorry no, it’s a hacked job that uses the HTMLViewer (basically webkit) and a bunch of Apple declares to then turn the web content into PDF data, which can then be turned into PNG and such. Due to the nature it’s not really a drop in class that you can simply include in your project.

However if you’re on the Mac, you can convert it to PDF and load up the PDF within your application, which is what we actually used SVG Converter for.

Is Alwyn Bester still around?

I want to be able to quickly create Xojo pictures at various scales quickly from SVGs of chemical structures created by some open source software …

The Xojo pictures created from those SVGs by the Zoclee project pictures only shows part pf the structure, but If I open them in safari or other applications the whole molecule shows…

I don’t know if the software I am using to produce the SVGs is producing incorrect SVGs that other software knows how to deal with, or if there is an issue with the Zoclee code.

So Alwyn if you are still here and still maintaining the project here is the SVG content… I would really appreciate it if this could be made to work!

It is really shame that Xojo do snopt provide built in rendering of SVG pictures (even if not creation) because support for an Xplatform (even the WEB!) standard vector format that other apps understand and use is badly needed in Xojo IMO!

Thanks,

  • karen
<?xml version="1.0"?>
<svg version="1.1" id="topsvg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:cml="http://www.xml-cml.org/schema" x="0" y="0" width="200px" height="200px" viewBox="0 0 100 100">
<title> - Open Babel Depiction</title>
<g transform="translate(0,0)">
<svg width="100" height="100" x="0" y="0" viewBox="0 0 287.846 200"
font-family="sans-serif" stroke="rgb(76,76,76)" stroke-width="2"  stroke-linecap="round">
<line x1="109.3" y1="60.0" x2="74.6" y2="40.0" stroke="rgb(76,76,76)"  stroke-width="2.0"/>
<line x1="76.1" y1="42.6" x2="52.8" y2="56.1" stroke="rgb(76,76,76)"  stroke-width="2.0"/>
<line x1="73.1" y1="37.4" x2="49.8" y2="50.9" stroke="rgb(76,76,76)"  stroke-width="2.0"/>
<line x1="178.6" y1="100.0" x2="213.2" y2="120.0" stroke="rgb(76,76,76)"  stroke-width="2.0"/>
<line x1="216.2" y1="120.0" x2="216.2" y2="147.0" stroke="rgb(76,76,76)"  stroke-width="2.0"/>
<line x1="210.2" y1="120.0" x2="210.2" y2="147.0" stroke="rgb(76,76,76)"  stroke-width="2.0"/>
<line x1="213.2" y1="120.0" x2="236.6" y2="106.5" stroke="rgb(76,76,76)"  stroke-width="2.0"/>
<line x1="109.3" y1="60.0" x2="143.9" y2="40.0" stroke="rgb(76,76,76)"  stroke-width="2.0"/>
<line x1="118.1" y1="63.2" x2="142.3" y2="49.2" stroke="rgb(76,76,76)"  stroke-width="2.0"/>
<line x1="143.9" y1="40.0" x2="178.6" y2="60.0" stroke="rgb(76,76,76)"  stroke-width="2.0"/>
<line x1="178.6" y1="60.0" x2="178.6" y2="100.0" stroke="rgb(76,76,76)"  stroke-width="2.0"/>
<line x1="171.4" y1="66.0" x2="171.4" y2="94.0" stroke="rgb(76,76,76)"  stroke-width="2.0"/>
<line x1="178.6" y1="100.0" x2="143.9" y2="120.0" stroke="rgb(76,76,76)"  stroke-width="2.0"/>
<line x1="143.9" y1="120.0" x2="109.3" y2="100.0" stroke="rgb(76,76,76)"  stroke-width="2.0"/>
<line x1="142.3" y1="110.8" x2="118.1" y2="96.8" stroke="rgb(76,76,76)"  stroke-width="2.0"/>
<line x1="109.3" y1="100.0" x2="109.3" y2="60.0" stroke="rgb(76,76,76)"  stroke-width="2.0"/>
<text x="34.000000" y="68.000000" fill="rgb(255,12,12)"  stroke="rgb(255,12,12)" stroke-width="1" font-size="16" >O</text>
<text x="207.205081" y="168.000000" fill="rgb(255,12,12)"  stroke="rgb(255,12,12)" stroke-width="1" font-size="16" >O</text>
<text x="241.846097" y="108.000000" fill="rgb(255,12,12)"  stroke="rgb(255,12,12)" stroke-width="1" font-size="16" >OH</text>
</svg>
</g>
<text font-size="18.000000" fill ="gray" font-family="sans-serif"
x="10.000000" y="20.000000" ></text>
</svg>

We just worked on a project where we had to use GMImageMBS to read SVG’s. Dunno if plugins are an option for you but that’s what helped us.

Actually looking at what I posted I found the issue…Although I don’t know the SVG standard I saw the Width and Height were were defined as 200 each and then there was a “viewbox” statement
viewBox=“0 0 100 100” I assumed the was viewBox=“X Y Width Height”
do I edited teh file so that teh last 2 numbers were 200 and got the whole molecule to display!

I assume that is how browesers implement panning and zooming SVG’s And it should not be hard to add the capabilities to Alwyn’s implement those functions on teh desktop

Thanks Bob I did consoler that.

The MBS complete plugins I have are from 2014 and the GraphicsMagic one from back then did not seem to work with 2018R3, so I went to Alwyn’s code…

While chemical structures can be complex, the drawing primitives they require should be simple… so if Alwyn code is fast enough, I think I may have my solution!

  • Karen

OK I think I found out what is actually causing the issue… It looks like something alwyn did not consider…

His code does not handle the situation where there is more than one view box

This SVG XML fragment of the SVG file (I am only copying the relevant part) does not work right:

[code]<?xml version="1.0"?>
<svg version=“1.1” id=“topsvg”
xmlns=“http://www.w3.org/2000/svg” xmlns:xlink=“http://www.w3.org/1999/xlink
xmlns:cml=“http://www.xml-cml.org/schema” x=“0” y=“0” width=“300px” height=“300px” viewBox=“0 0 100 100”>

- Open Babel Depiction [/code]

If I edit the file to this:

[code]<?xml version="1.0"?>
<svg version=“1.1” id=“topsvg”
xmlns=“http://www.w3.org/2000/svg” xmlns:xlink=“http://www.w3.org/1999/xlink
xmlns:cml=“http://www.xml-cml.org/schema” x=“0” y=“0” width=“300” height=“300” viewBox="0 0 941.051 941.051">

- Open Babel Depiction [/code]

Apparently one can have hierarchical viewboxes and he does not support that…
I know that the software I am using put text in the SVG that is independent of the drawn structure a well as other elements.

I suspect that the second view box has the dimensions of the drawing commands for the structure so that teh structure ca be scaled independently (or within) of other elements in the SVG…

But as I don’t know the SVG spec I don’t know how to modify his code for general use…

As i don’t need anything BUT the structure I can customize his code for my specific use…

If thee is an SVG expert here, it would nice if they could extend what he did for fuller SVH support…

This open source project will never be 100% because he relies on Object2Ds and they are too limited… Never the less fuller SVG support would help the community…

As i said before Xojo inc SHOULD at least support rendering SVG with losses scaling, even if an API for us to create them would be too big a job…

There has to be some good, fast code they can license at a reasonable price and integrate into the framework to do that just that!!!

Supporting a standards based platform and application indpendant vector format is getting to be more and more important with the proliferation of resolutions and screen sizes for all the 1platforms/devices Xojo is looking to support!

I know MBS has a plugin that can handle SVG to some degree, but besides not having a current license, I find the MBS plugins in general not very “citizen developer”/RAD friendly… Figuring this out is likely faster than trying to figure out how to makethat plugin (or figure out if it can) do what i want!

In any case if Alwyn’s code (with my mods for this use case) is fast enough, I think i have my solution for this specific application.

  • Karen
1 Like

Alwyn’s code in general worked well for my needs on a Mac, but has major issues on Windows (only tested on Windows 10) < big sigh>

Guess i will go the pre-generated PNG route and take the quality hit when I need scaling…

Given the feature request in feedback for SVG is a number of years old, I don’t think Xojo will support it anytime soon, if ever …

So much time was wasted on the old “new” framework and the navigator in the new IDE that could have been put to a LOT better use providing us with features like this that actually give more capabilities to accomplish things and do it faster in our own apps … Oh well

  • karen

Thank you Dana for re-opening this topic.

I apologize for having been absent for a good few years from this discussion. I had to attend to important business duties during this time, and were unable to give attention to any of my pro bono projects (including this DrawSVG method).

I’ve noticed that Xojo made some nice improvements to their graphics library since I last worked on this project, and I’m thinking about starting up the DrawSVG method development again.

That being said I would like to determine if there is still a demand for such a “native” DrawSVG method. If you would find it useful for me to continue on with this method/project, please let me know in this thread.

And kudos to the Xojo team for all the progress they’ve made during the past few years… I was pleasantly surprised :slight_smile:

5 Likes

I just started to build a SVG exporter for my graphics program. In my case I need it as SVG is a commonly used format for cutting machines, for example of vinyl, cardboard, etc. I basically use Affinity Designer to generate test files and the replicate that. Haven’t made much progress yet, but I’m getting there.

I would for sure use it especially for web based vector drawing. @Claes_Lundstrom have you seen our packaging library product for XY cutters? Its a xojo app: lib

Well, since the Original post in 2015, SVG has become more and more popular and is a standard for many use cases. It is a shame that Xojo dont have a native support for their graphics system and being the Feedback case asking for this (<https://xojo.com/issue/10931>) more than 12 years old… having proyects like yours is the only hope for many users who need SVG suport.

So, YES, this is very useful

Definitely yes! SVG is now widely used as a vector data exchange format. I have a half-done set of SVGDocument classes to import and export vector data. When I started, the limited graphics functions offered by Xojo at the time did not encourage me to proceed any further than parsing a few simple shapes, but now things have changed. The GraphicsPath class is great and - though it still does not support subpaths and winding rules - it would make drawing an SVG much easier than before.

1 Like

Definitely yes! We also could use the SVG format to output to Plotters.

I use it all the time for that. Plotters and cutter that is.

Hi does your DrawSVG class have a method like getPointAtLength() as described here?

I’m basically making a plotter using a xojo app running on a raspberry pi. I need a way to convert an SVG path to movements for the motors. Basically I need to be able to get an x,y based on being so far through drawing the path line. So I can move the motor along that path.

And looking at their code, I need to do something like this to get the total length of the path so I can move the appropriate distance along the path each cycle:

var  pathLength = mypath.getTotalLength();

This would keep my pen moving at a consistent speed. I already do this for example when drawing a circle.

I’m going to go out and look at the github but was wondering how hard this would be to implement.