Graphics.DrawSVG method

Add-Ons
61

The smoothing factor is now implemented in DrawSVG. The quality of the images are way better now. There is still a few small glitches I need to sort out, with artifacts being created with some images, but most of the images renders correctly.

Another bonus, on Windows it seems the images are now rendered way faster, even when using a bigger cache image to smooth it with. The tiger used to take about 3 seconds to render, and now renders in less than a second. Not sure why this is, and I suspect it might have something todo with the fact that the image is first rendered off screen now, instead of drawing directly to a visible canvas control…

62

You can now load SVG files as Picture objects using the new FolderItem.OpenAsSVG method.

    Dim myPic As Picture
    Dim f As New FolderItem("path to svg")

    myPic = f.OpenAsSVG()

    g.DrawPicture myPic, 100, 100

Obviously the file needs to contain valid SVG XML data.

Just update your DrawSVG module with the latest one on Github if you want to make use of the OpenAsSVG feature.

63

Great stuff Alwyn (and Marco) :slight_smile:

64

Wonderful Alwyn!!! Thank you very much, I was desperate with this problem… you are a crack. I love DrawSVG. Congratulations.

Thanks again,
Sergio

65

Good to hear the project is helpful. :slight_smile:

I cannot take full credit, for the project is the result of many people’s feedback, suggestions and code contributions.

Still a lot of work to get it to full spec though, and to render flawlessly on all platforms.

66

Hi Alwyn, readers,

I read the news today (Oh Boy…), and found one that may help:

there are a lot of free icons available there:

100 Icons, and 350 Free Vector Icons .

The file format exists in SVG (and many others).

Alwyn may probably not have time to check them, but some of us can do their checkings using these.

I report that a bit fast: the 100 icons link goes to a “free” bill page (I do not read it, I closed the window), and the 350 page have a direct link.

67

Did a few spot checks on the libraries Emile.

The 350 library seems to render ok with DrawSVG. The 100 library icons however gives a lot of errors, and DrawSVG will need some work to get these icons to render correctly.

Thanks for sending this through. It is a great help.

68

The 100 library now renders correctly. There was a small path parsing bug in the code.

69

That was my hope.

70

Looks like the smoothing has helped a ton! :slight_smile:

I still have a number of icons that aren’t rendering right. Here’s two examples:

Camera

<?xml version="1.0" encoding="utf-8"?> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve"> <g id="Layer_2"> <path d="M37.5,38.6h-27c-2.5,0-4.5-2-4.5-4.5V18.4c0-2.5,2-4.5,4.5-4.5h2.2c0-2.5,2-4.5,4.5-4.5h13.5c2.5,0,4.5,2,4.5,4.5h2.2 c2.5,0,4.5,2,4.5,4.5v15.8C42,36.6,40,38.6,37.5,38.6z M24.1,16.2c-5,0-9.1,4.1-9.1,9.1s4.1,9.1,9.1,9.1s9.1-4,9.1-9.1 S29.1,16.2,24.1,16.2z M24.1,29.6c-2.5,0-4.4-2-4.4-4.4s2-4.4,4.4-4.4s4.4,2,4.4,4.4S26.5,29.6,24.1,29.6z"/> </g> </svg>

Bonus Plans

