Cómo usar: Escalador de ViewBox SVG
- Pega un SVG que tenga un
viewBox(o ancho y alto). - Introduce el nuevo tamaño del viewBox, por ejemplo 24 × 24 para que coincida con un set de iconos.
- Elige la precisión y si el grosor del trazo también debe escalarse.
- Copia el resultado: ambas vistas previas deberían verse idénticas, solo cambian los números.
¿Por qué reescalar coordenadas en lugar de usar transform?
Los sets de iconos funcionan mejor cuando todos los iconos comparten el mismo viewBox (24×24, 20×20, 16×16…), así se alinean y los grosores de trazo se ven coherentes. Envolver un icono en <g transform="scale(0.5)"> funciona visualmente, pero deja números extraños en el código fuente, escala los trazos de forma impredecible y rompe las herramientas que leen los datos de path. Reescalar las coordenadas genera un SVG limpio que se comporta como si se hubiera dibujado en el nuevo tamaño.
Qué se escala
- Datos de path (
d): todos los comandos, absolutos y relativos: M, L, H, V, C, S, Q, T y A. En los arcos, los radios se escalan mientras la rotación y los flags se conservan. x,y,cx,cy,x1…y2,width,height,rx,ry,rypoints.- Opcionalmente,
stroke-widthyfont-size. - Un viewBox que no empieza en 0 0 se desplaza a 0 0.
Limitaciones
Los elementos con su propio atributo transform lo conservan sin cambios, y los porcentajes o tamaños basados en CSS no se convierten. Para obtener resultados exactos, aplana las transformaciones en Figma/Illustrator (o con convertTransform de SVGO) antes. El escalado no uniforme (factores distintos para X e Y) aproxima los radios de los círculos con el factor promedio.
Próximos pasos: limpia y pega el icono en Webflow con SVG to Webflow, o conviértelo para React con SVG to JSX.
También se busca como: viewbox svg, escalar path svg, redimensionar coordenadas svg, normalizar iconos, svg 24x24, transform path svg.
Herramientas que combinan con: Escalador de ViewBox SVG
- Conversor SVG a CSS — Pega un SVG y obtén un data URI compacto codificado en URL, además de CSS listo para usar con background-image y mask-image recoloreable.
- Calculadora de relación de aspecto — Redimensiona imágenes y videos sin distorsión: indica una proporción y un lado para obtener el otro, o introduce un tamaño para averiguar su proporción, con el CSS listo para pegar.
- Generador de favicons — Crea un paquete completo de favicones a partir de un logotipo, una letra o un emoji: un archivo favicon.ico con varios tamaños, un icono táctil de Apple, iconos para Android y PWA, un webclip de Webflow, el manifiesto web y las etiquetas HTML para pegar.
- Generador de animaciones CSS — Diseña animaciones CSS sobre una línea de tiempo real de keyframes.
Preguntas frecuentes
¿Cómo cambio un SVG de 512×512 a 24×24?
¿Mi icono se verá diferente?
¿Por qué dejar stroke-width sin escalar?
¿Qué pasa con las transformaciones?
transform existentes se dejan como están y verás una advertencia. Aplánalos en tu herramienta de diseño para obtener un resultado totalmente limpio.