SVG Units

[zapzapzap]

This one should hopefully be pretty simple to explain.

Despite document units being set to "inches" in MacOS Affinity Designer, or really any physical unit, all exported SVG files have their units set in some weird unit with an added transform matrix (presumably informed by whatever DPI is set in the SVG export window? I'm not seeing any consistent scale factor in my tests however). See attached simple 5" x 3" rectangle that, when exported, has a size of 1553.51 x 1056.99 with no units named and a strange parent transform matrix. Weird.

This is problematic for any workflow that involves physical output such as laser cutters, Cricut cutters, pen plotters, etc. — and also easy scale-sensitive interactivity with CAD programs such as AutoCAD, Rhino, Revit, and others where SVG is often a convenient interchange format; but these programs may not correctly interpret the transform matrix and lead to precision-based errors. Further, when working in programmatic SVG creation and manipulation (like in lightweight GIS cartography work), the transform matrix is an added, unnecessary hurdle.

It would be great to be able to have the *option* to retain physical units in SVG exports, convert to real pixels (without the transform matrix) for fully digital workflows, or leave the current behavior (not sure where that's the norm but I assume it's used somewhere!).

Thanks so much! 

Edited January 22 by zapzapzap

[MmmMaarten]

Hi @zapzapzap, I've worked for years with SVG's created by Affinity for intensive interactive usages on the web where I used the SVG's and changed/read/rewrote them using code. Like interactive animations and interactive maps etc.

A few things to note about this:
- There's no need to have the matrix transforms in the SVG output. You can turn these off by checking 'Flatten Transforms' in the SVG export settings


As for the units used I have to tell that I've never needed to put Affinity into any unit other than pixels because of my work, so can't tell you for sure, but I'm pretty sure that the units used in the outputted SVG are always in pixels. If not I'm sure somebody else here will correct me on that.

I don't know how far your knowledge of the SVG format goes, but it's probably not how you think it works, but that's only guessing by what you write in the text.
The rectangle you point at for instance, is not in pixels, but in units of the svg as defined in the 'viewBox' attribute of the SVG element around it.
The viewBox is optional and can be turned on or off, but normally this is turned on because it's SCALABLE vector Graphics and this box is needed for the scaling part.
The viewBox is basically a window that you place over the graphics inside the SVG which defines what to show from the SVG. This box can not only be moved all over your graphics, but also scale your graphics.

This is important to know, because this means that the values like width and height and x an y everywhere in your SVG (like in the rectangle) are NOT absolute values, but relative to this viewBox. The viewBox defines how all these values are used and can scale all these values up and down, or move them left, right, up or down.

BTW to make it even more complicated there is also an attribute which defines HOW things are scaled when used. And how to set the aspect ratio and what to do with the content when aspect ratio of the target/screen etc. is not the same as the svg. That's a whole other subject, but that also influences the measurements of the content inside the svg as output.

As for the DPI, I'm pretty sure that SVG's generated by Affinity are always using DPI 72. At least that's the way when copying things to the clipboard. But I'm not 100% sure about that one because because of the scaling nature of SVG I never needed to know the DPI as it's scalable to begin with.
[edit] Although in the SVG export settings I see a setting called 'Use document resolution'. I think though that is only used for the raster images if exported to the svg, but I'm not sure.

But I don't know anything about using SVG with real measurements for things like laser cutters or alike, so I can't tell you anything about how all the info in the SVG is used, ignored or handled. And even wouldn't know if it's the right format for those kind of jobs or just not meant for it.
Another advise I could give though is; did you try exporting to PDF or EPS and see if that works better for your use case? That might be a better format for the things you need, but that's pure guessing of my side. Could be worth a try. Because I think SVG isn't really meant for this kind of things and was more made as an output format for internet AFAIK because of its scalable nature.

Anyway, hope this still makes any sense and somewhat helps.

[debraspicher]

If the document is 300DPI, the SVG will be output larger in programs such as Cricut. You *MUST* toggle "Use DPI: 72", etc, in your Export preset to correct for this. If I specify 72, even if my document is 300dpi, I will get the correct inches for my file(s) when I open because that's the default DPI things at which graphics are imported in that specific program. Other units can be used, but in practice, SVG is assumed pixel-based... I'm assuming your document is 300 DPI, and 1553 & 1056 when decided by 5"/3" or 300 respectively come out to be in that ballpark (looks like there's Artboard spillage or something?... *or related to a transform?)...

72 is going to be the most common as it's meant to represent a physical measurement (1/72") for screens, so I would suggest to default to that unless the program you are working in asks otherwise...