Search code examples
csshtmlsvg

Removing "padding" from SVG?

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:
enter image description here

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

Solution

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