Jump to content
pyscripter

Native Svg parsing and painting in Windows

Recommended Posts

I am not sure many know that since the Windows Creators update, svg parsing and painting is natively supported and is part of Direct2D.  I wanted to test this Windows feature, however, the first obstacle was that the Direct2d headers that come with Delphi are very very old.  There are two open tickets in https://quality.embarcadero.com/.

 

 

You may want to vote for them, since lack of good Direct2D support (includes DirectWrite) it is a bit of a shame.

 

I then looked at other Direct2D translations and found two that are regularly updated.   

 

 

They both had some issues but that was a good start.  It turned out that parsing and painting svg files to Canvas is quite straightforward.  Once you establish a renderer (Vcl.Direct2d does this, but it is easy to do it from scratch) you can do everything with two lines of code.

 fDeviceContext5.CreateSvgDocument(fStream,
                               D2D1SizeF(ClientWidth, ClientHeight),
                               fsvgDocument);
fDeviceContext5.DrawSvgDocument(fsvgDocument);

You can check whether Svg is supported by:

  if Supports( rt, ID2D1DeviceContext5, fDeviceContext5) then

And it is easy to do things like scaling, opacity, rotation, recoloring etc.  The quality and speed appear to be quite good, but there are some limitations, the most important of which I think is the lack of support for the text element.  I am attaching the source code of my test project (no dependencies) in case anyone wants to play with it.  The Svg scales automatically as you resize the form.

Svg.zip

Edited by pyscripter
  • Like 5

Share this post


Link to post

That's extremely cool!   This appears to load some of my svg's that several of the open source Delphi svg projects had issues with (mostly with object positions being offset in strange ways.)  On some of my svgs I had converted text to paths, which displays nicely (of the course the text ones do not as you mentioned.)

Share this post


Link to post

Nice, however the lack of text support might be an issue. It pains me that windows doesn't have a fully featured svg render build it.. it's not like svg's are a new thing!

Edited by Vincent Parrett
typo

Share this post


Link to post
25 minutes ago, Vincent Parrett said:

Nice, however the lack of text support might be an issue. I pains me that windows doesn't have a fully featured svg render build it.. it's not like svg's are a new thing!

True.  And for the last 3-4 years there was no improvement in Windows svg support.  However converting text to path is a reasonable workaround.  In any case it is not common to have text in toolbar icons etc.

Share this post


Link to post
2 hours ago, MarkShark said:

That's extremely cool!   This appears to load some of my svg's that several of the open source Delphi svg projects had issues with (mostly with object positions being offset in strange ways.)  On some of my svgs I had converted text to paths, which displays nicely (of the course the text ones do not as you mentioned.)

Can you list all of them? Have you tried the relatively new SVGIconImageList ?

Share this post


Link to post
6 hours ago, Edwin Yip said:

Can you list all of them? Have you tried the relatively new SVGIconImageList ?

I've tried the two commercial ones (SVG Magic and Delphi SVG.)  They both had issues with my homemade Inkscape svgs, however that was last year (2019) and they may have improved.   I have tried SVGIconImagelist recently and it does have the issues I mentioned (reported in their issue tracker on Github.)  I'm not sure if that's improved recently.  That one does look the most promosing!  The other two open source ones I tried were both older and not actively developed that I could see.

Share this post


Link to post
15 minutes ago, MarkShark said:

I've tried the two commercial ones (SVG Magic and Delphi SVG.)  They both had issues with my homemade Inkscape svgs, however that was last year (2019) and they may have improved.   I have tried SVGIconImagelist recently and it does have the issues I mentioned (reported in their issue tracker on Github.)  I'm not sure if that's improved recently.  That one does look the most promosing!  The other two open source ones I tried were both older and not actively developed that I could see.

Can you please share these problem SVGs?

Share this post


Link to post

Why is SVG so flaky when used in desktop applications?  I have SVGs created using major commercial and free applications, which display without problems both in other applications and in any browser I choose, but which fail miserably to display in any of the Delphi libraries I have tried.  The library authors seem to feel that once they can display the tiger and a few simple geometric-shaped icons, the product is ready to ship.  I would like to display a variety of logo images and diagrams using SVG, not just small icons on a menu bar or button.  But as soon as an image involves 'text on a  path', or complex patterns or shading, or some other common graphic style, each library I have tested gets it wrong; and not even wrong in the same way that a different library or a similar example gets it wrong.  SVG would be a great solution if only the implementations worked reliably with any valid SVG file.

Share this post


Link to post

My limited experience with SVG in Delphi is very recent. I was in need of some icons, and after a bit of rooting around, I found that the TcxImageList from DevExpress supports SVG. I used Affinity Designer to create a few suitable images, and used them with no difficulty. I did discover the lack of text support, but resolved that in the one icon I made which had characters in it by converting them to curves. An added benefit to me was that Affinity Designer has a collection of simple shapes ready for use, and most of what I needed I was able to base on those shapes. Being able to use SVG was a huge benefit. I would have passed altogether if I had to color images pixel by pixel.

Share this post


Link to post

