SVG Export from Affinity not maintaining object size and other odd happenings

[JasonClark]

I need help understanding what is happening. There are two issues I'm having and I'll try my best to explain them.

Issue #1: If if create a shape, say a square, that is 10" x 10" and export as an SVG using the "SVG(for export)" preset, if I open the file in Adobe Illustrator the size changes to 18" x 18". In Inkscape the size came in so much bigger (something like 31.5" x 31.5")

Why is this happening and is there any way to correct it? I have tried every SVG export preset and I get the same results every time.

Issue #2: I am trying to send a shape to a vinyl plotter for cutting. I am using Onyx CutServer. When I attempt to open the exported SVG file from Affinity Designer into CutServer, nothing happens, the file does not open. However, if I create and then export the same shape using Adobe Illustrator, the file will open in CutServer with absolutely no problems and at the correct size. Why is the SVG export from Affinity Designer giving me so much trouble?

I have included the code for the files created in both Designer and Illustrator. These are the exact same shapes, same artboard dimensions and both using the default SVG export preset. So what is going on? Thank you all for your help in advance.

SVCAiCode_ai17128346357.txt TestAffinity.txt

[Hangman]

Hi @JasonClark,

Issue #1

There is a bug in the Affinity apps relating to the DPI setting in the SVG Export window... subsequently entering any value there is ignored and so you need to set the Document DPI according to the DPI used by the software you're importing your SVG into...

Illustrator incorrectly uses 72 dpi, Inkscape correctly uses 96 dpi as do many other plotting, laser cutting, die cutting and CAD software...

What document dpi or ppi is the SVG file shown as in Illustrator when opened? Based on the 18" x 18" you mention that would suggest your Affinity Document setting is 130 dpi but that conflicts with the size when opened in Inkscape which is what I'd expect to see if your Affinity document is set to 300 dpi...

(300 / 96) x 100 = 312.50%  | 10" x 312.50% = 31.25"

If the software you're using to open the SVG file uses 72 dpi then you need to set your Affinity Document Setup to 72 dpi, if, as they should, the software you're using to open the SVG file uses 96 dpi then you need to set your Affinity Document Setup to 96 dpi and export the SVG from Affinity apps using the Document resolution...

Issue #2

The short answer is I don't know as I'm not familiar with Onyx CutServer but I noted that your Affinity SVG export uses a colour fill, style="fill:rgb(35,31,32); unlike the Illustrator exported SVG. Does Onyx CutServer accept Fills or only strokes?

What happens if you export your shape with a stroke and no fill using the relevant Affinity Document DPI, does it work then?

 

[JasonClark]

Thank you for your reply. I appreciate your insights.

The document setting in Affinity Designer was set to 300 dpi.  Objects that were created at 10" x 10" in Designer were coming into Illustrator at 18" x 18".

Now, after I read your reply, I went into Designer and changed the document resolution to 72 dpi and exported the file. I did this same operation for 96, 144, 192, and 300 DPI just to see how the size would change when bringing it into Illustrator.

When I go to Illustrator and do File/Open/ *.svg, each and every time the file came in at 8.5" x 8.5"..... 

It didn't seem to matter at all what the document DPI was set to in Affinity, it never opened correctly in Illustrator. But it also did not open at 18" x 18" when set to 300 dpi as it was earlier...I'm not sure what this is telling us but I can't understand why the same operation is producing such different results. I look forward to your thoughts on this.

I also tried putting a stroke on the object with no fill but that did not make a difference when trying to open it in Onyx CutServer.

Edited April 11 by JasonClark

[Hangman]

11 minutes ago, JasonClark said:

When I go to Illustrator and do File/Open/ *.svg, each and every time the file came in at 8.5" x 8.5".

That in itself is very odd and suggests when opened in Illustrator, Illustrator has a document dpi of 255 dpi which makes little sense... My understanding of how Illustrator handles SVG files is that it reads them much as Affinity Designer does at 72 dpi...

When opening a Designer exported SVG in Illustrator can you confirm the document dpi or ppi shown for the opened file in Illustrator?

I'm glad it's no longer opening at 18" x 18" as that made even less sense...

