SVG add/subract paths/nodes

[GFS]

I don't use AFD much, being more an AFP user, but I'm trying to adapt some SVG icons that were made for Filemaker Pro and I can't work out how they were done.  What I'm producing in AFD works, but not in Filemaker (which doesn't support all SVG styles).

Below is a grab of a simple icon in AFD.  The 3 transparent rectangle/areas on the right (green circle) were already part of the icon, but the one on the left (red) I added myself.  It seems okay, but once imported into Filemaker, the red circled area on the left, that I made in AFD, is no longer transparent.

I can see in AFD that they behave differently when using Add/Subtract, so clearly they are different ... I just don't understand how they are different and therefore, how I can replicate the green circled area on the right.  Can anyone enlighten me?

I enclose the very simple AFD file, which will be easier to understand (except for me) and also the original SVG that I'm trying to adapt/change.

Any help, much appreciated. 😊

 

 

 

 

FM-icons.AFDesign.zip

To_Do_Bar.svg

 

 

[v_kyr]

Check your SVG export settings.

1. Your SVG ...

   <?xml version="1.0" encoding="utf-8"?> 
   <svg version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
   	 x="0px" y="0px" width="50px" height="50px" viewBox="0 0 64 55.33"> 
   <path d="M45.780029,44.962431L45.780029,47.54265 59.670044,47.54265 59.670044,44.962431z M45.780029,38.292143L45.780029,40.87224 59.670044,40.87224 59.670044,38.292143z M45.780029,31.621733L45.780029,34.211839 59.670044,34.211839 59.670044,31.621733z M47.779999,10.960089L57.672001,10.960089 57.672001,22.460089 47.779999,22.460089z M45.780029,8.9604538L45.780029,24.461305 59.670044,24.461305 59.670044,8.9604538z M0,0L64,0 64,55.332998 42.670044,55.332998 42.670044,7.190336 62.890015,7.190336 62.890015,0.99004457 1.2301025,0.99004457 1.2301025,7.190336 39.840088,7.190336 39.840088,55.332998 0,55.332998z"/> 
   </svg>

2. Now your AFD file exported as SVG, or when copying over it's curves layer as SVG code over into an editor ...

   <?xml version="1.0" encoding="UTF-8" standalone="no"?>
   <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
   <svg width="100%" height="100%" viewBox="0 0 24 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
       <g transform="matrix(1,0,0,1,0,-1)">
           <g transform="matrix(1,0,0,1,-255.638,-212)">
               <path d="M255.638,213L279.638,213L279.638,234.375L271.64,234.375L271.64,216.321L279.222,216.321L279.222,213.996L256.1,213.996L256.1,216.321L270.578,216.321L270.578,234.375L255.638,234.375L255.638,213ZM272.806,229L272.806,233L278.015,233L278.015,229L272.806,229ZM257.638,219L268.638,219L268.638,232L257.638,232L257.638,219ZM272.806,223.029L272.806,227L278.015,227L278.015,223.029L272.806,223.029ZM272.806,216.985L272.806,221L278.015,221L278.015,216.985L272.806,216.985Z"/>
           </g>
       </g>
   </svg>

3. Result in FF (firefox) ...
   

 

You can also enable "copy as SVG" in the AD preferences and then select in AD your curves layer and copy/paste that over into a text editor, in order to see the SVG code AD would generate for that layer.

[lepr]

Open the .afdesign file. Select the Curves object and do Layer > Fill Mode > Winding so that you are working with the object as it will be interpreted by Filemaker because FileMaker does not support the Alternate fill mode. The path of the interior rectangle which is failing to be transparent needs to have its orientation flipped, so use Node Tool to select any one of its four nodes then press the Reverse button in the context toolbar.

[v_kyr]

For that Filemaker (though never used that, thus can't tell it's specifics) ...

• FileMaker Pro 14 SVG Grammar for Button Icons

• Creating SVG icons for FileMaker

[GFS]

Thank you anon2!  Perfect.

Very useful to know about Winding/Alternate and I'd tried a lot of things, but not the Reverse button.  Sigh...

v_Kyr..  thanks for the pointers.  Yes Filemaker is a little fussy about SVG, but it's getting there.  The crucial part on Export from AFD, is to uncheck 'Set viewBox' in the 'More' settings, otherwise dimensions are set as percentages and Filemaker doesn't read those.  You also have to add some fill attributes after export, in a text editor otherwise the SVG icon doesn't show in the icon selection dialog.

[v_kyr]

55 minutes ago, GFS said:

The crucial part on Export from AFD, is to uncheck 'Set viewBox' in the 'More' settings, otherwise dimensions are set as percentages and Filemaker doesn't read those.  You also have to add some fill attributes after export, in a text editor otherwise the SVG icon doesn't show in the icon selection dialog.

Generally (or better said sadly) the SVG import (parsing) and especially also the output generation of SVG code isn't much flexible adjustable in Affinity products. The viewBox percentage setting has been often an annoying theme here.