@Bill Meyer My first time hear about Affinity Designer, did a google and it seems to be very powerful with an affordable  price tag.

But I'm out of curiosity - do you have any design background to be able to make professional-looking icons? Or is Affinity Designer that user friendly to be able to enable a programmer to make good looking icons? Thanks.

Share this post


Link to post
27 minutes ago, Edwin Yip said:

@Bill Meyer My first time hear about Affinity Designer, did a google and it seems to be very powerful with an affordable  price tag.

But I'm out of curiosity - do you have any design background to be able to make professional-looking icons? Or is Affinity Designer that user friendly to be able to enable a programmer to make good looking icons? Thanks.

I only do occasional graphics work, and Affinity Designer is a more realistic option for me  than an Adobe subscription. I am not a graphics designer, but have done quite a bit of graphics work over the years. And I would say that Affinity Designer does make it relatively easy, even for a dabbler, to produce good results. There are many good videos on youtube. I would recommend this one, to start: 

 

  • Like 2

Share this post


Link to post
1 hour ago, Edwin Yip said:

do you have any design background to be able to make professional-looking icons? Or is Affinity Designer that user friendly to be able to enable a programmer to make good looking icons?

It isn't the tool that determines the result. It's the one wielding the tool.

 

Share this post


Link to post
17 minutes ago, Anders Melander said:

It isn't the tool that determines the result. It's the one wielding the tool.

 

I know, but once I used a boxshot designing tools that provides a lot of ready-made template and shapes, which makes it very easy to produce professional-looking result. Tools make a difference tool.

Share this post


Link to post

I just noticed that TMS VCL UIPack  supports drawing SVG graphics and there's even a tAdvSVGImageCollection. I haven't tested it myself though.  I quote from the manual:

 

 

"SVG supported elements:
- circle
- clipPath
- defs (limited to predefined style, no gradients, no paths, only single fill/stroke parameters)
- ellipse
- g
- image (limited to base64 encoded string value)
- line
- path
- pattern (no gradients, no paths, only single fill/stroke parameters)
- polygon
- polyline
- rect
- style
Within the style element supported parameters are:
- fill (no gradients)
- stroke (no gradients)
- stroke-width
- opacity
Within the primitives (line, polygon, polyline, rect, path) supported parameters are:
- fill (no gradients)
- stroke (no gradients)
- stroke-width
- transform (scale, rotate, translate, matrix)
With SVG support in TMS VCL UI Pack we aim for smaller SVG icon sets that can be used to target
normal and high DPI applications. When scaling, SVG will scale accordingly and still render sharp at
different resolutions. SVG support has been added to avoid the need for numerous icons for each
different scale / resolution"

Share this post


Link to post
1 hour ago, A.M. Hoornweg said:

I just noticed that TMS VCL UIPack  supports drawing SVG graphics and there's even a tAdvSVGImageCollection

I was interested in it, but you can only purchase the full UI pack, and I don't need all those other components. 

Share this post


Link to post

We have the full VCL UI Pack and I'm planning to port our applications to the SVG image list until the end of the year. We are already using SVG Icons, but we currently render them to bitmaps with cairo and use standard image lists.

Share this post


Link to post

So many gems on GitHub that I learned about today and so many more to discover. Thank you!

Share this post


Link to post
14 minutes ago, Edwin Yip said:

In case you didn't know - https://github.com/EtheaDev/IconFontsImageList can scale the icons to any size losslessly, but it depends on icon fonts such as Material Icons.

https://github.com/EtheaDev/SVGIconImageList

 

By the same author. I'm working on a pull request to add a virtualimagelist and imagecollection using the same svg code. 

  • Like 1
  • Thanks 1

Share this post


Link to post

Yes, I saw your PR in SVGIconImageList and I think I came across IconFontsImageList a while ago, but didn't try it, because I wanted to use SVG. I'll keep an eye on both projects.

Share this post


Link to post
3 hours ago, Vincent Parrett said:

https://github.com/EtheaDev/SVGIconImageList

 

By the same author. I'm working on a pull request to add a virtualimagelist and imagecollection using the same svg code. 

Vincent, I can't process your pull request for a few days because I'm busy, but your job is very important to give flexibility to these components. Thanks for your support to the SVGIconImageList project.

 

  • Like 1

Share this post


Link to post
5 hours ago, Carlo Barazzetta said:

Vincent, I can't process your pull request for a few days because I'm busy, but your job is very important to give flexibility to these components. Thanks for your support to the SVGIconImageList project.

That's ok, it's not quite ready to go yet.. and likewise I have other stuff to work on this week, hope to find some time over the weekend or early next week to finish it off.

Share this post


Link to post

The work on https://github.com/EtheaDev/SVGIconImageList continues, many issues have been solved.
Now it's possible also to use native VirtualImageList (from 10.3 or 10.4) linked to a TSVGIconImageCollection!
If you have an older Delphi version you can use TSVGIconsVirtualImageList.
With the help of VincentParrent and pyscripter the components and the SVG library improve day by day ...
Stay tuned!

NativeVirtualImageList.jpg

  • Like 7

Share this post


Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×