CODEWITHSUNDEEP
javascripthtmlcsssvg
Grey Lover
Grey Lover

Reputation: 31

Why is there Space around SVG?

I am trying to embed SVG in html file.

You can view it at http://shrineweb.in/other-files/clients/proxymis/html/index.html

You can see that there is padding/margin around the image.

I want to remove it.

Here is the code:--

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="100px" height="100px" viewBox="0 0 100 100" enable-background="new 0 0 100 100" xml:space="preserve">
<path fill="#3ABBD6" d="M43.945,65.639c-8.835,0-15.998-7.162-15.998-15.998c0-8.836,7.163-15.998,15.998-15.998
    c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.338-0.205,2.033-0.205c6.627,0,11.998,5.373,11.998,12
    c0,6.625-5.371,11.998-11.998,11.998C57.168,65.639,47.143,65.639,43.945,65.639z M59.943,61.639c4.418,0,8-3.582,8-7.998
    c0-4.417-3.582-8-8-8c-1.601,0-3.082,0.481-4.334,1.291c-1.23-5.316-5.973-9.29-11.665-9.29c-6.626,0-11.998,5.372-11.998,11.999
    c0,6.626,5.372,11.998,11.998,11.998C47.562,61.639,56.924,61.639,59.943,61.639z"/>
</svg>

Upvotes: 1

Views: 11192

Answers (3)

Tirthrajsinh Parmar
Tirthrajsinh Parmar

Reputation: 158

i haven't that much experience of SVG code but i have removed the left space from SVG CODE and then you can set style margin in negative to remove top space like this code...

check it out ok... :)

it's not a perfect solution but it works well...

Thanks...

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<body>
    <div style="margin-top:-40px;">
        <svg id="Layer_1" xml:space="preserve" enable-background="new 0 0 100 100" viewBox="0 0 100 100" height="100px" width="100px" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" version="1.1">
        <path d="M15.945,65.639c-8.835,0-15.998-7.162-15.998-15.998c0-8.836,7.163-15.998,15.998-15.998 c6.004,0,11.229,3.312,13.965,8.203c0.664-0.113,1.338-0.205,2.033-0.205c6.627,0,11.998,5.373,11.998,12 c0,6.625-5.371,11.998-11.998,11.998C57.168,65.639,47.143,65.639,43.945,65.639z M31.943,61.639c4.418,0,8-3.582,8-7.998 c0-4.417-3.582-8-8-8c-1.601,0-3.082,0.481-4.334,1.291c-1.23-5.316-5.973-9.29-11.665-9.29c-6.626,0-11.998,5.372-11.998,11.999 c0,6.626,5.372,11.998,11.998,11.998C47.562,61.639,56.924,61.639,59.943,61.639z" fill="#3ABBD6">
        </svg>
    </div>
</body>
</html>

Upvotes: 1

defghi1977
defghi1977

Reputation: 5359

It's not svg element's margin, it's body element's.
So you should append the style element under the head element and describe "margin:0" in it.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>body{margin:0;}</style>
</head>

Upvotes: -1

Simon Groenewolt
Simon Groenewolt

Reputation: 10665

The padding is part of your svg image. Use an image editing program (for example Adobe Illustrator, but there are probably good open source alternatives as well) to remove the space. This is not something that you should fix in javascript.

Upvotes: 2

Related Questions