Heitor

Hello This still happens in 1.10.0.1127 / windows 10

Hello. This still happens in 1.9.2.1035 / windows 7

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)

File > Export In the dialog choose "SVG (for export)". Pay attention to what you are exporting (selection, whole document or artboard if it's the case) and select what you need. Hit export. Profit!. Greets

He's probably talking about displaying the SVG in a browser (into a html document, because he said it shows 0x0px computed in the html tree - hml inspector tools?-). Anyway, I've exported to SVG from designer a lot and never had a problem so far. ghiesz, take a look at the files I've attached. There is a svg file generated with Designer and a html file with 2 ways for displaying svg (<img> and <svg> tags). It would be nice if you could attach your svg so we could inspect what the problem is. Greets. (my taylor is rich) svg.html car-lite.svg

++1

You can always try scribus https://www.scribus.net/ Not too bad compared to inDesign... but hey, at least is Open Source and for Linux, Win and Mac OS X.