Removing "padding" from SVG?

Question

I have a SVG graphic that draws a circle. When I give it a background-color with CSS, I expected it to show up only in the corners because CSS elements are never round (yes yes, border-radius...) - so I put a round graphic with a transparent background in a rectangular box with background color.
But instead, it looks like this:

Is there any way I can remove the "padding" on the left & right side? Has it something to do with ViewBox?

Answer 1

There's two possibilities that could cause this, depending on how your SVG has been drawn.

1.) Your path/circle in the SVG may be starting at a location that isn't aligned to the left hand side.

Imagine it like a Grid from point 0,0 and it has a width of 64 and a height of 32, and you've told the circle to center on 32,16 and with a radius of 16. This will leave 16 points of padding on the left and right hand side to every 32 points of circle.

<p>No padding with coordinate</p>
<svg  style="border: 1px solid red;"
      height="50px"
      viewBox="0 0 32 32" 
      xmlns="http://www.w3.org/2000/svg">
  <circle cx="16" cy="16" r="16"/>
</svg>
<p>Example above but starting at a coordinate that causes whitespace</p>
<svg  style="border: 1px solid red;"
      viewBox="0 0 64 32" 
      height="50px"
      xmlns="http://www.w3.org/2000/svg">
  <circle cx="32" cy="16" r="16"/>
</svg>

The way to remove this is to reposition your paths, or try to change your viewbox so that it starts at a different coordinate. Changing the coordinates of your ViewBox isn't an ideal fix as it becomes illogical to start at a non-zero'd out coordinate and you will have to remember to take this in to account when adding any more shapes to the viewbox.

<p>Changing the viewbox to start at a different coordinate</p>
<svg  style="border: 1px solid red;"
      height="50px"
      viewBox="50 50 100 100" 
      xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="50"/>
</svg>
<p>Changing the 'path' so that it doesn't leave padding</p>
<svg  style="border: 1px solid red;"
      height="50px"
      viewBox="0 0 100 100" 
      xmlns="http://www.w3.org/2000/svg">
    <circle cx="50" cy="50" r="50"/>
</svg>

2.) Your SVG has been told to scale uniformly.

This second option will mean all paths drawn in your SVG will keep the same ratios on their dimensions dimensions when the SVG scales up.

Imagine you have a circle, and your SVG has been designed so that it will neatly fit the children with no padding. Now we've scaled this SVG box by 2* in the X axis and 1.5* in the Y axis, the circle will try and grow 2* in the X direction, but because it has to keep it's ratios and it can't grow 2* in the Y, it will only grow by 1.5* in each direction. For the left over .5* in the X direction it will just add white space.

<p>Unscaled</p>
<svg  style="border: 1px solid red"
      height="100px"
      width="100px"
      viewBox="0 0 32 32" 
      xmlns="http://www.w3.org/2000/svg">
  <circle cx="16" cy="16" r="16"/>
</svg>
<p>Above circle scaled at an uneven ratio</p>
<svg  style="border: 1px solid red"
      height="50px"
      width="100px"
      viewBox="0 0 32 32" 
      xmlns="http://www.w3.org/2000/svg">
  <circle cx="16" cy="16" r="16"/>
</svg>

As @heycam has said above, to change this you can set the SVG element to allow for this ratio scaling to be turned off. This is done using the attribute "preserveAspectRatio" and setting it to "none".

<svg  style="border: 1px solid red"
      height="50px"
      width="100px"
      viewBox="0 0 32 32" 
      preserveAspectRatio="none"
      xmlns="http://www.w3.org/2000/svg">
    <circle cx="16" cy="16" r="16"/>
</svg>

Hopefully this helps some of your understanding of SVGs, as they're a really useful tool!

Answer 2

If you want the SVG to stretch to the entire box, put preserveAspectRatio="none" on the root <svg> element.

Answer 3

Today I come across a similar situation, I used boxy-svg.com online tool to remove the padding from .svg file.