Jump to content

Recommended Posts

I use Designer exclusively for technical drawings, some of which I want to publish on the web as SVG.

Here is a screenshot of a Designer drawing (it is an outline of some Lego construction):

31859609_A2018-07-29at18_56_13.jpeg.0ba3c0ca0cb60ce312b64af6032ec875.jpeg

The document unit is pixels, the grid is set to whole pixel numbers and all elements are snapped to the grid and have whole pixel numbers for dimensions; they are all stroked with 1 pixel black.

I expect the SVG elements to be specified in whole numbers and positioned at whole numbers in the viewbox.  However…

When exporting "for export" I get this in Safari:

478162598_A2018-07-29at18_53_30.jpeg.438a9db7dbc601b43b28d01c9e45c7b1.jpeg

When exportine "for web" I get this:

1489564774_A2018-07-29at19_13_06.jpeg.fd7bf8389b3ecef138b7f7a9cad59e8d.jpeg

 

When exporting "for print" I get the same.

However, the svg code is very different.  For web I get:

<?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 842 596" 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-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g id="s-2x3" serif:id="s 2x3">
<path id="profile" d="M86.4,46.081l-15.601,0l0,4.561c1.457,1.095 2.4,2.838 2.4,4.8c0,3.311 -2.689,6 -6,6c-3.312,0 -6.001,-2.689 -6.001,-6c0,-1.962 0.943,-3.705 2.4,-4.8l0,-4.561l-15.6,0l-9.601,-7.68l57.603,0l-9.6,7.68Z" style="fill:#fff;stroke:#000;stroke-width:0.24px;"/>
<circle id="r" cx="67.199" cy="55.442" r="3.84" style="fill:#fff;stroke:#000;stroke-width:0.24px;"/>
<rect id="p-2x3" serif:id="p 2x3" x="38.397" y="30.72" width="57.603" height="7.68" style="fill:#fff;stroke:#000;stroke-width:0.24px;"/>
</g>
<rect id="p-10x2" serif:id="p 10x2" x="57.601" y="23.04" width="192.009" height="7.68" style="fill:#fff;stroke:#000;stroke-width:0.24px;"/>
<rect id="p-1x2" serif:id="p 1x2" x="38.4" y="23.04" width="19.201" height="7.68" style="fill:#fff;stroke:#000;stroke-width:0.24px;"/>
<g id="hand-1x2" serif:id="hand 1x2">
<rect id="p-1x21" serif:id="p 1x2" x="249.61" y="23.018" width="19.202" height="7.68" style="fill:#989595;stroke:#000;stroke-width:0.24px;"/>
<path d="M281.047,30.111c-0.796,0.39 -1.69,0.609 -2.636,0.609c-2.558,0 -4.745,-1.605 -5.607,-3.862l-3.992,0l0,-3.84l3.844,0c0.735,-2.483 3.035,-4.298 5.755,-4.298c0.985,0 1.915,0.238 2.735,0.659l-0.987,1.921c-0.524,-0.268 -1.118,-0.42 -1.747,-0.42c-2.119,0 -3.84,1.721 -3.84,3.84c0,2.119 1.721,3.84 3.84,3.84c0.606,0 1.18,-0.141 1.689,-0.391l0.946,1.942Z" style="fill:#989595;stroke:#000;stroke-width:0.24px;"/>
</g>
</svg>

which is manifestly wrong, for "export" I get:

