redimensionar SVG

Redimensionar SVG

Dale a un SVG un ancho y un alto nuevos — o quítaselos del todo para que escale con su contenedor. El diseño en sí no se toca nunca.

redimensionar SVG

☞ funciona por completo en tu navegador — no se sube nada

Suelta tu SVG aquí

o haz clic para buscar — solo SVG

no se redibuja nada

Por qué redimensionar un SVG no pierde calidad

Una imagen de mapa de bits tiene que redibujarse al nuevo tamaño, y en el proceso se pierde detalle o se inventa. Un SVG lleva en cambio las instrucciones de dibujo, así que redimensionar es solo una nota sobre a qué tamaño renderizarlo. Cada trazado, color y degradado del archivo se queda exactamente igual.

Esa nota es el par width y height. El viewBox de debajo define el sistema de coordenadas interno y se deja en paz, y esa es la razón entera de que las formas escalen en vez de recortarse.

tres pasos

Cómo redimensionar un SVG

01

Suelta el SVG

Elige un archivo .svg — se queda en tu dispositivo.

02

Fija el tamaño

Escribe un ancho, elige un porcentaje o hazlo adaptable.

03

Descarga

Obtienes el mismo diseño al tamaño que pediste.

respuestas rápidas

Preguntas frecuentes sobre redimensionar SVG

¿Redimensionar hace borrosa la imagen?

No. No hay nada que emborronar: el archivo describe formas, no píxeles, así que se dibuja de nuevo al tamaño que le des. Vale igual al 25 % que al 400 %.

¿Qué consigue quitar el ancho y el alto?

Hace el SVG adaptable. Sin esos atributos, el navegador recurre al viewBox para la proporción y deja que el elemento llene su contenedor, de modo que puedes darle tamaño desde el CSS. Es la opción habitual para los iconos de una biblioteca de componentes.

Mi archivo no tenía viewBox y algo se veía raro

En ese caso se le añade uno. Sin viewBox, un SVG trata sus coordenadas como píxeles sin más, así que cambiar el ancho recortaría el dibujo o lo rellenaría con espacio vacío en lugar de escalarlo. El viewBox añadido coincide con el tamaño original, así que nada se desplaza.

¿El archivo se hace más pequeño al reducirlo?

Apenas: solo cambian dos números. Si quieres un archivo más ligero, pásalo por el optimizador de SVG, que elimina metadatos del editor y coordenadas con demasiados decimales.

¿Se sube mi archivo?

No. El archivo se analiza y se reescribe en tu navegador.