CODEWITHSUNDEEP
htmlcssbuttonsvgcss-position
Sven
Sven

Reputation: 13295

HTML button element - svg image inside - weird gap & positioning

I have the following HTML:

<button class="button">
  <img src="img/menu-2.svg">
</button>

And this CSS:

.button {
    padding: 0;
    height: 44px;
    border: none;
    background: none;
}

When I inspect the button with Firebug I can see that there is still some kind of weird gap between the image and the border of the button. Is there anyway to remove this? I would like the image to fill out the button as much as possible, or at least be centered.

Here is a screenshot: enter image description here

Or maybe its something with the SVG file? This is the SVG code that should influence the positioning: 

x="0px" y="0px" width="44px" height="44px" viewBox="0 0 44 44" enable-background="new 0 0 16 16"

What strikes me is enable-background, but I don't know what it does & removing it did nothing.

Upvotes: 4

Views: 6225

Answers (1)

Josh Powell
Josh Powell

Reputation: 6297

When saving an svg you will want to make sure your artwork contains the entire canvas board so there is not white space in the final image.

http://healthbenefitsohio.com/images/svg_whitespace.jpg

Based on the image above, you would have extra spacing on the top, left, and bottom which would cause some awkward spacing.

http://healthbenefitsohio.com/images/svg_nospace.jpg

The image above shows the proper way to save an svg and to prevent unwanted spacing when you use the image for the web.

I'm glad I could have helped out and best of luck in your design mate!

Upvotes: 1

Related Questions