(UTC)
  The MindFusion Forums › Flow Diagramming Components › Windows Forms › SVG incorrectly rendered
(Moderator: Slavcho)
‹ Previous Topic | Next Topic ›
Page Index Toggle Pages: 1 Send TopicPrint
Normal Topic SVG incorrectly rendered (Read 1370 times)
rdwheeler
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 15
Joined: May 28th, 2008
SVG incorrectly rendered
Nov 2nd, 2022 at 5:29pm
Print Post  
I'm having trouble with the rendering of a simple SVG in vs 6.8.4. I'm attaching a screenshot of the shape as rendered in Illustrator, and then as rendered by SvgNode. Here is the actual SVG string:

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150">
  <g id="SettingsButton">
    <g id="Circle">
      <circle cx="75" cy="75" r="71.5" style="fill: #2a5f55;"/>
      <path d="M75,7c37.5,0,68,30.5,68,68s-30.5,68-68,68S7,112.5,7,75,37.5,7,75,7m0-7C33.58,
0,0,33.58,0,75s33.58,75,75,75,75-33.58,75-75S116.42,0,75,0h0Z" style="fill: #2a3f55;"/>
    </g>
    <path id="GearIcon" d="M81.86,27h-13.71s-2.4,15.09-2.4,15.09c-2.74,.69-5.14,1.71-7.2,3.09l-12.34-8.9
1-9.6,9.6,8.91,12.34c-1.37,2.4-2.4,4.8-3.09,7.2l-15.43,2.74v13.71s15.09,2.4,15.0
9,2.4c.69,2.74,1.71,5.14,3.09,7.2l-8.91,12.69,9.6,9.6,12.34-8.91c2.4,1.37,4.8,2.
4,7.2,3.09l2.74,15.09h13.71s2.4-15.09,2.4-15.09c2.74-.69,5.14-1.71,7.2-3.09l12.3
4,8.91,9.6-9.6-8.91-12.34c1.37-2.4,2.4-4.8,3.09-7.2l15.43-2.74v-13.71s-15.09-2.4
-15.09-2.4c-.69-2.74-1.71-5.14-3.09-7.2l8.91-12.34-9.6-9.6-12.34,8.91c-2.4-1.37-
4.8-2.4-7.2-3.09l-2.74-15.43Zm6.98,48c.22,17.75-27.61,17.75-27.38,0-.22-17.75,27
.61-17.75,27.38,0Z" style="fill: #fcb01a;"/>
  </g>
</svg>
  
In_Illustrator.png ( 2 KB | 52 Downloads )
In_Illustrator.png
In_SvgNode.png ( 2 KB | 52 Downloads )
In_SvgNode.png
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3153
Joined: Oct 19th, 2005
Re: SVG incorrectly rendered
Reply #1 - Nov 3rd, 2022 at 8:13am
Print Post  
Well, it looks worse in browsers, or maybe the forum software has rendered incorrectly the XML you've copied -
https://mindfusion.eu/_samples/gear.svg

Our developer suspects we don't support correctly the S shortcut syntax for cubic Bezier curves, you might try replacing these with full C commands.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3153
Joined: Oct 19th, 2005
Re: SVG incorrectly rendered
Reply #2 - Nov 3rd, 2022 at 9:23am
Print Post  
The S path element is supposed to follow another curve to reflect its control point, and since it's not in the gear SVG, the node was drawing some random points. This build should fix that -

https://mindfusion.eu/_temp/fcnet_svg_s.zip

Also the S curves in the gear have overlapping points, meaning they describe straight line segments, so you could replace them with L for a bit faster parsing and drawing.

Regards,
Slavcho
Mindfusion
  
Back to top
 
IP Logged
 
rdwheeler
YaBB Newbies
*
Offline


I love YaBB 1G - SP1!

Posts: 15
Joined: May 28th, 2008
Re: SVG incorrectly rendered
Reply #3 - Nov 9th, 2022 at 5:51pm
Print Post  
The new build work; thank you gentlemen!
FYI, I am no SVG expert so appreciate the advice on optimizing my SVG. So, I looked into getting the same code optimized to the below. However, while that loads fine in Chrome, it throws an "Index out of range error" when loaded via

                             var doc = new XmlDocument();
                             doc.Load(new MemoryStream(svgString.ToBytes()));
                             Content = new SvgContent();
                             Content.Parse(doc);

<svg xmlns="http://www.w3.org/2000/svg" width="150" height="150" viewBox="0 0 150 150"><circle cx="75" cy="75" r="71.5" fill="#2a5f55"/><path fill="#2a3f55" d="M75 7c37.5 0 68 30.5 68 68s-30.5 68-68 68S7 112.5 7 75 37.5 7 75 7m0-7C33.58 0 0 33.58 0 75s33.58 75 75 75 75-33.58 75-75S116.42 0 75 0z"/><path fill="#fcb01a" d="M81.86 27H68.15l-2.4 15.09c-2.74.69-5.14 1.71-7.2 3.09l-12.34-8.91-9.6 9.6 8.91 12.34c-1.37 2.4-2.4 4.8-3.09 7.2L27 68.15v13.71l15.09 2.4c.69 2.74 1.71 5.14 3.09 7.2l-8.91 12.69 9.6 9.6 12.34-8.91c2.4 1.37 4.8 2.4 7.2 3.09l2.74 15.09h13.71l2.4-15.09c2.74-.69 5.14-1.71 7.2-3.09l12.34 8.91 9.6-9.6-8.91-12.34c1.37-2.4 2.4-4.8 3.09-7.2l15.43-2.74V68.16l-15.09-2.4c-.69-2.74-1.71-5.14-3.09-7.2l8.91-12.34-9.6
-9.6-12.34 8.91c-2.4-1.37-4.8-2.4-7.2-3.09l-2.74-15.43zm6.98 48c.22 17.75-27.61 17.75-27.38 0-.22-17.75 27.61-17.75 27.38 0z"/></svg>
  
Back to top
 
IP Logged
 
Slavcho
YaBB Moderator
*****
Offline


tech.support

Posts: 3153
Joined: Oct 19th, 2005
Re: SVG incorrectly rendered
Reply #4 - Nov 11th, 2022 at 8:10am
Print Post  
Our parser doesn't like the c-2.74.69 path command. Adding a space before the second dot fixes it.

Regards,
Slavcho
MindFusion
  
Back to top
 
IP Logged
 
Page Index Toggle Pages: 1
Send TopicPrint
‹ Previous Topic | Next Topic ›
 
  « Board Index ‹ Board Top  

The MindFusion Forums » Powered by YaBB 2.6.11!
YaBB Forum Software © 2000-2024. All Rights Reserved.

Valid RSS Valid XHTML Valid CSS Powered by Perl Source Forge