Native Svg parsing and painting in Windows

[pyscripter 694]

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/.

 

• Direct2D 1.1 support missing (open since XE7!)
• Direct2D 1.2 and 1.3 support missing

 

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.   

 

• MfPack
• DelphiDX12

 

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 July 28, 2020 by pyscripter

[MarkShark 27]

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.)

[Vincent Parrett 765]

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 July 29, 2020 by Vincent Parrett
typo

[pyscripter 694]

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.

[Edwin Yip 154]

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 ?

[MarkShark 27]

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.

[Alexander Sviridenkov 360]

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?

[timfrost 79]

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.

[Bill Meyer 337]

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.

[Edwin Yip 154]

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

[Bill Meyer 337]

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: 

 

[Anders Melander 1815]

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.

 

[Edwin Yip 154]

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.

[A.M. Hoornweg 144]

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"

[Vincent Parrett 765]

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. 

[luebbe 26]

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.

[Edwin Yip 154]

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.

[luebbe 26]

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

[Vincent Parrett 765]

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. 

[luebbe 26]

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.

[Carlo Barazzetta 116]

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.

 

[Vincent Parrett 765]

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.

[Carlo Barazzetta 116]

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!

[Edwin Yip 154]

A new SVG rendering option: Free Pascal wrapper for ReSVG.

[Carlo Barazzetta 116]

A  new brick added to this story:
https://github.com/EtheaDev/SVGShellExtensions

A short video/demonstration: