extra data coming along with export of svg

[shotfun]

so im using designer to create an svg that then goes to a piece of software called easel. easel creates the code that runs my cnc router. when I make the ring via the donut creator, it looks fine in designer but then when I drag it over to easel im bringing along a whole circle instead of a ring. im going to do a screen recording and hopefully someone can correct me on what im doing wrong. thanks in advance and I hope everyone is having a great weekend.   jonny 

Edited November 21, 2021 by shotfun

[Dan C]

Hi @shotfun,

Welcome to the Affinity Forums

Unfortunately I'm unable to download your screen recording, however I'd recommend making sure to convert the object to a Curves object before exporting to SVG, as it may be that Easel is unable to recognise the doughnut 'quick shape' used in Designer.

To do this, please select the object in the Layers Studio, then navigate to Layer > Convert to Curve and try exporting the SVG once again - is this now correctly recognised in Easel please?

[v_kyr]

2 hours ago, Dan C said:

...I'd recommend making sure to convert the object to a Curves object before exporting to SVG, as it may be that Easel is unable to recognise the doughnut 'quick shape' used in Designer.

Well, I'm afraid that won't do much as default (with default SVG export settings) for the OP here, since either way always the same SVG code will be generated. - Further note, that for the SVG export, there isn't anything Affinity specifically related created for a donat/ring 'quick shape' here at all. Thus saving the Affinity shape here, or converted curves, will always generate the same code as default here.

Since a quickly performed ...

Quote

> opendiff test-svg.svg test-svg2.svg

... shows us for the either way generated SVG code here ...

... and so no difference in the generated SVG code then at all!

The problem he runs in might be (not completely sure on this, since I don't know that easel software and how that uses/interprets SVG) that either the defined style fill rule ...

• style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"

or the SVG transformation matrix used in the generated SVG code might be interpreted differently by that easel software.

 

However, at least for the in the SVG code generated "transformation matrix" what the OP can try out instead is, to check/enable under the SVG "more" settings the "reduce transformations" checkbox before exporting. This will create/generate SVG code without a "transform matrix". Then he has to retry if that possibly changes the behavior when importing the SVG in that easel software. - If that doesn't change the behavior, then it has to be due to the in the SVG code used "fill-rule style" and this would then have to be manually altered in code!

 

 

[shotfun]

3 hours ago, Dan C said:

Hi @shotfun,

Welcome to the Affinity Forums

Unfortunately I'm unable to download your screen recording, however I'd recommend making sure to convert the object to a Curves object before exporting to SVG, as it may be that Easel is unable to recognise the doughnut 'quick shape' used in Designer.

To do this, please select the object in the Layers Studio, then navigate to Layer > Convert to Curve and try exporting the SVG once again - is this now correctly recognised in Easel please?

so I gave it a go by converting to layers. still brought the middle of the circle with it. any idea how to just make a ring in affinity? this is super weird. I think its because im more familiar with a raster than a vector. its just beyond me at the moment 

[shotfun]

1 hour ago, v_kyr said:

Well, I'm afraid that won't do much as default (with default SVG export settings) for the OP here, since either way always the same SVG code will be generated. - Further note, that for the SVG export, there isn't anything Affinity specifically related created for a donat/ring 'quick shape' here at all. Thus saving the Affinity shape here, or converted curves, will always generate the same code as default here.

Since a quickly performed ...

... shows us for the either way generated SVG code here ...

... and so no difference in the generated SVG code then at all!

The problem he runs in might be (not completely sure on this, since I don't know that easel software and how that uses/interprets SVG) that either the defined style fill rule ...

• style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"

or the SVG transformation matrix used in the generated SVG code might be interpreted differently by that easel software.

 

However, at least for the in the SVG code generated "transformation matrix" what the OP can try out instead is, to check/enable under the SVG "more" settings the "reduce transformations" checkbox before exporting. This will create/generate SVG code without a "transform matrix". Then he has to retry if that possibly changes the behavior when importing the SVG in that easel software. - If that doesn't change the behavior, then it has to be due to the in the SVG code used "fill-rule style" and this would then have to be manually altered in code!

 

 

ok...this is possibly one of the most informative and helpful responses ive had in years. I really appreciate the thorough examination of my issue. I couldn't find reduce transformations I could only find "flatten transforms".   I could quite possibly be making a mountain out of a molehill. all I really want is to be able to make a ring. just a ring like a coffee cup on a table. a nice smooth round circle with no data in the middle. I know this seems weird as its basic and I do it in other software...but how do I just make a ring in affinity? thanks again so much for the insightful help. so appreciated 

I count

[Old Bruce]

You may be able to get better information about this on the "easel" forums. I for one have no experience with the various file formats easel can use.

In Designer you can try reversing the inner curve or the outer curve, you could try changing the Fill Mode.

[v_kyr]

Seen online ...

• Easel - SVG Import Guide

... though honestly they don't tell much useful/helpful there for users about their SVG import (SVG parsing and interpretation). - Thus their easel forum might be a better place to ask for the OP then.

For the SVG fill-rule property handling, see for example:

• Understanding the SVG fill-rule Property

 

[shotfun]

Just now, v_kyr said:

Seen online ...

• Easel - SVG Import Guide

... though honestly they don't tell much useful/helpful there for users about their SVG import (SVG parsing and interpretation). - Thus their easel forum might be a better place to ask for the OP then.

thanks a bunch. ill get in there and start messing with those dudes. so let me ask you a question that might make my approach a little easier. how can I make a simple ring in affinity? thanks in advance.

[shotfun]

13 minutes ago, BofG said:

It's indeed "flatten transforms".

awesome. thanks

[v_kyr]

Here is a simple small (w=42, h=42, center at cx= 21, radius r = 15.915, stroke-width = 5) donut/ring one via plain SVG code, you can open in and preview in a browser like Firefox etc.

<?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 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle class='donut-hole' cx='21' cy='21' r='15.91549430918954' fill='#fff'></circle>
  <circle class='donut-ring' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#FF0000' stroke-width='5'></circle>
</svg> 

• donut.svg

[shotfun]

10 minutes ago, v_kyr said:

Here is a simple small (w=42, h=42, center at cx= 21, radius r = 15.915, stroke-width = 5) donut/ring one via plain SVG code, you can open in and preview in a browser like Firefox etc.

<?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 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <circle class='donut-hole' cx='21' cy='21' r='15.91549430918954' fill='#fff'></circle>
  <circle class='donut-ring' cx='21' cy='21' r='15.91549430918954' fill='transparent' stroke='#FF0000' stroke-width='5'></circle>
</svg> 

• donut.svg

ok perfect. so I imported that into easel and its giving me the same issue I was having. this leads me to believe its an easel issue and ive opened up a thread over there. thanks so much for your input. eliminating issues is a great way to problem solve. you've removed my worry that the output from affinity was weird. its not. its input on easel

[shotfun]

16 minutes ago, BofG said:

I'm throwing a spanner in here...

That example from v_kyr is just two circles, one in front of the other with a white fill.

Visually it's "correct" but for what you want, you need a true single path with an "inside" to it. You have to subtract the inner circle from the outer one. The problem may be related to the fill mode. Try exporting one with it set to "even odd" and one set to "winding" (I think those are the names Affinity uses, anyway there are only two options).

ill give it a go now.. ive been trying this with just the pen and making a rough circle. even when I export that I get the middle full of "fill" black fill. I totally understand what youre saying about visually correct as opposed to correct for paths for a physical world router. thanks so much and im going to try now. 

[v_kyr]

For the SVG format and it's common "fill-rule" property handling, see for example also:

• Understanding the SVG fill-rule Property

You can copy also the examples from there out of the HTML code shown (always only copy all between and including the --> <svg ... </svg> shown there) in order to try out that SVG stuff then in that easel software. So you can see if it possibly makes a difference there or not!

[v_kyr]

You can also tryout this SVG here in that easel software with no fill-rule at all.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 297 297" style="enable-background:new 0 0 297 297;" xml:space="preserve">
<g>
    <path d="M64.895,207.274c-2.139,0-4.226,0.871-5.727,2.371c-1.51,1.511-2.381,3.607-2.381,5.736c0,2.137,0.871,4.226,2.381,5.735
        c1.501,1.509,3.598,2.371,5.727,2.371c2.138,0,4.226-0.862,5.735-2.371c1.51-1.51,2.371-3.599,2.371-5.735
        c0-2.129-0.861-4.226-2.371-5.736C69.121,208.145,67.033,207.274,64.895,207.274z"/>
    <path d="M98.336,190.555c-2.129,0-4.226,0.86-5.735,2.371c-1.501,1.51-2.371,3.597-2.371,5.735c0,2.138,0.87,4.226,2.371,5.735
        c1.52,1.51,3.606,2.371,5.735,2.371c2.138,0,4.226-0.861,5.735-2.371c1.51-1.51,2.371-3.598,2.371-5.735
        c0-2.139-0.861-4.226-2.371-5.735C102.561,191.415,100.474,190.555,98.336,190.555z"/>
    <path d="M64.895,173.834c-2.129,0-4.216,0.861-5.727,2.371c-1.51,1.51-2.381,3.607-2.381,5.735c0,2.138,0.871,4.226,2.381,5.736
        c1.511,1.509,3.598,2.371,5.727,2.371c2.138,0,4.226-0.862,5.735-2.371c1.51-1.511,2.371-3.608,2.371-5.736
        c0-2.128-0.861-4.226-2.371-5.735C69.121,174.695,67.033,173.834,64.895,173.834z"/>
    <path d="M148.5,0C66.634,0,0.031,66.617,0.031,148.5S66.634,297,148.5,297s148.469-66.617,148.469-148.5S230.366,0,148.5,0z
         M148.5,20.268c70.69,0,128.201,57.524,128.201,128.232c0,20.358-4.775,39.619-13.252,56.733
        c-53.179-0.586-69.68-23.368-72.181-27.393c5.639-8.371,8.941-18.473,8.941-29.341c0-28.82-23.197-52.267-51.71-52.267
        c-25.081,0-46.042,18.146-50.726,42.13c-57.643-0.11-72.179-17.161-72.918-23.771C39.76,60.287,89.541,20.268,148.5,20.268z
         M148.5,180.5c-17.338,0-31.442-14.355-31.442-32s14.104-32,31.442-32c17.338,0,31.442,14.355,31.442,32S165.838,180.5,148.5,180.5
        z M148.5,276.732c-70.69,0-128.201-57.524-128.201-128.232c0-2.528,0.082-5.038,0.227-7.53
        c15.819,11.659,41.788,17.598,77.248,17.661c4.682,23.986,25.644,42.136,50.727,42.136c10.411,0,20.106-3.137,28.23-8.509
        c7.797,9.925,28.716,29.351,74.598,32.74C227.935,256.376,190.55,276.732,148.5,276.732z"/>
</g>
</svg>

• donut-nofillrule.svg

[shotfun]

7 minutes ago, v_kyr said:

You can also tryout this SVG here in that easel software with no fill-rule at all.

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 297 297" style="enable-background:new 0 0 297 297;" xml:space="preserve">
<g>
    <path d="M64.895,207.274c-2.139,0-4.226,0.871-5.727,2.371c-1.51,1.511-2.381,3.607-2.381,5.736c0,2.137,0.871,4.226,2.381,5.735
        c1.501,1.509,3.598,2.371,5.727,2.371c2.138,0,4.226-0.862,5.735-2.371c1.51-1.51,2.371-3.599,2.371-5.735
        c0-2.129-0.861-4.226-2.371-5.736C69.121,208.145,67.033,207.274,64.895,207.274z"/>
    <path d="M98.336,190.555c-2.129,0-4.226,0.86-5.735,2.371c-1.501,1.51-2.371,3.597-2.371,5.735c0,2.138,0.87,4.226,2.371,5.735
        c1.52,1.51,3.606,2.371,5.735,2.371c2.138,0,4.226-0.861,5.735-2.371c1.51-1.51,2.371-3.598,2.371-5.735
        c0-2.139-0.861-4.226-2.371-5.735C102.561,191.415,100.474,190.555,98.336,190.555z"/>
    <path d="M64.895,173.834c-2.129,0-4.216,0.861-5.727,2.371c-1.51,1.51-2.381,3.607-2.381,5.735c0,2.138,0.871,4.226,2.381,5.736
        c1.511,1.509,3.598,2.371,5.727,2.371c2.138,0,4.226-0.862,5.735-2.371c1.51-1.511,2.371-3.608,2.371-5.736
        c0-2.128-0.861-4.226-2.371-5.735C69.121,174.695,67.033,173.834,64.895,173.834z"/>
    <path d="M148.5,0C66.634,0,0.031,66.617,0.031,148.5S66.634,297,148.5,297s148.469-66.617,148.469-148.5S230.366,0,148.5,0z
         M148.5,20.268c70.69,0,128.201,57.524,128.201,128.232c0,20.358-4.775,39.619-13.252,56.733
        c-53.179-0.586-69.68-23.368-72.181-27.393c5.639-8.371,8.941-18.473,8.941-29.341c0-28.82-23.197-52.267-51.71-52.267
        c-25.081,0-46.042,18.146-50.726,42.13c-57.643-0.11-72.179-17.161-72.918-23.771C39.76,60.287,89.541,20.268,148.5,20.268z
         M148.5,180.5c-17.338,0-31.442-14.355-31.442-32s14.104-32,31.442-32c17.338,0,31.442,14.355,31.442,32S165.838,180.5,148.5,180.5
        z M148.5,276.732c-70.69,0-128.201-57.524-128.201-128.232c0-2.528,0.082-5.038,0.227-7.53
        c15.819,11.659,41.788,17.598,77.248,17.661c4.682,23.986,25.644,42.136,50.727,42.136c10.411,0,20.106-3.137,28.23-8.509
        c7.797,9.925,28.716,29.351,74.598,32.74C227.935,256.376,190.55,276.732,148.5,276.732z"/>
</g>
</svg>

• donut-nofillrule.svg

ok...so this no fill rule issue seems to be whats going on. here's a screen shot of what appears to be a Pokemon ball with the no fill rule applied. its what ive been trying to figure out. so how do you apply this to the files im creating? 

[shotfun]

1 hour ago, BofG said:

Layer > geometry > fill mode

 

this is what im getting. fill mode doesn't appear to be in the layers>geometry ladder

[Old Bruce]

[shotfun]

1 hour ago, BofG said:

Layer > geometry > fill mode

 

sorry. I found it down low.   still has no options. sorry about my laziness

[Old Bruce]

Because It is still a Donut. Convert to curves.