<?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 3508 2481" 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-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
    <g id="s-2x3" serif:id="s 2x3" transform="matrix(4.0002,0,0,4.0002,-3360.18,-1272.07)">
        <path id="profile" d="M930,366L913.75,366L913.75,370.751C915.268,371.892 916.25,373.707 916.25,375.75C916.25,379.199 913.449,382 910,382C906.551,382 903.75,379.199 903.75,375.75C903.75,373.707 904.732,371.892 906.25,370.751L906.25,366L890,366L880,358L940,358L930,366Z" style="fill:white;stroke:black;stroke-width:0.25px;"/>
        <g id="r" transform="matrix(1.66866,0,0,1.33333,-512.36,-81.5833)">
            <ellipse cx="852.397" cy="343" rx="2.397" ry="3" style="fill:white;stroke:black;stroke-width:0.17px;"/>
        </g>
        <g id="p-2x3" serif:id="p 2x3" transform="matrix(1,0,0,0.950075,-1.13687e-13,17.4736)">
            <rect x="880" y="350" width="60" height="8.42" style="fill:white;stroke:black;stroke-width:0.26px;"/>
        </g>
    </g>
    <g id="p-10x2" serif:id="p 10x2" transform="matrix(32.182,0,0,2.56013,-27923.8,-757.14)">
        <rect x="875.14" y="333.242" width="24.86" height="12.5" style="fill:white;stroke:black;stroke-width:0.04px;"/>
    </g>
    <g id="p-1x2" serif:id="p 1x2" transform="matrix(3.1802,0,0,2.66269,-2304.16,-844.484)">
        <rect x="774.843" y="353.208" width="25.157" height="12.019" style="fill:white;stroke:black;stroke-width:0.34px;"/>
    </g>
    <g id="hand-1x2" serif:id="hand 1x2" transform="matrix(1,0,0,1,-2569.94,64.0778)">
        <g id="p-1x21" serif:id="p 1x2" transform="matrix(-2.0002,1.11619e-16,2.22055e-16,4.02132,6450.26,-2670.66)">
            <rect x="1380" y="672.042" width="40" height="7.958" style="fill:rgb(152,149,149);stroke:black;stroke-width:0.31px;"/>
        </g>
        <g transform="matrix(1,0,0,1,2649.99,-1164.08)">
            <path d="M1090.98,1225.46C1087.66,1227.09 1083.93,1228 1080,1228C1069.34,1228 1060.22,1221.31 1056.63,1211.91L1040,1211.91L1040,1195.91L1056.02,1195.91C1059.08,1185.56 1068.66,1178 1080,1178C1084.1,1178 1087.97,1178.99 1091.39,1180.75L1087.28,1188.75C1085.09,1187.63 1082.62,1187 1080,1187C1071.17,1187 1064,1194.17 1064,1203C1064,1211.83 1071.17,1219 1080,1219C1082.53,1219 1084.91,1218.41 1087.04,1217.37L1090.98,1225.46Z" style="fill:rgb(152,149,149);stroke:black;stroke-width:1px;"/>
        </g>
    </g>
</svg>

 

which has greatly different stroke widths!

And finally for "print" I get:

 

<?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 3508 2481" 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-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g id="s-2x3" serif:id="s 2x3">
<path id="profile" d="M359.998,192.005l-65.003,0l0,19.005c6.071,4.563 10,11.824 10,19.997c0,13.798 -11.202,25.001 -25.001,25.001c-13.798,0 -25.001,-11.203 -25.001,-25.001c0,-8.173 3.929,-15.434 10,-19.997l0,-19.005l-65.003,0l-40.002,-32.002l240.012,0l-40.002,32.002Z" style="fill:#fff;stroke:#000;stroke-width:1px;"/>
<circle id="r" cx="279.994" cy="231.007" r="16.001" style="fill:#fff;stroke:#000;stroke-width:1px;"/>
<rect id="p-2x3" serif:id="p 2x3" x="159.988" y="128.002" width="240.012" height="32.002" style="fill:#fff;stroke:#000;stroke-width:1px;"/>
</g>
<rect id="p-10x2" serif:id="p 10x2" x="240.004" y="96" width="800.039" height="32.002" style="fill:#fff;stroke:#000;stroke-width:1px;"/>
<rect id="p-1x2" serif:id="p 1x2" x="160" y="96" width="80.004" height="32.002" style="fill:#fff;stroke:#000;stroke-width:1px;"/>
<g id="hand-1x2" serif:id="hand 1x2">
<rect id="p-1x21" serif:id="p 1x2" x="1040.04" y="95.91" width="80.008" height="32" style="fill:#989595;stroke:#000;stroke-width:1px;"/>
<path d="M1171.03,125.462c-3.316,1.625 -7.043,2.538 -10.981,2.538c-10.66,0 -19.771,-6.686 -23.363,-16.09l-16.633,0l0,-16l16.018,0c3.059,-10.349 12.643,-17.91 23.978,-17.91c4.104,0 7.978,0.991 11.396,2.746l-4.114,8.004c-2.184,-1.119 -4.658,-1.75 -7.278,-1.75c-8.831,0 -16,7.169 -16,16c0,8.831 7.169,16 16,16c2.525,0 4.914,-0.586 7.038,-1.63l3.939,8.092Z" style="fill:#989595;stroke:#000;stroke-width:1px;"/>
</g>
</svg>

 

which has the stroke widths right, but not the positions nor the dimensions:  those should all be whole numbers!
What am I missing?


Robert

(Affinity Designer—Affinity Photo—LiveCode—Mac OS X various)

Share this post


Link to post
Share on other sites

Sure.

Here is the whole thing.  Try artboard "Main Support".

Thanks a lot for the investigation and certainly for any solution.

It's really irritating, because I think I'm making very simple designs with all whole numbers, and instead I get SVG with all these tons of decimals.

Lego is a fairly whole-number thing…  The designs are to illustrate some mathematical aspects (Pythagorean triangles) of the set 10261

But it may of course be me…

CoasterTriangles.afdesign


Robert

(Affinity Designer—Affinity Photo—LiveCode—Mac OS X various)

Share this post


Link to post
Share on other sites

Do you have the files that contains just the objects in your screenshot and SVG snippets you could attach please? I've can't reproduce the clip element moving as shown in your screenshots (in fact in the file it is already placed on top of the 10x2 plate, instead of next to it.

Unfortunately I don't fully understand SVG coordinate system, so can't say exactly why things are not going out as whole numbers, but I will question it will development.

Share this post


Link to post
Share on other sites

Ok Sean,

There were snippets in my previous post.  However, to be very simple about this I've narrowed it down further.  Attached an afdesign file with just the two rectangles, and three svg files called Export, Web, Print.

Open them with some plain text editor (e.g. BBEdit) and you will see that they are different and contain a lot of numbers with decimals.

Lastly, I wrote my own svg version, which is in Plain.svg.  That has the whole numbers that I expect. And it is very simple.

Using the Transform palette in Designer I also see whole numbers only.

Good luck…

 

By the way,  doing this I noticed another very annoying problem:  I use a grid (see attached two screenshots) with spacings that are adapted to the two Lego spacings (8mm horizontally and 9.6mm vertically).  When I scroll the Designer window up and then down again, the grid has moved with respect to the drawing! The grid does not seem to be anchored to the top-left corner of the artboard.

Export.svg

Plain.svg

Print.svg

Web.svg

SVGproblems.afdesign

A 2018-08-06 at 11.01.27.jpeg

A 2018-08-06 at 11.09.38.jpeg


Robert

(Affinity Designer—Affinity Photo—LiveCode—Mac OS X various)

Share this post


Link to post
Share on other sites

Hi Robert,

Thanks for the file! I've had a look and for whatever reason your objects are not quite pixel aligned. If your decimal places in Preferences > User Interface is set to 1 for Pixels, the UI will round it down/up making it look as though they are actually whole numbers. If you adjust this to 6 decimal places you can see they are ever so slightly off. See attached screenshots and 'corrected' file.

Correcting these values and re-exporting to SVG For Web will give you the whole numbers you want. However the other two still do not - there is two reasons for this.

For Export Preset: The 'Flattern Transforms' tickbox is not enabled in this preset, so won't give the absolute position. 

For Print Preset: The DPI of this preset is set to 300, so is scaling your document size. If you change the Document DPI to 300 (to match this preset) it will correct it (but make the Web one incorrect, as that is set to 72)

So this is not a bug as such, just the problem wasn't immediately visible. It might be worth creating a custom Export Preset as well to use Document's Resolution and also having Flattern Transforms enabled.

I have also reproduced the grid issue and will get that reported to development! :) 

SVGproblems_Resaved.afdesign

Object2.png

Object1.png

Share this post


Link to post
Share on other sites

Thanks Sean.

The preferences were set to 1px.  But also, my transform palette looks like this:

 

45465872_A2018-08-06at16_49_33.jpeg.74f1b67c7c776eedc19b51456ad2a708.jpeg

I never see any decimals there!

And, sorry, I do not quite agree: SVG does not know/should not care about dpi, which is rendering.  I don't even know what "for export" might mean.

It still does not explain why the values would be ever so slightly off.  I type whole numbers, they should remain whole numbers.  The only problem there can be is that certain of those numbers cannot be expressed in binary floating point as whole numbers after some multiplication/division that happens somewhere.

 

