CODEWITHSUNDEEP
htmlsvg
Rob Kwasowski
Rob Kwasowski

Reputation: 2780

How do I edit an SVG to remove the empty space around the shape?

I have this SVG of the number one.

I want the path element inside to expand to fill up the whole SVG element so I can treat it like a normal image (but with the vector scaling), but it behaves very awkwardly and I have to make the SVG really big.

<svg fill="#000" viewBox="0 180 600 600">
  <path d="M10.125 286.1719 Q10.125 243.7031 40.4297 213.2578 Q70.7344 182.8125 113.4844 182.8125 Q156.0938 182.8125 186.4688 213.2578 Q216.8438 243.7031 216.8438 286.1719 Q216.8438 329.3438 186.3984 359.6484 Q155.9531 389.9531 113.4844 389.9531 Q70.875 389.9531 40.5 359.5781 Q10.125 329.2031 10.125 286.1719 ZM131.625 356.7656 L131.625 213.3281 L109.4062 213.3281 Q104.625 226.9688 91.3359 236.8828 Q78.0469 246.7969 68.7656 249.6094 L68.7656 274.3594 Q89.5781 267.4688 104.2031 253.6875 L104.2031 356.7656 L131.625 356.7656 Z"/>
</svg>

Upvotes: 0

Views: 82

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101966

I recommend reading up on how the viewBox works.

But briefly, it describes the area of the coordinate space that the contents of the SVG occupy. The four values are minX, minY, width, and height. In that order.

Your minX and minY were reasonable, but your width and height values were way too big. I've reduced them from 600 to 220 in my example below. If you need a tighter fit, you can tweak the values further. Ie. increase minX and minY a bit, and reduce width and height a bit.

svg {
  background-color: red;
}
<svg fill="#000" viewBox="0 180 220 220">
  <path d="M10.125 286.1719 Q10.125 243.7031 40.4297 213.2578 Q70.7344 182.8125 113.4844 182.8125 Q156.0938 182.8125 186.4688 213.2578 Q216.8438 243.7031 216.8438 286.1719 Q216.8438 329.3438 186.3984 359.6484 Q155.9531 389.9531 113.4844 389.9531 Q70.875 389.9531 40.5 359.5781 Q10.125 329.2031 10.125 286.1719 ZM131.625 356.7656 L131.625 213.3281 L109.4062 213.3281 Q104.625 226.9688 91.3359 236.8828 Q78.0469 246.7969 68.7656 249.6094 L68.7656 274.3594 Q89.5781 267.4688 104.2031 253.6875 L104.2031 356.7656 L131.625 356.7656 Z"/>
</svg>

The red background was added just so you can see the margin better.

Upvotes: 1

Related Questions