CODEWITHSUNDEEP
csssvg
Jaco Pretorius
Jaco Pretorius

Reputation: 24840

How to get the path of an SVG to fill the entire image?

I'm using an inline SVG from FontAwesome. The image itself works fine, but for some reason that I can't quite understand the path element is not filling the SVG - the SVG tag itself seems to have padding around it.

Example here: https://jsfiddle.net/xhsypfub/3/

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512" width="75px" height="75px"><path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"/></svg>

How do I get the path element to fill the entire SVG? (And why does that not happen by default?)

Upvotes: 0

Views: 88

Answers (1)

Adam Johnston
Adam Johnston

Reputation: 1411

svg {
  border: 1px solid red;
  }
<html>
  <body>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="76 96 128 322" width="56px" height="75px"><path d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"/></svg>
  </body>
</html>

I think this is closer to what you want. Use the view box and width/height properties to "crop" the image (You'll probably have to edit the above properties to get it exactly how you want it, but this is a start). I would assume this isn't the default behavior so that there is a natural margin to the icon and it wouldn't sit up against surrounding text.

Upvotes: 1

Related Questions