So it exports fine but what you are talking about is which thing are you exporting (the objects or the whole artboard) and the display size in a browser (whether it is a svg alone or a svg in an html doc)
For starters there is one thing you have to take in account (AI or AD): the artboard size.
AI, as far as I know (I only have CSS 5.1) only lets you "save as" SVG the whole artboard. And it saves the SVG with the exact width and height in pixels and the exact position (of the artboard, nor the objects in it) with x and y.
Something similar to your design. It's a 800px x 600px document in AI:
And this is a SVG generated with AI of the whole 800 x 600 px artboard:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
version="1.1"
id="Layer_1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px"
y="0px"
width="800px"
height="600px"
viewBox="0 0 800 600"
enable-background="new 0 0 800 600"
xml:space="preserve">
<rect x="12" y="12" width="156" height="156"/>
<rect x="12" y="174" width="156" height="30"/>
<rect x="12" y="210" width="48" height="30"/>
<rect x="120" y="210" width="48" height="30"/>
<rect x="66" y="210" width="48" height="30"/>
</svg>
AI exports (x="0px" y="0px" width="800px" height="600px" viewBox="0 0 800 600") and it will be rendered in a browser with this exact size and position.
So if I want to export only the size of the elements you will have to resize the artboard accordingly:
But, what happens with Affinity Designer?
The same example (the 800 x 600 px artboard) exported with AD:
<?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 800 600"
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;">
<rect x="12" y="12" width="156" height="156"/>
<rect x="12" y="174" width="156" height="30"/>
<rect x="12" y="210" width="48" height="30"/>
<rect x="120" y="210" width="48" height="30"/>
<rect x="66" y="210" width="48" height="30"/>
</svg>
AD exports svg with the correct viewbox values but note the width="100%" and height="100%" and no X/Y position (it means that it will resize the SVG as wide and tall of the browser viewport and the content proportionally). More on this, the browser, without x / y position will render the svg centered (at least in firefox and chrome):
If we compare the two SVGs side by side in an HTML doc we can see the Illustrator svg sticking to its sizes (800x600px) and the AD filling the entire right column proportionally.
I don't mind how AD exports, apart from the "standalone" declaration and those obscure style properties 🤔, in fact its more "responsive" behavior helps a lot when manipulating svg in html (better than AI imho).
But if you want to stick with how AI exports (meaning you want the exact size in px) then go with it. You always can manipulate the AD SVG changing the width to 800px and height to 600px and add x and y values and, there you go, the same results .
Or...you can manipulate the sizes with CSS for the illustrator SVG to behave like the AD one:
.illustrator_svg {
width: 100%;
height: 100%;
]
Or hardcode the exact same sizes as the AI SVG for your AD css:
.designer_svg {
width: 800px;
height: 600px;
}
Greets
(I feel I've over-explained this somehow, sorry about this)