26 minutes ago, JasonClark said:

I also tried putting a stroke on the object with no fill but that did not make a difference when trying to open it in Onyx CutServer.

Could you also try expanding the stroke Layer > Expand Stroke to see if that makes any difference...

I've just done a very quick Google of the Onyx CutServer specs for importing SVG files and it seems to be quite fussy...

One other thought here is that Affinity apps don't currently support SVG User Units, so you end up with...

<g transform="matrix(1,0,0,1,-91.1926,-91.1926)">
    <rect x="96" y="96" width="960" height="960" style="fill:none;stroke:black;stroke-width:5.33px;"/>
</g>

or

<g transform="matrix(1,0,0,1,-284.977,-284.977)">
    <rect x="300" y="300" width="3000" height="3000" style="fill:none;stroke:black;stroke-width:16.67px;"/>
</g>

Depending on the document dpi setting in Designer...

After expanding the stroke, try changing the width and height from 100% to 10 inches to see if that makes any difference and let us know what happens, if anything, when attempting to open the SVG in Onyx CutServer...

<svg width="10in" height="10in" viewBox="0 0 966 966" 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,-93.3333,-93.3333)">
        <path d="M1058.67,1058.67L93.333,1058.67L93.333,93.333L1058.67,93.333L1058.67,1058.67ZM1053.33,98.667L98.667,98.667L98.667,1053.33L1053.33,1053.33L1053.33,98.667Z" />
    </g>
</svg>

[JasonClark]

I'll try that. Thanks for your help thus far.

8 minutes ago, Hangman said:

When opening a Designer exported SVG in Illustrator can you confirm the document dpi or ppi shown for the opened file in Illustrator?

I'm sorry but my experience is limited and I'm not sure how to find out this information. Any suggesions?

[David in Яuislip]

6 minutes ago, JasonClark said:

Any suggesions?

Yes, abandon Affinity like I did

You can try changing the size with a text editor
I've modified <svg width="100%" height="100%" to <svg width="10in" height="10in"
Inkscape & APhoto now see the size properly.
Of course another export from APhoto will revert to <svg width="100%" height="100%"
The Affinity approach works in a webpage but it's lousy for anything else, probably my favourite is:

Inkscape
<ellipse id="path4" cx="160" cy="119" rx="97.4" ry="74.1" fill="none"/>
<text id="text4" fill="#000000" font-family="Arial" font-size="16px" font-weight="bold" stroke-width="3.1" style="line-height:0.5" xml:space="preserve">
<textPath id="textPath4" xlink:href="#path4">
<tspan id="tspan4">text on a path</tspan>
</textPath>
</text>
vs
Affinity
<g>
<g transform="matrix(0.994462,0.105093,-0.105093,0.994462,-2.76762,-5.68435)">
<text x="355.005px" y="455.044px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;fill:#00f;">t</text>
</g>
<g transform="matrix(0.999015,-0.0443668,0.0443668,0.999015,-0.672363,-0.929567)">
<text x="298.852px" y="501.374px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;fill:#00f;">e</text>
</g>
<g transform="matrix(0.971064,-0.23882,0.23882,0.971064,-26.6973,-22.3333)">
<text x="250.293px" y="583.916px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;fill:#00f;">x</text>
</g>
<g transform="matrix(0.925614,-0.378469,0.378469,0.925614,-80.1048,-43.8785)">
<text x="235.086px" y="658.626px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;fill:#00f;">t</text>
</g>
<g transform="matrix(0.8003,-0.5996,0.5996,0.8003,-244.737,-47.3207)">
<text x="225.943px" y="805.982px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;fill:#00f;">o</text>
</g>
<g transform="matrix(0.661524,-0.749924,0.749924,0.661524,-424.354,30.0303)">
<text x="269.042px" y="925.864px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;fill:#00f;">n</text>
</g>
<g transform="matrix(0.403833,-0.914833,0.914833,0.403833,-666.846,332.705)">
<text x="402.975px" y="1076.96px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;fill:#00f;">a</text>
</g>
<g transform="matrix(0.098807,-0.995107,0.995107,0.098807,-714.975,834.957)">
<text x="603.675px" y="1161.19px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;fill:#00f;">p</text>
</g>
<g transform="matrix(-0.098807,-0.995107,0.995107,-0.098807,-576.029,1169.7)">
<text x="745.4px" y="1159.11px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;fill:#00f;">a</text>
</g>
<g transform="matrix(-0.253931,-0.967222,0.967222,-0.253931,-356.505,1388.89)">
<text x="856.971px" y="1110.07px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;fill:#00f;">t</text>
</g>
<g transform="matrix(-0.398931,-0.916981,0.916981,-0.398931,-115.318,1562.56)">
<text x="950.134px" y="1079.66px" style="font-family:'ArialMT', 'Arial', sans-serif;font-size:64px;fill:#00f;">h</text>
</g>
</g>

