{"id":517,"date":"2018-06-28T06:29:12","date_gmt":"2018-06-28T06:29:12","guid":{"rendered":"http:\/\/www.bverhue.nl\/delphisvg\/?p=517"},"modified":"2018-06-28T06:36:13","modified_gmt":"2018-06-28T06:36:13","slug":"v2-20-update-11","status":"publish","type":"post","link":"https:\/\/www.bverhue.nl\/delphisvg\/2018\/06\/28\/v2-20-update-11\/","title":{"rendered":"v2.20 update 11"},"content":{"rendered":"

Here are a couple of things that are new or improved in update 11. For a full list, see the change log<\/a>.<\/p>\n

Added “AspectRatioAlign” and “AspectRatioMeetOrSlice” to SVG controls<\/strong><\/p>\n

It was already possible to automatically add a viebox to SVG graphics that don’t have one defined with the property “AutoViewbox”.<\/p>\n

I have now added the properties “AspectRatioAlign” and “AspectRatioMeetOrSlice”. These properties give you further control how the SVG graphic is aligned within the control bounds.<\/p>\n

Below you see the effect of setting the “AutoViewbox” property.<\/p>\n

\"\"<\/a><\/p>\n

If “AutoViewbox” = FALSE, the SVG graphic will be rendered exactly as defined in the SVG graphic itself, if it is bigger than the SVG control, it will be clipped.<\/p>\n

If “AutoViewbox” = TRUE, the SVG graphic will be aligned within the control according to the “AspectRatioAlign’ and “AsectRatioMeetOrSlice” settings, the default setting is “xMid yMid Meet”.<\/p>\n

 <\/p>\n

Here you see different settings for “AspectRatioAlign” and “AspectRatioMeetOrSlice”, these are equivalent to the settings of the SVG “preserveAspectRatio<\/a>” attribute.<\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

Improved rendering quality for rotated SVG graphics<\/strong><\/p>\n

On FMX you can rotate and scale controls. The SVG renderer in update 11 contains a new algorithm for calculating internal bitmap buffers, for things like filters and masks. This gives much better results for transformed controls.<\/p>\n

Below you see de difference between the graphic rendered with update 10 left, and update 11 right.<\/p>\n\n\n\n
\"\"<\/a><\/td>\n\"\"<\/a><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

This also works on VCL, although in Delphi, you don’t have properties on the VCL controls to scale or rotate, you might have SVG graphics that have a transformation defined on the outer SVG element.<\/p>\n

 <\/p>\n

Support for “fill-rule” and “clip-rule” attributes
\n<\/strong><\/p>\n

These attributes<\/a> give you control over how an path element is filled.<\/p>\n

\"\"<\/a><\/p>\n

This attribute is not supported for all platforms, see table below.<\/p>\n\n\n\n\n\n\n\n
SVG Render context<\/strong><\/td>\nVCL<\/strong><\/td>\nFMX<\/strong><\/td>\n<\/tr>\n
Direct2D<\/td>\nYes<\/td>\nn.a.<\/td>\n<\/tr>\n
GDI+<\/td>\nNo<\/td>\nn.a.<\/td>\n<\/tr>\n
Aggpas<\/td>\nYes<\/td>\nYes<\/td>\n<\/tr>\n
FMX canvas<\/td>\nn.a.<\/td>\nNo<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

The standard SVG render context for VCL is “Direct2D”, for FMX the standard is “FMX canvas”. You can overrule the stanard render context in the SVG control package by setting compiler directives in the “CompilerSettings.inc” file.<\/em><\/p>\n

 <\/p>\n

Improved parsing speed for pathdata<\/strong><\/p>\n

For testing the parsing speed I use an SVG graphic with a very large amount of path elements: the\u00a0Rose-Breasted-Groesbeck.svg<\/a>. This SVG graphic has 36832 path elements.<\/p>\n

\"\"<\/a><\/p>\n\n\n\n\n
<\/td>\nUpdate 10<\/td>\nUpdate 11<\/td>\n<\/tr>\n
Parsing time in ms<\/td>\n8703<\/td>\n5766<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

 <\/p>\n","protected":false},"excerpt":{"rendered":"

Here are a couple of things that are new or improved in update 11. For a full list, see the change log. Added “AspectRatioAlign” and “AspectRatioMeetOrSlice” to SVG controls It was already possible to automatically add a viebox to SVG graphics that don’t have one defined with the property “AutoViewbox”. I have now added the … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":514,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-517","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/posts\/517","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/comments?post=517"}],"version-history":[{"count":17,"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/posts\/517\/revisions"}],"predecessor-version":[{"id":672,"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/posts\/517\/revisions\/672"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/media\/514"}],"wp:attachment":[{"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/media?parent=517"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/categories?post=517"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bverhue.nl\/delphisvg\/wp-json\/wp\/v2\/tags?post=517"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}