CODEWITHSUNDEEP
htmlcsssvg
JoseFranc
JoseFranc

Reputation: 213

How to modify an svg with css?

I am trying to resize (height and width) of an svg with css but doing so the image is cut off:

enter image description here

I gave it a width and height of 50px but this is what it looks like. what I need is to reduce its size to 50px.

This is the html structure of the button:

<button>
    <span class="sr-only">Play video</span>
    <svg xmlns="http://www.w3.org/2000/svg" width="94" height="94">
        <path fill="#FAF9F7" d="M47 0C21.084 0 0 21.084 0 47s21.084 47 47 47 47-21.084 47-47S72.916 0 47 0zm24.326 48.816L37.41 72.723a1.51 1.51 0 0 1-.868.277c-.247 0-.495-.06-.72-.185A1.6 1.6 0 0 1 35 71.406V23.594a1.6 1.6 0 0 1 .822-1.41 1.5 1.5 0 0 1 1.59.093l33.916 23.906c.42.297.672.79.672 1.317 0 .527-.253 1.02-.674 1.316z"/>
    </svg>
</button>

And these are the styles:

button {
width: 120px;
height: 120px;
padding: 0;
display: block;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
}

svg {
    margin: 0 auto;
    width: 50px;
    height: 50px;
}

Upvotes: 0

Views: 409

Answers (1)

ksav
ksav

Reputation: 20840

Try removing the width and height attributes from the SVG and instead adding the viewBox attribute.

button {
  width: 120px;
  height: 120px;
  padding: 0;
  display: block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
}

svg {
  margin: 0 auto;
  width: 50px;
  height: 50px;
}
<button>
    <span class="sr-only">Play video</span>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 94 94" >
        <path fill="#FAF9F7" d="M47 0C21.084 0 0 21.084 0 47s21.084 47 47 47 47-21.084 47-47S72.916 0 47 0zm24.326 48.816L37.41 72.723a1.51 1.51 0 0 1-.868.277c-.247 0-.495-.06-.72-.185A1.6 1.6 0 0 1 35 71.406V23.594a1.6 1.6 0 0 1 .822-1.41 1.5 1.5 0 0 1 1.59.093l33.916 23.906c.42.297.672.79.672 1.317 0 .527-.253 1.02-.674 1.316z"/>
    </svg>
</button>

Upvotes: 1

Related Questions