Ludicrous

[Hangman]

11 minutes ago, JasonClark said:

I'm sorry but my experience is limited and I'm not sure how to find out this information. Any suggesions?

I believe you need to go to Effects > Document Raster Effects Settings to see the current PPI setting in Illustrator (bizarre)...

[JasonClark]

Okay thanks. I opened every one of the files I exported from Designer into Illustrator and the ppi setting in Illustrator shows 600 ppi for them all.

[Hangman]

11 hours ago, JasonClark said:

I opened every one of the files I exported from Designer into Illustrator and the ppi setting in Illustrator shows 600 ppi for them all.

I'm not sure what is going on there... an 8.5" x 8.5" file would suggest an Affinity Designer dpi of 81.6 dpi so I'm really unsure why Illustrator suggests 600 dpi.

Could you let me know whether you can also use PDF files with Onyx CutServer?

This is a wild stab in the dark but let me know what happens with the attached files... I've included a source Affinity Designer file along with an exported SVG and PDF file.

Sticker.afdesign

Sticker.svg

Sticker.pdf

[JasonClark]

Onyx CutServer will not accept pdf files, only .svg and .xml. 

I opened the SVG file you sent into Illustrator and below is a screen capture of how that did. As you can see the file size is different than the original. Illustrator shows it as 8.3933in. x 8.933in. The native Designer file was 3.425in. x 3.425in. 

Again, thank you for your help. You've been more than kind to assist with this. If you think of anything else to try please let me know. Otherwise, I think that for now the obvious solution is to use Illustrator to send cut files to Onyx CutServer until Affinity can resolve these issues in a future update (if they consider it important which I hope they do).

 

 

[Hangman]

I think the 600 dpi resolution shown is simply giving you the choice to select a resolution from the dropdown but I'm not completely sure...

Could you take a look at the attached SVG which I've now edited and let me know what size it opens up in with Illustrator...

Also, what happens if you attempt to open it using ONYX CUT-Server?

Sticker v2.svg

[JasonClark]

When opening the file into Illustrator it came in extremely small at .048 inches. (see screencapture2.jpg)

However, this time when attempting to open the SVG file in CutServer it did open (as shown in screencapture3.jpg) but there was nothing there, no cut path and the size of the file shows 0x0. But at least this is some kind of progress. 😀

[JasonClark]

Oh, and I will note that the file you sent was also very small. So in this case Illustrator did open the SVG file at the correct size. I forgot to mention that earlier. So again, this is progress.

[Hangman]

Thanks for the update...

The attached SVG should now open in Illustrator at the correct size, fingers crossed... Could you also test it in Onyx Cut-Server to see if you see the same issue as before?

I've assumed the Thru-cut to be 1 pt and the Kiss to be 0.1 pt but again, let me know if they need to be a specific weight. I'm also assuming the Thru-cut and Kiss can be any spot colour rather than specific spot colours but again if you could confirm that would be really helpful...

The file I put together was just a guess so I'm unsure if I structured it correctly. Could you send me a simple Illustrator file with all the relevant Layers showing how they should be laid out and how they should be labelled, e.g., should they be labelled specifically as CutContour, Through, Kiss etc., or does it not matter how they're labelled?

I feel we're getting closer and I think the sample Illustrator file will help a lot...

Sticker v3.svg

[JasonClark]

My friend you are awesome! Whatever you are doing is working. So, this v3 file you sent opened at the correct size in Illustrator, same as in Designer. That is great!

