Estoy tratando de cambiar el tamaño (alto y ancho) de un svg con css pero al hacerlo, la imagen se ve cortada. Lo que necesito es reducir su tamaño a 50px.
Le di un width y height de 50px pero esto eso es lo que se ve.
Esta es la estructura html del botón (si agrego 50 en lugarr del 94 que tiene el svg, se ve igualmente cortada):
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" 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>
svg { margin: 0 auto; width: 50px; height: auto; }
Eso garantiza que la imagen no se deforme. En cuanto al recorte, debe haber algún otro atributo o asignación que lo provoca. Ha debido deformarse si no era cuadrada.width="94" height="94"
eso seguramente incide en el recorte. Prueba a quitarlos y deja solo el css