redimensionar SVG
☞ funciona por completo en tu navegador — no se sube nadaSuelta tu SVG aquí
o haz clic para buscar — solo SVG
Vista previa
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.
o haz clic para buscar — solo SVG
Vista previa
no se redibuja nada
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
Elige un archivo .svg — se queda en tu dispositivo.
Escribe un ancho, elige un porcentaje o hazlo adaptable.
Obtienes el mismo diseño al tamaño que pediste.
respuestas rápidas
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 %.
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.
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.
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.
No. El archivo se analiza y se reescribe en tu navegador.