kartoffeltree Posted January 19 Share Posted January 19 Hello, I'm trying to export some SVGs but there is always some extra white space around the exported SVG, no matter if I go through the export function or export persona. I can't find a way to simply export any elements without extra margins around the vectors. Maybe anyone here has an idea... As an example from the export persona. When selecting a group, it always creates some margins, as seen here. First rectangle is the border of the group, second rectangle is the export slice. Also interesting to see is that the margin around the Text is simply to the next pixel, however it's a couple of pixels from the rectangles/lines. Quote Link to comment Share on other sites More sharing options...
v_kyr Posted January 19 Share Posted January 19 20 minutes ago, kartoffeltree said: no matter if I go through the export function or export persona. I can't find a way to simply export any elements without extra margins around the vectors. Maybe anyone here has an idea... Try to export only the made selection (setable from the export dialog), aka Selection Area or Selection Only ... Quote 1 If one or more layers is selected, the exported file can be trimmed to their boundary by setting Area to Selection Area or Selection Only, which include or exclude all other layers from the output, respectively. https://affinity.help/designer2/English.lproj/index.html?page=pages/ShareSavePrint/export.html?title=Export kartoffeltree 1 Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
kartoffeltree Posted January 19 Author Share Posted January 19 @v_kyr Thanks a lot for your help. I tried that setting as well, but somehow there is still a margin around the export. You can see on the screenshot that there is still space around the objects. And that's how the selection looks like on the artboard: I created a new file and tried again and somehow there it works... Weird When I copy and paste the previous objects into the new file, it stops working again... Something is up with those objects... With the border: Without the border: Might be some bug. Quote Link to comment Share on other sites More sharing options...
v_kyr Posted January 19 Share Posted January 19 If you can, then share your Affinity document here, so somebody who uses v2 apps can take a look at it. - I can only take a look at v1 docs, or inspect the gnerated produced SVG output file. kartoffeltree 1 Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
kartoffeltree Posted January 19 Author Share Posted January 19 Addition: The original file was created in AI, I've opened it in AD and saved as .afdesign. Tho they are curves like other objects I've tried, the export doesn't work properly when I add a border to them. Quote Link to comment Share on other sites More sharing options...
kartoffeltree Posted January 19 Author Share Posted January 19 Good point, I've added a test file and the exported svg~ test_file_export.svg test_file_export.afdesign Quote Link to comment Share on other sites More sharing options...
v_kyr Posted January 19 Share Posted January 19 1 minute ago, kartoffeltree said: Addition: The original file was created in AI, I've opened it in AD and saved as .afdesign. Tho they are curves like other objects I've tried, the export doesn't work properly when I add a border to them. Then show the Ai file (or export that better to PDF/SVG via Ai for an overall better import into ADe). Usually such simple curves as you've shown above should work Ok for ADe too. Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
kartoffeltree Posted January 19 Author Share Posted January 19 6 minutes ago, v_kyr said: Then show the Ai file (or export that better to PDF/SVG via Ai for an overall better import into ADe). Usually such simple curves as you've shown above should work Ok for ADe too. Thanks for the tip, I'll try to get an exported version of it. Sadly I don't have access to AI currently and can't share the AI file, as there are some information in it I'm not supposed to share freely... At least in this case it's an easy, while slightly bothersome, solution to just recreate the rectangles. Again thank you for your help! Quote Link to comment Share on other sites More sharing options...
v_kyr Posted January 19 Share Posted January 19 Ok then try the following ... set the ADe Document type from "Print" to "Web" ... ... and on the SVG "more" options use flatten export ... ... then select the rounded rect layer and on the SVG export panel "Selection Area". - Now the generated SVG file should be instead of a whole doc viewBox="0 0 116 157" then more the size of the selected rounded rect area (with slightly rounded up pixels) --> viewBox="0 0 107 149". test_file_export2.svg The difference will be viewble in ADe, if you just reopen the previous and now generated SVG files in it ... ... vs ... Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
kartoffeltree Posted January 19 Author Share Posted January 19 (edited) I just realised I can't create any web documents. Even when creating a new one with a web preset, the document type is print: I can choose web here, click ok, but when opening that dialog again it's back to print. Maybe it's just too late here, almost midnight, will give it another try tomorrow... Edited January 19 by kartoffeltree Quote Link to comment Share on other sites More sharing options...
v_kyr Posted January 19 Share Posted January 19 3 minutes ago, kartoffeltree said: I can choose web here, click ok, but when opening that dialog again it's back to print. It's the same behavior (probably a write and reshow doc setting bug) in ADe V1, when I change the doc type from Print to Web. So here too (ADe v1) when opening that dialog again it's back to print. But it still does effects the SVG doc code size generation when you once change it from Print to Web (even the panel when reshown falls back to Print). Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
v_kyr Posted January 19 Share Posted January 19 10 minutes ago, kartoffeltree said: Maybe it's just too late here, almost midnight, will give it another try tomorrow... Ok, though I'm too in DE, but somehow used to late night working. 😉 Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
kartoffeltree Posted January 19 Author Share Posted January 19 Haha I see^^ It's too late for me already tho, tried a couple of times but didn't get it to work... Will give it another try tomorrow morning~ Again thanks a lot for your help! Even it doesn't work just yet, I've learned a lot~ 😁 Quote Link to comment Share on other sites More sharing options...
v_kyr Posted January 19 Share Posted January 19 1 hour ago, kartoffeltree said: Haha I see^^ It's too late for me already tho, tried a couple of times but didn't get it to work... Will give it another try tomorrow morning~ Again thanks a lot for your help! Even it doesn't work just yet, I've learned a lot~ 😁 Yeah another day another chance! BTW the whole could also be somehow stroke & stroke-miterlimit behavior dependent, since that might be slightly different between Ai and ADe, see therefor also with visual showups ... https://css-tricks.com/mastering-svgs-stroke-miterlimit-attribute/ Quote One nuance is that Illustrator has a default miter limit of 10 rather than the default 4. I’ve noticed this every time I export the SVG file or copy and paste the resulting SVG code. That could be confusing when you open up the code because even if you do not change the miter limit value, Illustrator adds stroke-miterlimit="10" where you might expect 4 or perhaps no stroke-miterlimit at all. Quote ☛ Affinity Designer 1.10.8 ◆ Affinity Photo 1.10.8 ◆ Affinity Publisher 1.10.8 ◆ OSX El Capitan ☛ Affinity V2.3 apps ◆ MacOS Sonoma 14.2 ◆ iPad OS 17.2 Link to comment Share on other sites More sharing options...
kartoffeltree Posted January 21 Author Share Posted January 21 On 1/20/2024 at 12:08 AM, v_kyr said: Yeah another day another chance! BTW the whole could also be somehow stroke & stroke-miterlimit behavior dependent, since that might be slightly different between Ai and ADe, see therefor also with visual showups ... https://css-tricks.com/mastering-svgs-stroke-miterlimit-attribute/ Ohh wow, thank you for that, really fascinating! I'll definitely have to dive deeper into that. For now I simply replaced the rectangles and it works as intended~ Currently too short on time to find the exact issue, but it's put on a list that... might or might not get worked on again in the future 😅 Happy Sunday and really appreciate your detailed help! v_kyr 1 Quote Link to comment Share on other sites More sharing options...
kartoffeltree Posted January 21 Author Share Posted January 21 Short update, tried a bit more... Setting the mitter to 1 (right side of screenshot) almost fixes the issue, only a tiny bit of white space left. might be a pixel alignment issue tho. Interesting enough tho, rectangles created in ADf have a mitter of 1.5 and export works fine. if i set 1.5 in the AI imported rectangles, the whitespace becomes much bigger again. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.