Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

MARCEL CABRERA
MARCEL CABRERA
7,367 Points
Posted by MARCEL CABRERA
MARCEL CABRERA
7,367 Points

White space on svg

Hi, i'm having problems with inline SVG as they are explained in Responsive images course.

When i insert an svg it works fine in Chrome, Firefox on desktop even on Chrome for Android it shows fine, following Allison's instructions. On the other hand the native browser for Android keeps adding white space top and bottom of the svg and also on IOS in a very old version shows this white space top and bottom of the images. (on the most recent version it shows fine)

It even happens on the project files for smells like bakin website that i downloaded, the logo shows fine on Android native browser, but twitter and Facebook icons adds the white space. I'm using the latest version of Android Jelly Bean 4.2

I´m stuck here. Any help would be apreciated. Thanks!

Adam Burkenpas
Adam Burkenpas
23,559 Points
Adam Burkenpas
Adam Burkenpas
23,559 Points

I had a similar issue, what fixed it was setting a height and width. For me the issue was in Safari I never tested it on mobile devices. Hope this helps.

2 Answers

Marcelo A Carrillo
PLUS
Marcelo A Carrillo
Courses Plus Student 1,262 Points
Marcelo A Carrillo
Marcelo A Carrillo
Courses Plus Student 1,262 Points

I have the same white space issue but I was doing wrong was in illustrator. So here are the stepts:

  1. Open Illustrator
  2. File > New Document, then select option profile and then Web.
  3. Change your document to the size you need to work on, My document is widht: 200px height 200 px.
  4. May sure color mode is set to RGB and not CMYK. Also, screen resolution should be set to 72 DPI.
  5. press OK

Note: your working canvas should have a white background otherwise will not work. Also, when you export your SVG follow this steps:

Save as: SVG

SVG Profiles: should be 1.1 Type: SVG Subsetting: use Only Glyphs Used

Options: Select Link instead of embed.

Advanced Options On CSS Properties: select Style attributes Decimal Places: 1 Encoding: Unicode (UTF-8)

Lastly leave left options unckeck and check only the right options at follow: Output fewer <tspan> elements Use <textPath> elements for Text on Path

Finally press ok.

Once you have your SVG file go to the following site to get rid of the junk code and have a more simple file.

http://petercollingridge.appspot.com/svg-editor/

in here upload your name.svg file

select the option conservative and check removed white space. Leave all the other options as they are. click upload if this show an error repeat the steps some times this happen but do not worry about it.

then when you are done upload it save your file and you are ready to go.

Good luck and hope this will help you. I will create a video when I have time.

David Love
David Love
1,840 Points
David Love
David Love
1,840 Points

Thanks for this Marcelo! Worked perfectly for me

MARCEL CABRERA
MARCEL CABRERA
7,367 Points
MARCEL CABRERA
MARCEL CABRERA
7,367 Points

Thanks! i' think i got it to work defining height and width, and inserting as src in an img tag.

I don´t know if thats the correct way around it, but it seems to work.