No se puede cambiar el tamaño de una imagen SVG simplemente usando la propiedad de alto y ancho de CSS en la etiqueta img. Para cambiar el tamaño de la imagen SVG, siga estos pasos:
Método 1: la imagen SVG tomará el 100 % de todo el ancho y la altura disponibles. Para hacer que la imagen tenga el tamaño deseado, establezca la propiedad CSS de alto y ancho de la imagen
Ejemplo 1:
CSS
<!DOCTYPE html>
<html>
<style>
svg{
height: 200px;
}
</style>
<body>
<svg xmlns="http://www.w3.org/2000/svg">
<image href=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
/>
</svg>
</body>
</html>
Producción:
Método 2: modifique directamente el archivo .svg y establezca el ancho y la altura en el valor deseado. A continuación se muestra cómo se verá el archivo XML, si hay una imagen SVG presente
<svg height="40px" width="60px" . . . . . . ></svg>
Ejemplo 2:
HTML
<!DOCTYPE html> <html> <body> <h1>My first SVG</h1> <svg width="40" height="60"> <rect width="40" height="60" style= "fill: rgb(0, 0, 255); stroke-width: 10; stroke: rgb(0, 0, 0);" /> </svg> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por wanna_code y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA