twltr/svg-design

Diseño SVG

Habilidad hoja en Diseño; se accede a través de su dominio o por nombre.

Comienza con el rol del gráfico en la marca o interfaz. Elige su composición, silueta, proporciones, tipografía y color para ese contexto, preservando una dirección visual establecida cuando exista. Luego expresa el diseño como marcado SVG limpio y mínimo. Cada elemento y atributo debe ganarse su lugar.

Esta habilidad posee logos, conjuntos de iconos, activos de marca y gráficos web decorativos o expresivos. Elige según el propósito: el logo de una página de inicio y el arte decorativo del héroe pertenecen aquí; un diagrama que explica cómo funciona su producto pertenece a editorial-svg-diagrams. La composición de página y el diseño de interfaz pertenecen a frontend-design.

Una pequeña decisión de logo

Resumen ilustrativo: Crea una marca de montaña que siga siendo reconocible en un encabezado de sitio web y un icono de aplicación compacto. Comienza con la silueta exterior y un recorte de cresta distintivo; omite líneas de nieve finas que desaparecen al reducir. Verifica la marca en ambos tamaños reales y contra cada superficie prevista antes de agregar color o detalle. Si esos usos necesitan diferentes niveles de detalle, haz una variante explícita para tamaño pequeño en lugar de reducir una marca ilegible.

Antes de una composición sustancial o revisión visual, evalúa la capacidad visual del modelo y el acceso a los tamaños y superficies de uso renderizados. Si Puppeteer está disponible, usa su enrutamiento de fase/modelo actual para un autor o revisor independiente más adecuado, pasando el resumen, la dirección establecida y los tamaños objetivo. Reutiliza un propietario de delegación activo; una pequeña edición adecuada puede permanecer directa. Las comprobaciones del propio diseñador no son aceptación independiente. La falta de capacidad o acceso renderizado deja esa comprobación abierta; el SVG válido por sí solo no establece un buen diseño.

Enrutamiento de Temas

Tarea	Cargar referencia
Combinaciones de banderas de arco, formas de path comunes	references/path-patterns.md
Diseño de logos, tipografía, espacio negativo	references/logo-techniques.md
Diseño de iconos, sistemas de cuadrícula, alineación de píxeles	references/icon-design.md
Gradientes, máscaras, clips, filtros, transformaciones (decisiones de diseño)	references/advanced-techniques.md
Animación (keyframes CSS, escalonamiento, GPU, easing, específico de SVG)	references/animation.md
Optimización, sprites, configuración SVGO	references/optimization.md
Accesibilidad, problemas de navegador	references/accessibility-and-pitfalls.md
Flujo de trabajo de edición, operaciones booleanas, combinación de SVGs	references/editing-workflow.md

Esqueleto SVG

Para un icono de UI con trazo, comienza desde esta estructura:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
  <!-- contenido -->
</svg>

Ajusta viewBox para que coincida con el lienzo de diseño. Omite los atributos width/height para permitir que el SVG escale con su contenedor (agrégalos solo cuando se necesite un tamaño fijo).

Para logos y arte web, elige el lienzo, los rellenos y los trazos de la composición en lugar de heredar los valores predeterminados del icono.

Convenciones de Tamaño de Lienzo

Tamaño	Caso de uso	Notas
0 0 16 16	Micro iconos, favicons	Heroicons micro, GitHub Octicons
0 0 20 20	Iconos UI pequeños, elementos de formulario	Heroicons mini
0 0 24 24	Iconos estándar (más comunes)	Lucide, Heroicons outline, Material
0 0 32 32	Iconos medianos, navegación	Phosphor usa 256x256 internamente
0 0 48 48	Iconos de visualización grandes	Iconos de aplicación, ilustraciones
Personalizado	Logos, ilustraciones	Coincide con la relación de aspecto natural

Para iconos de UI estándar, usa 24x24 por defecto a menos que el sistema de iconos circundante use otra cuadrícula. Los logos y gráficos web usan un lienzo que se ajuste a su composición.

Decisión entre Forma y Path

Usa primitiva de forma cuando...	Usa <path> cuando...
La forma es una figura geométrica básica	La forma tiene curvas, contornos complejos
La legibilidad importa (un círculo debería verse como <circle>)	Necesitas minimizar el número de elementos
Necesitas animar propiedades individuales (r, cx, cy)	Combinar múltiples formas en un solo elemento
La forma será modificada programáticamente	Exportando desde herramientas de diseño (los paths son universales)

Valores Predeterminados de Estilo

Establece estos en el elemento raíz <svg> para evitar repetición en elementos hijos:

Atributo	Predeterminado icono	Predeterminado logo	Por qué
fill	none	varía	Los iconos típicamente tienen trazo, los logos tienen relleno
stroke	currentColor	none o currentColor	Hereda el color del texto del elemento padre
stroke-width	2 (en 24x24)	varía	Peso consistente en todos los iconos
stroke-linecap	round	round o butt	Extremos redondeados se ven más limpios en tamaños pequeños
stroke-linejoin	round	round o miter	Evita picos afilados en las uniones

currentColor es tu amigo. Permite que el SVG herede cualquier color que tenga el elemento padre, haciendo que los iconos sean tematizables con cero CSS adicional.

Ancho de Trazo Relativo a ViewBox

stroke-width está en unidades de viewBox, no en píxeles. Siempre establécela en relación con las dimensiones de tu lienzo:

viewBox	Ancho de trazo típico	Resultado visual
16x16	1.5	~9.4% del lienzo
24x24	2	~8.3% del lienzo
32x32	2-2.5	~6.3-7.8% del lienzo
48x48	3	~6.3% del lienzo
256x256	16	~6.3% del lienzo

