¿Cambiar el tamaño de SVG en html?

112

Por lo tanto, tengo un archivo SVG en HTML, y una de las cosas que he escuchado sobre el formato es que no se pixela cuando lo acercas.¿Cambiar el tamaño de SVG en html?

Sé con un jpeg o lo que sea que podría tenerlo almacenado como un icono de 50 por 50, y luego realmente mostrarlo como (en lugar de pixelado) 100 por 100 miniatura (o 10 por 10), configurando manualmente la altura y ancho en la etiqueta image_src

Sin embargo, parece que los archivos SVG se utilizan 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?

Fuente

2010-06-25 Jenny

125

Abra el archivo de .svg con un editor de texto (es sólo XML), y buscar algo como esto en la parte superior:

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

anchura de borrado y atributos de altura; los valores predeterminados son 100%, por lo que debe extenderse a lo que el contenedor lo permita.

Fuente

2010-06-25 19:15:33 Amadan

+49

Sí es cierto, pero también es necesario añadir un atributo 'viewBox' (por ejemplo viewBox = "0 0 50 50" en su ejemplo 50x50px), de lo contrario el contenido no podría escalar adecuadamente (dependerá del envase dimensiones). Scour lo hará automáticamente, http://www.codedread.com/scour/. –

¡Hurra! ¡Eso ayudó! ¡Ya tenía cosas al 100% en el archivo, resulta, pero el cuadro de vista era la clave! ¡Gracias a los dos! – Jenny

+12

En caso de que no sea obvio para nadie, 'viewBox' distingue entre mayúsculas y minúsculas. Además, las dos primeras coordenadas son la esquina superior izquierda si está recortando la imagen, y las dos últimas son el ancho y alto * antes * de la escala. –

Pruebe estos:

Establecer el negatoscopio falta y rellenar los valores de altura y anchura de la altura establecida y los atributos de la altura en la etiqueta svg
continuación, ampliar la imagen simplemente estableciendo el alto y el ancho al por ciento deseado valores. Buena suerte.
Set una relación de aspecto fija con preserveAspectRatio="X200Y200 meet (por ejemplo, 200 píxeles), pero no es necesario

por ejemplo

<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">

Fuente

2011-09-16 19:33:45

puede cambiar su tamaño mediante la visualización de SVG en etiqueta de la imagen y la etiqueta de la imagen a tamaño decir

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

Fuente

2012-08-09 05:47:30 Tanveer

El problema que creo con el uso de es que pierde las capacidades de conmutación por error de la etiqueta

¿Cambiar el tamaño de SVG en html?

Respuesta

Cuestiones relacionadas