insertar - ¿Cambiar el tamaño de SVG en html?

cambiar tamaño svg css

Question

Entonces, tengo un archivo SVG en HTML, y una de las cosas que escuché sobre el formato es que no se pixela cuando lo acerca.

Sé con un jpeg o lo que sea que podría tenerlo almacenado como un icono de 50 por 50, y luego realmente lo mostraré como (en lugar de pixelado) 100 por 100 miniatura (o 10 por 10), al configurar manualmente el alto y el ancho en el image_src etiqueta.

Sin embargo, los archivos SVG parecen usarse con etiquetas de objetos / incrustaciones, y cambiar la altura o el ancho de ESOS solo da como resultado que se asigne más espacio para la imagen.

¿Hay alguna forma de especificar que desea que una imagen SVG se muestre más pequeña o más grande de lo que realmente se almacena en el sistema de archivos?

Answer 1

Aquí hay un ejemplo de cómo obtener los límites usando svg.getBox() : https://gist.github.com/john-doherty/2ad94360771902b16f459f590b833d44

Al final, obtienes los números que puedes conectar a la svg para configurar la viewbox correctamente. Luego usa cualquier CSS en el div principal y listo.

 // get all SVG objects in the DOM
 var svgs = document.getElementsByTagName("svg");
 var svg = svgs[0],
    box = svg.getBBox(), // <- get the visual boundary required to view all children
    viewBox = [box.x, box.y, box.width, box.height].join(" ");

    // set viewable area based on value above
    svg.setAttribute("viewBox", viewBox);

Answer 2

Cambiar el ancho del contenedor también lo corrige en lugar de cambiar el ancho y alto del archivo fuente.

.SvgImage img{ width:80%; }

Esto soluciona mi problema de tamaño svg. puede dar cualquier% basado en su requerimiento.

Answer 3

Prueba estos:

1. Establezca la vista que falta y complete los valores de alto y ancho de los atributos de alto y alto establecidos en la etiqueta svg

2. Luego escale la imagen simplemente estableciendo el alto y el ancho en los valores de porcentaje deseados . Buena suerte.

3. Establezca una relación de aspecto fija con preserveAspectRatio="X200Y200 meet (ej. 200px), pero no es necesario

p.ej

 <svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="10%" 
   height="10%"
   preserveAspectRatio="x200Y200 meet"
   viewBox="0 0 350 350"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.0 r9654"
   sodipodi:docname="namesvg.svg">

Answer 4

puede redimensionarlo mostrando svg en etiqueta de imagen y etiqueta de imagen de tamaño, es decir,

<img width="200px" src="lion.svg"></img>

Answer 5

Abra su archivo .svg con un editor de texto (es solo XML) y busque algo así en la parte superior:

<svg ... width="50px" height="50px"...

Borrar atributos de ancho y alto; los valores predeterminados son 100%, por lo que debe extenderse a lo que el contenedor lo permita.