Cuándo Convertir Formas a Paths

Convierte cuando:

• Combinando múltiples formas en un solo path compuesto (operaciones booleanas)
• Necesitas la forma como parte de una composición de path más grande
• Distribuyendo a entornos que solo soportan <path>
• Optimizando para mínimos elementos DOM

Mantén como formas cuando:

• La legibilidad del código importa (un <circle> es autodocumentable)
• Necesitas animar propiedades específicas (animar r en un círculo es más limpio que animar datos de path)
• El SVG será modificado programáticamente

Plantilla de rectángulo redondeado a path

Los parámetros de arco aquí son propensos a errores al derivarlos. Usa esto como referencia:

<!-- <rect x="2" y="2" width="20" height="20" rx="3" /> se convierte en: -->
<path d="M 5 2 h 14 a 3 3 0 0 1 3 3 v 14 a 3 3 0 0 1 -3 3 h -14 a 3 3 0 0 1 -3 -3 v -14 a 3 3 0 0 1 3 -3 Z" />

fill-rule: evenodd vs nonzero

Usa evenodd cuando tengas formas compuestas con agujeros. Es más simple porque no necesitas preocuparte por la dirección del enrollado:

<!-- Donut usando evenodd (la dirección no importa) -->
<path fill-rule="evenodd" d="
  M 12 2 A 10 10 0 1 1 12 22 A 10 10 0 1 1 12 2 Z
  M 12 7 A 5 5 0 1 1 12 17 A 5 5 0 1 1 12 7 Z
" fill="black" />

Con nonzero (predeterminado), el círculo interior debe enrollarse en la dirección opuesta para crear el agujero.

Proceso de Diseño de Logos

Al crear logos (no iconos), sigue este proceso:

0. Resuelve solo una brecha material en el briefing. Reutiliza una dirección de marca proporcionada, nombre, audiencia, casos de uso y referencia. Si una elección faltante cambiaría materialmente el diseño, haz una pregunta corta usando la interacción soportada por el host actual. Usa un valor reversible sensato para elecciones secundarias; nunca asumas una herramienta de pregunta particular ni requieras una entrevista de mood-board.

1. Explora múltiples metáforas, no múltiples diseños de una metáfora. La diversidad conceptual importa más que las variaciones de diseño. Sigue el proceso de ideación completo en references/logo-techniques.md, que cubre lluvia de ideas específica del dominio, requisitos de diversidad de categorías y evitación de clichés.

2. Garantiza variedad estructural. Cada conjunto de logos debe abarcar múltiples categorías de enfoque, no solo múltiples metáforas dentro del mismo estilo. Incluye al menos una de cada columna al presentar 5 o más opciones: un enfoque tipográfico/marca de palabra, un icono simbólico, una marca geométrica abstracta y un híbrido de letra con metáfora. Consulta la tabla de diversidad de categorías en references/logo-techniques.md.

3. Previsualiza a través del host disponible. Cuando la comparación progresiva ayude, usa assets/preview.html de esta habilidad y la estructura en references/editing-workflow.md. Muestra o inspecciona la vista previa a través de un visor compatible con el host actual; no asumas que un navegador, comando de shell o ventana en primer plano está disponible. Si ningún visor puede renderizarlo, indica el límite y proporciona los archivos SVG y una vista previa renderizada donde sea compatible. Nunca afirmes que una vista previa no observada fue verificada visualmente.

4. Para logos de color, crea siempre una variante -dark.svg. Los bordes azul marino oscuro (#1E3A5F) que se ven geniales sobre blanco desaparecen en fondos oscuros. Las variantes oscuras necesitan bordes más claros (#4B8BBE), anillos más claros (#3B6B8A) y centros casi blancos (#E2E8F0).

5. Planifica tu presupuesto vertical antes de dibujar. En un lienzo de 32x32 con 3 elementos apilados, tienes ~30 unidades utilizables. Primero bosqueja la distribución vertical (ej., caja=12, espacio=2, capa=5, espacio=2, capa=5) para evitar recortes en los bordes del viewBox.

Anti-Patrones

No hagas	Haz en su lugar
Codificar width="24" height="24" sin viewBox	Usa siempre viewBox; agrega width/height solo si es necesario
Establecer fill="none" en un grupo <g>	Establece fill en elementos individuales o en la raíz <svg>
Usar unidades px dentro de SVG	Las coordenadas SVG no tienen unidades; se asignan al viewBox
Incluir metadatos del editor (<sodipodi:*>, <inkscape:*>)	Elimina toda la basura del editor
Usar <text> para marcas de palabras en SVGs distribuidos	Convierte texto a paths para portabilidad
Anidar transformaciones tres niveles de profundidad	Aplana transformaciones en coordenadas de path
Usar xlink:href	Usa href (xlink está obsoleto)
Olvidar xmlns en archivos SVG independientes	Incluye siempre xmlns="http://www.w3.org/2000/svg"
Usar precisión decimal más allá de 2-3 lugares para iconos	Redondea a 2 decimales para iconos, 3 máximo para arte complejo

Referencias Cruzadas

• El diseño del sitio web o interfaz circundante no es trabajo de esta habilidad. Devuélveselo a quien pidió el gráfico, con el rol y las restricciones de tamaño del gráfico, y sigue la tipografía, colores y jerarquía visual establecidos o el sistema de diseño existente del proyecto mientras tanto.
• Si editorial-svg-diagrams está disponible, úsalo para figuras que expliquen conceptos, relaciones, procesos o sistemas. De lo contrario, mantén el resultado de esta habilidad enfocado en gráficos de marca e interfaz, y explica la capacidad de diagramación no disponible si el resultado solicitado depende de ella.