<?xml version="1.0" encoding="utf-8"?> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 48 48" enable-background="new 0 0 48 48" xml:space="preserve"> <g id="Layer_2"> <path d="M8.6,23.8C8.3,23.8,8,24,8,24.3v17.1C8,41.7,8.3,42,8.6,42h30.8c0.3,0,0.5-0.3,0.5-0.5V24.3c0-0.3-0.3-0.5-0.5-0.5 C39.4,23.8,8.6,23.8,8.6,23.8z M24,25.2c0.3,0,0.6,0.3,0.6,0.6v1.1c0,0,0,0,0,0c0.5,0,1,0.2,1.4,0.3c0.4,0.2,0.8,0.4,1.1,0.8 c0.2,0.3,0.4,0.5,0.6,0.8c0.1,0.3,0.2,0.5,0.2,0.8c0,0.3-0.1,0.5-0.3,0.7c-0.2,0.2-0.4,0.3-0.7,0.3c-0.5,0-0.9-0.3-1-0.8 c-0.2-0.6-0.6-1.1-1.2-1.3c0,0,0,0,0,0v3.3c0,0,0,0,0,0c0.6,0.2,1.1,0.3,1.5,0.5c0.4,0.1,0.7,0.4,1,0.6c0.3,0.3,0.6,0.6,0.8,1 c0.2,0.4,0.3,0.8,0.3,1.3c0,0.6-0.1,1.2-0.4,1.7c-0.3,0.5-0.7,1-1.3,1.3c-0.6,0.3-1.2,0.5-1.9,0.6c0,0,0,0,0,0v1.1 c0,0.3-0.3,0.6-0.6,0.6c-0.3,0-0.6-0.3-0.6-0.6v-1.1c-0.5-0.1-1.1-0.2-1.5-0.4c-0.5-0.2-0.9-0.5-1.2-0.8c-0.3-0.3-0.5-0.7-0.7-1 c-0.1-0.4-0.2-0.7-0.2-1.1c0-0.5,0.5-1,1-1c0.4,0,0.8,0.2,0.9,0.6c0.1,0.4,0.3,0.8,0.4,1c0.2,0.5,0.7,0.9,1.2,1.1v-3.7 c-0.7-0.2-1.2-0.4-1.7-0.6c-0.5-0.2-0.9-0.6-1.2-1c-0.3-0.4-0.4-1-0.4-1.7c0-0.9,0.3-1.7,0.9-2.3c0.6-0.6,1.5-0.9,2.4-1v-1.1 C23.4,25.5,23.7,25.2,24,25.2L24,25.2z M23.4,28.5c-0.7,0.2-1.3,0.7-1.3,1.5c0,0.4,0.1,0.7,0.4,1c0.3,0.2,0.6,0.4,1,0.5V28.5z M24.6,33.9v3.4c0.4-0.1,0.8-0.3,1.2-0.6c0.3-0.3,0.4-0.7,0.4-1.1c0-0.5-0.1-0.8-0.4-1.1C25.5,34.2,25,34,24.6,33.9z"/> <path d="M6.5,15.9c-0.3,0-0.5,0.3-0.5,0.5V22c0,0.3,0.3,0.5,0.5,0.5c11.5,0,24.4,0,34.9,0c0.3,0,0.5-0.3,0.5-0.5v-5.6 c0-0.3-0.3-0.5-0.5-0.5C29.8,15.9,16.9,15.9,6.5,15.9z"/> <g transform="matrix(0.22651,0,0,0.22651,2586.7076,282.83563)"> <path d="M-11266-1228.7c-26.5,0-39.2,31.3-45.5,45h45.3C-11234.8-1183.6-11234.4-1228.7-11266-1228.7L-11266-1228.7z M-11270.5-1213.8c10.6,0,11.1,17.7-2.7,17.7h-18.4C-11284.9-1206.2-11278.6-1213.8-11270.5-1213.8L-11270.5-1213.8z"/> <path d="M-11361.9-1228.7c26.5,0,39.2,31.3,45.5,45h-45.3C-11393.1-1183.6-11393.5-1228.7-11361.9-1228.7L-11361.9-1228.7z M-11357.4-1213.8c-10.6,0-11.1,17.7,2.7,17.7h18.4C-11343-1206.2-11349.3-1213.8-11357.4-1213.8L-11357.4-1213.8z"/> </g> </g> </svg>

71

Indeed it has. We owe Marco a big thanks for the smoothing idea.

With regards to the two test images you’ve posted… I’m currently working on it.

The tricky thing about this issue is that the images only renders incorrectly on Mac (it renders perfectly on Windows). Up until now I’ve done all development and testing on Windows, but will now start to include Mac in my testing.

There seems to be a difference in how Windows renders FigureShapes compared to how Mac renders FigureShapes. As soon as I’ve got a better understanding of exactly what this difference is, it shouldn’t be too hard to fix the problem.

Will let you know once I’ve made progress with this issue.

72

Sounds like this will be worthy of a Feedback case if it proves to be true…