CutServer though did better but no home run just yet. As shown in the screencapture4.jpg, it did open in CutServer and at the right size but there is no path showing up. There would normally be an outline of the path shown in the viewing window. 

But again, this is good progress. If you don't mind sharing, what are you doing to make this work so far?

 

[Hangman]

The simple issue is as I think we discussed above in the thread, Affinity apps don't use user units but rather percentages... so all I've done with the last SVG is to manually set the size to 3.5" x 3.5" which is why both Illustrator and Cut-Server now recognise the size correctly...

Do you happen to have a simple sample Illustrator file you can share so I can see how it should be structured... that may be the final piece in the puzzle in figuring out why CutServer is not showing any path...

2 hours ago, JasonClark said:

Onyx CutServer will not accept pdf files, only .svg and .xml.

Are you using the Thrive RIP-Queue? I ask because from what I looked at it shows it as accepting PDF files so I was just trying to understand if this is only on certain versions or whether you're not using the same RIP...

[JasonClark]

I've attached a simple file created in Illustrator. I should note that the artboard was 6" x 6" and the shape was 5" x 5". I saved the file as an SVG and have attached that also. I opened it into CutServer and took a screen capture (also attached). You can see that it opened in CutServer just fine and you can see the outline of the shape. The document size shows 6"x6", so I would think logically that is because it is reading the artboard dimensions. Hope this helps you narrow this down.

 

test_shape.ai test_shape.svg

[Hangman]

Thanks for the files...

Based on your sample file the attached file 'should' in theory work in Cut-Server but let me know if it does or doesn't... Exported files in a Designer SVG always appear in Layers (Capital L) so I'm wondering whether that is causing issues in Cut Server. If the file is again blank I would have to assume that may be part of the problem...

Question
Are you using a specific Cutter Path Prefix for the Graphtec FC8600 in the Quick Set Option of Cut Server, e.g., Layer 1 or CutContour_Perf, CutContour_Kiss etc?

Note: This file is 4" x 4" and the graphic is 3.5" x 3.5"

AD Test.svg

 

This one is 6" x 6"

Sticker v5.svg

[JasonClark]

The file did "open" in CutServer and the dimensions do show 4"x4" however there is no outline of the shape as before.

In the case of opening an SVG file in CutServer as a "cut only" job, it does not have to have a specific prefix. That would be the case if I were outputting an image to a printer then contour cutting that image later. In which case we name the cut path CutContour. I am wanting to cut paths on pigmented vinyl without crop marks, just load the vinyl in the machine, load the vector paths and cut the job. I've attached the instruction sheet from Onyx regarding that procedure.ONYX-Cut-Only.pdf

Thanks again for your help and suggestions.

[Hangman]

6 minutes ago, JasonClark said:

The file did "open" in CutServer and the dimensions do show 4"x4" however there is no outline of the shape as before.

The only difference I can see between the SVG file you kindly uploaded and the one I sent you is that, as mentioned above, the Designer generated SVG appears in an OCG Layer vs the Illustrator version that doesn't...

Illustrator SVG Left | Designer SVG Right

You'll have to excuse the dumb questions, I'm on Mac so can't install Onyx Cut-Server so I'm having to go by what I'm Googling and viewing on YouTube but when the SVG is loaded in Cut-Server is there any option to view sub or nested layers?

Thanks for the link, I'll give that a read and see if it throws up anything obvious to explain why the Designer exported SVGs are not currently working. At the moment it makes little sense as to why they're not working based on the very basic files we're looking at...

Many thanks for your patience in the meantime...

[JasonClark]

I'll get back on this next week. Thank you friend for your help and attention. Have a good weekend.

[Hangman]

11 hours ago, JasonClark said:

'll get back on this next week. Thank you friend for your help and attention. Have a good weekend.

No problem... I think I've identified one of the main issues so hopefully, one or both of the attached SVG files will be one step closer...

Let me know how these look in Cut-Server...

Sticker v1.svg Sticker v2.svg

[JasonClark]

Hello again. I tried the two attachments and while both did "open" in CutServer, there was no cut path that came in, just a blank screen as before.