Skip to main content
Jolievin-qIHlRi
Jolievin-qIHlRi
Participating Frequently
January 4, 2018
Question

SVG files are exported with Extra White Space

  • January 4, 2018
  • 4 replies
  • 7695 views

After exporting SVG Files suddenly,  extra white space appears out of nowhere. I have FIT the artboard to the Artwork Bounds, and Used Artboards when exporting but nothing seemed to work. Tried a lot of different options found here and in different forums, but it just refuses to work.

1. Before exporting in Illustrator file perfectly fitted to the artboard

2. Exported file:

This topic has been closed for replies.

4 replies

M
markc68756443
Participant
March 20, 2021

Thanks!

R
raffaelei
Participant
February 25, 2021

Hi there, I know it's an old post but I have the same problem and wondering if you solved it. Thanks

P
p1xelated
Participant
February 26, 2021

Nope, sure isn't. I'm having the same problem.

SketchbookShark
SketchbookShark
Participant
April 26, 2019

I had the same problem. My Project is a Captivate 2019 responsive project with Fluid Boxes. I encountered the problem when I:

  1. select the Fluid Box I want the image to display in and then
  2. navigate to the menu item Media/SVG,
  3. then in the file browser dialogue select the file I want.
  4. --> This causes the program to place a strange distorted version of the SVG into the Fluid Box. The actual graphic is surrounded by extra white space, which cannot be gotten rid of. In the Position dialogue the height is greyed out and very little can be done to fix the distortion or control the placement,.

The Solution was for me :

  1. NOT to have any fluid boxes selected when the SVG is imported. The SVG is then placed onto the "stage" without being the child of any fluid box or container. It is not distorted and does not have extra white space around it.  You can then
  2. drag it into the Fluid box, if you need to. It will behave normally.

Hope this helps.

Ooops, I just saw this is a Illustrator related question. Not sure why I was directed here after searching for a solution for Captivate. I hope it still helps someone.

I guess the bigger takeaway is that the problem is most likely not caused during the export (Illustrator) but by whatever is the receiving container, that which renders the image and styles the svg-element

Monika Gause
Community Expert
Monika GauseCommunity Expert
Community Expert
January 4, 2018

Which version?

Which system?

How exactly do you export the SVG?

Is there a clipping mask somewhere in the artwork?

Which viewer are you using to check the file?

Jolievin-qIHlRi
Jolievin-qIHlRiAuthor
Participating Frequently
January 4, 2018

Illustrator CC 2018 22.0.1 ( also tried older version of Illustrator CC 2013  the same problem)  I am previewing with an image preview on Mac and in the browser.

System MACos Sierra

There is no clipping mask.

I've tried all exporting options, and every time there is an extra white space, but just in a different place, sometimes below, sometimes my SVG element is in the middle with space around and sometimes there is a space below and on the right. I tired SAVE AS SVG and it still happens, I've tired EXPORT AS..., and I have tried all options there and also different combinations, I have also tried EXPORT FOR SCREENS.

When I save the same file as AI or EPS, it saves exactly as it should, without any extra white space. This only happens for SVG elements.

When I check SVG code it shows me:

width="width of the element" height="height of the element viewBox="0 0 width height"

which looks exactly as it should.

I tried different files, and the same issue. I checked if there is something, maybe extra hidden layer or object, there is nothing.

I have send this centred version of the SVG to the Developer and he told me it behaves in a strange way in the browser, and it just keeps being in the centre because of that extra space.

Monika Gause
Community Expert
Monika GauseCommunity Expert
Community Expert
January 4, 2018

https://forums.adobe.com/people/Monika+Gause  wrote

Jolievin   schrieb

I have send this centred version of the SVG to the Developer and he told me it behaves in a strange way in the browser, and it just keeps being in the centre because of that extra space.

"It keeps being in the centre" of what?

OF the WHITE SPACE that is being added to every SVG file I have exported. But on the website it still looks centered although it is transparent.

This is how the file looks like in the preview and in the browser:

I've added the black border so you can notice all the white space around it, that is not there when opening the SVG file in the illustrator.

This is how the file looks like in the Illustrator:

NO WHITE SPACE AROUND IT or below it


White space around an image on a website can appear because of CSS styling.

Without seeing the actual page and the actual SVG file this will be impossible to solve.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices