¿Cambiar el tamaño de SVG en html?

Entonces, tengo un archivo SVG en HTML, y una de las cosas que he escuchado sobre el formato es que no se pixela al acercarlo.

Sé que con un jpeg o lo que sea, podría tenerlo almacenado como un icono de 50 por 50, y luego mostrarlo como una miniatura de 100 por 100 (o más bien pixelada) (o 10 por 10), configurando manualmente la altura y el ancho en image_src etiqueta.

Sin embargo, los archivos SVG parecen usarse con etiquetas de objeto / incrustación, y cambiar la altura o el ancho de AQUELLOS 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?

Abra su .svgarchivo con un editor de texto (es solo XML) y busque algo como esto 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.

Prueba estos:

1. Establezca el cuadro de vista faltante 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 la altura y el ancho en los valores porcentuales deseados . Buena suerte.

3. Establezca una relación de aspecto fija con preserveAspectRatio="X200Y200 meet(p. Ej. 200 px), 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">

puede cambiar su tamaño mostrando svg en la etiqueta de imagen y etiqueta de imagen de tamaño, es decir

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

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

.SvgImage img{ width:80%; }

Esto soluciona mi problema de redimensionar svg. puede dar cualquier% según su requerimiento.

He encontrado que es mejor agregar viewBoxy preserveAspectRatioatributos a mis SVG. El cuadro de vista debe describir el ancho y la altura completos del SVG en la forma 0 0 w h:

<svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 700 550"></svg>

Utiliza el siguiente código:

<g transform="scale(0.1)">
...
</g>

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

Al final, obtienes números que puedes conectar al svg para configurar la vista correctamente. Luego usa cualquier CSS en el div padre 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);

Tengo un archivo SVG en HTML [....] ¿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?

Los gráficos SVG, como otras obras creativas, están protegidos por la ley de derechos de autor en la mayoría de los países. Dependiendo de la jurisdicción, la licencia de la obra o si usted es o no el titular de los derechos de autor, es posible que no pueda modificar el SVG sin violar la ley de derechos de autor , lo crea o no.

Pero las leyes son temas complicados y, a veces, solo quieres hacer una mierda. Por lo tanto, puede ajustar la escala del gráfico sin modificar el trabajo en sí mismo utilizando la imgetiqueta con widthatributo dentro de su HTML.

Usando una solicitud HTTP externa para especificar el tamaño:

<img width="96" src="/path/to/image.svg">

Especificar tamaño en marcado usando un URI de datos :

<img width="96" src="data:image/svg+xml,...">

Los SVG se pueden optimizar para URI de datos para crear imágenes Favicon SVG adecuadas para cualquier tamaño:

<link rel="icon" sizes="any" href="data:image/svg+xml,%3Csvg%20viewBox='0%200%2046%2045'%20xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3EAfter%20Dark%3C/title%3E%3Cpath%20d='M.708%2045L23%20.416%2045.292%2045H.708zM35%2038L23%2019%2011%2038h24z'%20fill='%23000'/%3E%3C/svg%3E">