Then there remains the problem that in the "for export" case the second rectangle's stroke width is completely wrong:

1527936312_A2018-08-06at16_56_39.jpeg.d35ce1c399f22f425e80c84b64b7a29d.jpeg

 

Thanks for reporting the grid bug.  While you are at it, please also report that two other "bugs" have not been addressed:

(1) on multiple screens the main window opens on the screen where the palettes are, not on the screen with the main menu bar,

(2) some palettes annoyingly open always in the middle of the document window, not where I left them last time, this is especially true for Photo and, for me, especially annoying for the shadow/highlights palette, but there are others.

 

Robert.


Robert

(Affinity Designer—Affinity Photo—LiveCode—Mac OS X various)

Share this post


Link to post
Share on other sites
17 hours ago, Robert Cailliau said:

Thanks Sean.

The preferences were set to 1px.  But also, my transform palette looks like this:

 

45465872_A2018-08-06at16_49_33.jpeg.74f1b67c7c776eedc19b51456ad2a708.jpeg

I never see any decimals there!

Did you change your setting to 6 decimal places and check what values are present? If you don't then the values get rounded down and visually appear as whole numbers, however the decimal values are retained.

You said you've typed your values in however, so there might be something in your workflow that is not keeping them snapped, if you leave decimal places on it might help you narrow down where the inaccuracy is coming from.

Share this post


Link to post
Share on other sites

Hi Sean,

OK.  Setting to 6 decimals lets me see things better (somewhat anyway).

I think I'll be able to "work around" the problems by a combination of settings and discipline.

I did this (always with 6 decimals):

(1) verified that the grid specifications are typed in as whole numbers.

(2) created a rectangle by dragging while snapping is on.  This gives the correct values in both saving "for export" and "web" svgs.

(3) created a random rectangle by dragging with snapping off, then typing whole number values in the transform palette for the width and height, then switching snapping on and moving the rectangle to snap onto the grid.  This gives:

 

For Export:

<?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 986 275" 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-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
    <g id="V-Main-Support" serif:id="V Main Support" transform="matrix(0.358354,0,0,0.0931325,-949.639,0)">
        <rect x="2650" y="0" width="2750" height="2950" style="fill:none;"/>
        <g transform="matrix(2.37674,0,0,9.3998,2632.18,1030.23)">
            <rect x="101.426" y="36.614" width="93.928" height="36.554" style="fill:rgb(206,199,199);stroke:black;stroke-width:3.47px;"/>
        </g>
    </g>
</svg>

 

which is complete rubbish and unusable, whereas saved for web I get:

<?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 986 275" 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-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;"><rect id="V-Main-Support" serif:id="V Main Support" x="0" y="0" width="985.474" height="274.741" style="fill:none;"/><rect x="80" y="128" width="80" height="32" style="fill:#cec7c7;stroke:#000;stroke-width:3px;"/></svg>

which at least has the position and size correct, as well as the stroke width.

So I will have to figure out how to work.  Sometimes I can create elements by dragging, other times I have to type values.

Thanks for your help.


Robert

(Affinity Designer—Affinity Photo—LiveCode—Mac OS X various)

Share this post


Link to post
Share on other sites

Sorry, still cannot get it right.  Must be doing something wrong. I now have Designer version 1.7.0.

I create a new document (attached), with the settings as:121455159_A2019-06-24at14_54_17.thumb.jpeg.f1cc428a32805766e4d29fdf670287ce.jpeg

Then I drag a rectangle from what I think is 0,0 to 100,100.  The transform box too shows 100,100.

When I export it as svg I get:

 

<?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 240 120" 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:1.41421;"><rect x="0" y="0" width="24" height="24" style="fill:#ebebeb;"/></svg>

Where do the 240, 120, 24, 24 come from?

At least they are round numbers now, as expected, but how does 100 get transformed to 24?

Robert.

PS: never mind the yellow highlights, yellow is my system highlight colour, so that is correct, but the text does not get displayed in the complementary colour which would be dark blue; I've reported that bug elsewhere.

 

Ex1.svg.zip


Robert

(Affinity Designer—Affinity Photo—LiveCode—Mac OS X various)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×