Illustrator adds a lot of white space to the left and right when exporting as SVG

[Mads Vestergaard]

Hello.

I have this weird issue on my personal computer, which doesn't occure on the device at my work place. When I try to export an artboard as an SVG, Illustrator expands the artboard at the button making a lot of white space. I export as svg through the export as setting, I have minimize and responisve dissabled and I select use artboards. I checked if there where invisible lines by hitting command + Y (I'm on mac on both devices), but there were no invisible shapes and no gradients or clipping masks. All my settings as far as I can see are the same at work and at home. I also tried reinstalling Ai and I even reset my settings. But the problem still occurs and only when exporting as svg. I have looked at other community posts, but none have solved my problem, which is only accouring on my personal computer and not my work computer, both running the newest system update (Sonoma 14.5). Does anyone have an idea, what the problem might be?

[Doug A Roberts]

Can you share the SVG?

[Mads Vestergaard]

Yes of course.

[Kenneth Kawamoto]

Is this a macOS preview thing or the actual SVG has erroneous white area? I have seen SVGs wrongly displayed in the Finder preview before, but the actual SVGs were fine.

[Mads Vestergaard]

It's the actual SVG that has the white space, not just the preview. Sorry, I should have thought of adding the file in my post.

[Kenneth Kawamoto]

This is how your SVG file opens in my Illustrator. The logo/artboard looks fine (but there are 3 black rectangles in the pasteboard).

My Finder displays as if it's an A4 document with margins around - but it's the same for any SVG file

[Mads Vestergaard]

Interesting. Those rectangles are located on other artboards in my Ai file, which I'm not trying to export. I tried turning off the visibility of the boxes and then exporting again. I also moved any shape not relevant to this logo out of the same layer as the logo. The preview in my finder panel still shows a wrong size, but when I open the SVG inside of Illustrator, it appears right now, no black boxes. However when opening in a browser the logo is pressed up into the top left corner leaving the same amount of empty space as before. The logo is for my portfolio, so I need to upload it. I'm still new to Illustrator, so I'm unsure of how I can fix this issue. Do you have any tips?

As seen in browser:

[Kenneth Kawamoto]

Can you try the file attached? I have re-exported it from my Illustrator.

[Mads Vestergaard]

The file you attched still looks wrong in my finder window for some reason. Which doesn't matter because you made it looks correct in both Illustrator and in my browser. You fixed the problem, thank you, much appreciated. But can you explain what you did to fix it?

[Kenneth Kawamoto · Accepted solution]

Ignore the Finder preview - it just doesn't display SVG nicely.

Your original SVG was not wrong, but it had the width and height set explicitly: width="448.8" height="261.2"

Therefore the browser was displaying it correctly, as a 448.8 x 261.2 px image in the top left corner.

You can remove the display dimension from SVG using any text editor, or from Illustrator check "Responsive" when you export (not very intuitive, I must say). Without the display dimension info the browser doesn't know the size so it display as large as possible to fill the space available.

Hope this makes sense 😁

[Mads Vestergaard]

I tried applying the responsive and the file looks right (well outside of the finder, but as you said it doesn't matter). I will read up on how to work with the text editor to change dimensions, just to be save for the future. Thank you, you helped me a lot! 🙂

[Doug A Roberts]

However when opening in a browser the logo is pressed up into the top left corner leaving the same amount of empty space as before. The logo is for my portfolio, so I need to upload it. I'm still new to Illustrator, so I'm unsure of how I can fix this issue. Do you have any tips?

By @Mads Vestergaard

This is an SVG/web layout question, not an Illustrator one. When creating elements in HTML, they'll always start from the top-left unless you position them otherwise. There are multiple ways to centre an element in HTML/CSS:

https://www.w3schools.com/css/css_align.asp

Checking 'Responsive' in Illustrator's SVG export options will remove the SVG's width and height, meaning it will scale to the size of its container (in this case, the browser window). But if you want an SVG to be a specfic size and centered in something, you'll need to explicitly define that in CSS.

This depends on what exactly your portfolio is. Most people don't have portfolios consisting of SVGs displayed contextless in a web browser. How will it be presented?

[Mads Vestergaard]

You are right. I got a hold of my web teatcher, who was on vaccation. They told me to use an png instead. The image file is to be placed in top of the page next to the navigation bar. But I will look into the link you posted for later reference. Thank you.

[Kenneth Kawamoto]

> They told me to use an png instead.
You should probably follow the teacher's advice for a school project, but I'd definitely use SVG, which is vector therefore scalable (as in the name) and the quality is loss-less

[derekwatson]

Is the text outlined? Text blocks can often add extra space when exporting