CODEWITHSUNDEEP
htmlcsssvg
Sara Ree
Sara Ree

Reputation: 3543

remove space around svg

I want to remove the padding from the given svg:

#fake-cursor {
  position: absolute;
  top: 0;
  left: 0; 
} 
  
  <svg id="fake-cursor" 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="120px" height="114px" viewBox="0 0 120 114" enable-background="new 0 0 120 114" xml:space="preserve" preserveAspectRatio="none">
<g>
    <path fill="#49578D" d="M42.849,44.922l19.94,15.089c0.758,0.575,0.334,1.785-0.617,1.759l-12.356-0.35l-7.188,9.855
        c-0.561,0.77-1.785,0.36-1.769-0.593l0.421-24.997c0.006-0.356,0.205-0.679,0.517-0.846C42.139,44.657,42.548,44.695,42.849,44.922
        L42.849,44.922z"/>
</g>
<path fill="#2C3C74" d="M42.849,44.922l19.94,15.089c0.758,0.575,0.334,1.785-0.617,1.759l-12.356-0.35l-8.019-16.58
    C42.139,44.657,42.548,44.695,42.849,44.922L42.849,44.922z"/>
</svg>

I used preserveAspectRatio="none" but there is no change.

How can I fix this?

Upvotes: 0

Views: 298

Answers (1)

robertp
robertp

Reputation: 3652

The padding is contained in the SVG graphic itself, so you'll need to remove it using an SVG editor. You can use Illustrator, or a free online tool like https://boxy-svg.com/app/new.

I used Boxy SVG to clean up your SVG, and as you can see the code snippet below the padding is removed, but you might want to play with this, as the original graphic is a bit wonky.

#fake-cursor {
  position: absolute;
  top: 0;
  left: 0;
} 
<svg id="fake-cursor" viewBox="0.195 0.212 22.32 26.954" width="22.32" height="26.954">
  <path fill="#49578D" d="M 2.185 0.41 L 22.125 15.499 C 22.883 16.074 22.459 17.284 21.508 17.258 L 9.152 16.908 L 1.964 26.763 C 1.403 27.533 0.179 27.123 0.195 26.17 L 0.616 1.173 C 0.622 0.817 0.821 0.494 1.133 0.327 C 1.475 0.145 1.884 0.183 2.185 0.41 L 2.185 0.41 Z"></path>
  <path fill="#2C3C74" d="M 2.185 0.41 L 22.125 15.499 C 22.883 16.074 22.459 17.284 21.508 17.258 L 9.152 16.908 L 1.133 0.328 C 1.475 0.145 1.884 0.183 2.185 0.41 L 2.185 0.41 Z"></path>
</svg>

Upvotes: 3

Related Questions