Great work on this project, Alwyn, etal!

73

Thank you Peter.

I’ll see if I can create a basic test project to illustrate the difference in drawing of the FigureShape on Windows and OS X.

Fixing this issue is a high priority for me, for it affects a quite few SVG pictures. Will keep you guys in the loop with developments.

74

Alwyn,
Sorry for coming late to this party but this looks very interesting. Is there a way to rotate these images?

75

Bob - you must have missed this earlier. Loong thread

[quote=229121:@Alwyn Bester]Rotation is super easy with SVG.

For example, let’s say you have a SVG with a blue rectangle shape in it:

<svg width="100" height="100">
    <rect width="50" height="50" x="25" y="25" style="fill:blue;" />
</svg>

This rectangle’s center point is at (50,50)… (x + half of it’s with, y + half of it’s height).

To rotate this square 30 degrees around it’s center point, we simply add a transform attribute to the rect tag:

<svg width="100" height="100">
    <rect width="50" height="50" x="25" y="25" style="fill:blue;" transform="rotate(30, 50, 50);" />
</svg>

To rotate this square 30 degrees around point (20, 40), we simply change the rotate call as follow:

<svg width="100" height="100">
    <rect width="50" height="50" x="25" y="25" style="fill:blue;" transform="rotate(30, 20, 40);" />
</svg>

The nice thing about working with SVG XML is that we can do some nice animation effects by manipulating the XML elements directly.

This example shows how easy it is to create a spinning rectangle using SVG and the timer control:

Animation Demo

I’ve always found W3Schools.com and excellent resource for SVG information.[/quote]

76

Yup, I did miss that. So I could do it at runtime but I’d have to manipulate the SVG information itself. Just investigating my options on a new control.

77

I have been using the Graphics.DrawSVG method with success for several months. (Thank you for making it available!) Yesterday I added an image that is not rendering correctly on Windows 10. It is the letter B saved as an svg using Inkscape. Any thoughts are sincerely appreciated. Image file follows:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>



rdf:RDF
<cc:Work
rdf:about="">
dc:formatimage/svg+xml</dc:format>
<dc:type
rdf:resource=“http://purl.org/dc/dcmitype/StillImage” />
dc:title</dc:title>
</cc:Work>
</rdf:RDF>

<sodipodi:namedview
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity=“1”
objecttolerance=“10”
gridtolerance=“10”
guidetolerance=“10”
inkscape:pageopacity=“0”
inkscape:pageshadow=“2”
inkscape:window-width=“640”
inkscape:window-height=“480”
id=“namedview9059”
inkscape:document-units=“mm”
showgrid=“false”
inkscape:zoom=“0.26211738”
inkscape:cx=“87.746947”
inkscape:cy=“112.545”
inkscape:current-layer=“svg9052”
units=“px” />




78

Hi Karen,

I had a quick look at the posted SVG. There seems to be a problem in the path rendering algorithm. Currently I’m pressed for time to get other projects delivered, but will see if I can make some time next week to take a proper look at the problem.

79

Alwyn - Thank you for the reply and your willingness to look at the issue when you have an opportunity. I have been implementing additional features and found one more image with the same problem - it is the number 8. Similar to a B, so not surprising. I can post that image as well if it is of use. By the way, the DrawSVG method was a significant factor in my decision to use xojo for my current project. A big thank you to everyone who contributed!

80

You are welcome to share the number 8 SVG as well Karen. The more files I have for testing the better.

I just need to point out that DrawSVG is an attempt to get basic SVG functionality into Xojo. I ran into some inconsistencies between how Mac and Windows rasterizes images which highly discouraged me to continue with a full implementation of the SVG spec in DrawSVG method.

The only possible solution to fix these inconsistencies is to start using platform specific declares which is way too time consuming and involved for my current work schedule, especially given that DrawSVG is an free open project.

DrawSVG is there for the most basic SVG needs. If your project requires SVG features that are beyond the scope of what DrawSVG currently provides, then I would highly recommend that you take a look at the commercial SVG plugins provided by MonkeyBread/Christian.

Just out of interest. What additional features did you implement?