Flujos creativos prácticos
SVG non-scaling-stroke: compara iconos en tres tamaños
El contorno de una taza puede volverse casi invisible al reducir una ilustración grande para una barra de herramientas. Conservar el mismo trazado SVG no garantiza conservar el grosor visible de la línea.
Usamos un contorno de la marca ficticia Cedar Cup para comparar el escalado predeterminado y non-scaling-stroke a 24, 48 y 96 píxeles CSS. Ciyo creó el código y una prueba renderizada en el navegador. La comparación ayuda a elegir el comportamiento; no convierte automáticamente un icono detallado en uno adecuado para tamaños pequeños.
Calcula primero el grosor esperado
Nuestro SVG usa un viewBox de 100×100 y stroke-width=2 en cada uno de sus cinco trazados. Con escalado uniforme y sin transformaciones adicionales, el grosor en pantalla predeterminado es 2 × tamaño renderizado / 100: 0.48, 0.96 y 1.92 píxeles CSS.
Aplicar vector-effect="non-scaling-stroke" a los trazados con contorno solicita que el trazo resista el escalado geométrico. En esta comparación su objetivo sigue siendo 2 píxeles CSS. La especificación del sistema de coordenadas SVG define el comportamiento; la tabla describe nuestros tamaños concretos.
| Tamaño del icono | Trazo predeterminado | Trazo sin escalado |
|---|---|---|
| 24×24 px CSS | 0.48 px CSS | 2 px CSS |
| 48×48 px CSS | 0.96 px CSS | 2 px CSS |
| 96×96 px CSS | 1.92 px CSS | 2 px CSS |
Pide geometría idéntica en ambas filas
Crea un proyecto nuevo en Ciyo y pide una página HTML comparativa con seis iconos SVG en línea. Mantén todos los trazados idénticos entre variantes y cambia únicamente vector-effect. Si el agente redibuja el icono pequeño, compararás dos decisiones de diseño a la vez.
Solicita el SVG editable y el código HTML. En nuestra sesión esos formatos permanecieron en el espacio del agente hasta que los pegó en el chat; el lienzo aceptó la prueba PNG. Los ejemplos enlazados conservan la geometría suministrada y las mediciones del navegador.
Para la marca ficticia Cedar Cup, crea un HTML descargable que compare una taza sencilla de contorno en SVG en línea con viewBox="0 0 100 100" y stroke-width="2" a 24, 48 y 96 píxeles CSS. Compara el escalado predeterminado con vector-effect="non-scaling-stroke" en cada trazado con contorno. Usa geometría idéntica y ningún relleno. Explica que non-scaling-stroke mantiene el grosor en pantalla, sin garantizar la calidad óptica en tamaños pequeños. Entrega el SVG independiente corregido, el HTML comparativo y una prueba PNG en el lienzo. Usa solo herramientas de código, sin generadores de imagen o vídeo de pago. Verifica geometría y tamaños mediante código. Es una demostración ficticia de un icono de interfaz.Juzga el icono pequeño en la prueba real
La prueba real muestra líneas cada vez más visibles en la fila predeterminada y un contorno más pesado a 24 píxeles en la fila sin escalado. En el tamaño menor los trazos del vapor se amontonan. Un grosor constante puede resultar excesivo para el espacio disponible.
Ciyo renderizó la comparación en Chromium e informó de los grosores esperados en pantalla. Conservamos el HTML y comprobamos por separado las seis cajas SVG y la geometría de los cinco trazados. Los valores calculados describen la geometría; los píxeles suavizados de los bordes requieren una valoración visual.
Simplifica el dibujo cuando los detalles se juntan
En una barra de herramientas, simplifica los detalles que se cierran y revisa el icono a su tamaño CSS real. Mantener una línea de dos píxeles no crea más espacio entre los trazos de vapor. Una vez elegido el escalado, considera reducir trazados o crear una variante específica para tamaños pequeños.
Revisa el peso óptico a 24 píxeles
Separa el significado de la interacción del grosor de la línea. Da al control un nombre accesible y suficiente contraste en el tema real. La prueba es una comparación visual, no una auditoría de accesibilidad de una interfaz terminada.
Comprueba de nuevo al colocar y exportar
Coloca el icono en su componente real, con su tamaño CSS y sus transformaciones. Revisa los temas claro y oscuro. Comprueba si el editor o exportador de destino conserva vector-effect antes de usar su resultado como recurso definitivo.
Este ejemplo compara escalado uniforme en una página de Chromium conservada. No establece cómo se comportan todos los editores vectoriales, impresoras o navegadores. Elige la variante adecuada para tu componente y entrega también su archivo fuente.
Preguntas prácticas
¿non-scaling-stroke mantiene legibles todos los detalles?
No. Controla el comportamiento del trazo. Los huecos pequeños, el espaciado estrecho y el suavizado aún pueden dificultar la lectura.
¿Por qué el trazo predeterminado mide solo 0.48 px a 24 px?
En este ejemplo, el trazo de dos unidades se escala por 24/100 dentro de un viewBox uniforme de 100 unidades.
¿Todos los iconos deberían usar trazos sin escalado?
Decídelo tras revisar los tamaños reales. Una línea fija puede resultar demasiado pesada en un icono pequeño.
Compara el icono donde se utilizará
Empieza con un ejemplo verificado en Ciyo. Conserva el original y revisa el resultado exportado antes de usarlo en tu proyecto.