Affinity Designer SVG export with reliable scale

[_user]

If this does not belong in this thread let me know, thx.

Very new to all this, hello everyone. I am looking for help, guidance, tutorials, links, videos, documentation, on how to to do work that can be exported as SVG for optimal file size.

The use case is to do a simple logo that can be used as large header square background as well as have a small thumbnail version both to use on a website, SVG comes to mind since it can be scaled lossless from my understanding.

I started out huge, 1000 x 1000 px and saw that when exporting to SVG the file size is also huge, even though the logo is simple, no images, no gradients, some circles, a few shapes, a few fill colors, some text, all converted to curves.

I was under the impression that when exporting to SVG the file size will be small regardless of dimension picked since it scales lossless, but it seems I don't know enough about how a SVG works or how I can best do work for this format with Affinity Designer 2.

Now I am doing a 120 x 120 px version and the file size is much smaller as well, but now when I want the SVG big I have to enlarge it quite a bit and then the lines in a 45 degree angle are not smooth any more but one can start to see actual stairs of pixels.

So for a simple logo, what is the best way to work for having SVG as output in mind ?
Where is the middle ground between a big enough dimension and detail and optimal, or smallest possible, file size ?
What scaling can be done in the browser by a dev without loosing quality and how does this affect my SVG working dimensions in Designer ?

Thank you.

[v_kyr]

54 minutes ago, _user said:

I started out huge, 1000 x 1000 px and saw that when exporting to SVG the file size is also huge, even though the logo is simple, no images, no gradients, some circles, a few shapes, a few fill colors, some text, all converted to curves.

Well a SVG vector file contains text in XML commands notation, so a real (just plain) vectors including SVG file's size is dependent on the generated (or manually) included amount of text lines (text characters) in the file. - You can open any SVG file with a text editor for a closer contents inspection!

So when do SVG files grow aka can get huge?  - Usually this will be mostly the case, when some bitmap/raster/pixel image data is embedded into an SVG file. As bitmap image data will be embedded in SVG files as an uuencoded base64 character stream, so the bitmap data will then be character encoded included, which in turn blows up the SVG file size. - You can again check with a text editor, if some SVG file maybe contains such base64 uuencoded image streams!

1 hour ago, _user said:

... Now I am doing a 120 x 120 px version and the file size is much smaller as well, but now when I want the SVG big I have to enlarge it quite a bit and then the lines in a 45 degree angle are not smooth any more but one can start to see actual stairs of pixels.

This depends partly to the previously above said, for plain vectors (with no embedded bitmap data) the file sizes won't be that much different (only if more textual transformation XML code is added).

The preview/showup and smoothness of lines is software tool dependent (100% size preview vs zoomed preview sizes of >100% etc.) and how it handles antialising etc., meaning here that not all webbrowsers or preview apps do handle SVG showups the same way. Usually since SVG is a vector format and if no bitmaps are embedded, it should also visually scale up fine here.

1 hour ago, _user said:

So for a simple logo, what is the best way to work for having SVG as output in mind ?

Depends on needed logo sizes and used fonts etc. As for example not all fonts look good or can still be read fine when used at very tiny sizes. Thus I would always start with a smaller sized SVG drawing, since scaling up a vector drawing and used fonts, shouldn't be a problem afterwards (...if no bitmap data is included). - For web output (so not for printer output prints) and thus for common logo drawings, using 72 PPI or even better the more standard 96 PPI here for docs (...in Affinity the docs DPI setup) should be used.

 

 

[Grumbler]

Heyho,

 

I recently bought Designer to replace Inkscape and even the basic feature of real world coordinates is not supported. This drives me nuts! Why is Affinity Designer not respecting the document setting "mm"? Just save all values as "mm"! This is fully supported by the SVG-format! Instead Designer uses pixels as format (without explicitly using the unit [px] which is also a design flaw).

I tried to use the 2540 dpi to get at least no rounding errors up to 0.01 mm. In the end also this workaround is super frustrating as other programs will interpret the SVG as 96 dpi (CSS standard) which results in wrong real world coordinates!

And what about the suggestions to "Use px as default unit and change the svg afterwards". This also only works for elements as the Affinity Designer rounds the SVG-Viewbox always to integers, which means your document can't have a proper size in mm! WTF? Why?

Ah, and the worst thing about is, that for SVG we can at least do something about it and try to fix the SVG but PDF-export has the same problem which can't be fixed by the user due to the binary nature of the PDF!

This is a really, really big issue guys and needs to be resolved ASAP! Respect SI-Units as the rest of the world does!

 

Marcus

Edited February 18, 2023 by Grumbler

[Mark H.]

I'm just going to reiterate a previous answer, and clarify what the problem is. 

The problem is that when you export to SVG, the default settings don't include the original size of the artwork in the exported file. Instead, it sets the width and height to "100%". It does this, I think, to make viewing it in a browser a little better, but it doesn't play well with output hardware like laser or vinyl cutters.

One workaround mentioned was to uncheck the "set viewbox" option. Unfortunately, this only makes it export the width and height in pixels, which is often device-dependent, so it doesn't always fix the issue either.

The best option is to edit the file in a text editor after export. Find the spot where the width and height are set at the top of the document, and change the values to the actual values for the size of the document, such as:

width="8.5in" height="11in"

You can use in for inches, cm for centimeters, etc. Note that this will completely fix the problem, so it's a workaround, not a hack.

Perhaps, Affinity, you could work this in as an option for SVG export? It honestly seems like it should be the default, but I'd settle for a checkbox to export at the chosen size.

Edited March 28, 2023 by Mark Hubbart

[Andreas Scherer]

On 3/28/2023 at 8:59 PM, Mark H. said:

The best option is to edit the file in a text editor after export.

Yep, I'm glad I checked my exported SVG in Inkscape (both on Linux and on Mac) and noticed the scaling factor of about 1.4 to 1.6 (I'm using different resolutions on the same WQHD monitor). After replacing width=100% with width=100mm (and height as well), my SVG looks fine in Inkscape. Let's hope that it also works in Trotec JobControl.

Too bad that SVG export from AD is broken. The exported PDF is exactly 10cm by 10cm in size.

[Andreas Scherer]

On 9/6/2023 at 10:44 AM, Andreas Scherer said:

Let's hope that it also works in Trotec JobControl.

It works perfectly. Just make sure that

• you make a selection of your design and note the width and height
• you export only the selection to SVG
• you change the width and height values from "100%" to their absolute values in the SVG file before you import it in Trotec JobControl

I use red (RGB 255,0,0) lines with width 0.2pt to cut, e.g., wood sheets.

[Andreas Scherer]

On 9/6/2023 at 10:44 AM, Andreas Scherer said:

The exported PDF is exactly 10cm by 10cm in size.

While I intuitively prefer to use SVG files for import into Trotec JobControl, a test today showed that PDF files get messed up in that software: All text labels – exported from AD as font-independent curves – were virtually misplaced all over the graphic (and beyond).

[Andreas Scherer]

On 9/7/2023 at 3:21 PM, Andreas Scherer said:

• you make a selection of your design and note the width and height

If for whatever reason your design is rotated by 90 degrees, you have to flip the width and height values in the SVG file, or else they'll mismatch the viewbox values.

[Grumbler]

It is an absolute joke that a software that claims to support vector formats incorporates naive rounding errors. Just stay away from it! I feel scammed buying the suite and can't return Designer. Inkscape is only missing real CMYK support which is why I planned to switch to Affinity Designer and bought it.

Edited September 8, 2023 by Grumbler