Crear iconos SVG escalables y accesibles.
Mantenga icono simple, escalable y sin scripts ni referencias externas innecesarias. Determine si es decorativo o significativo y etiquételo en su contexto.
Adapta el flujo de trabajo a tu tarea.
Defina significado, viewBox, trazo o relleno y tamaño. Genere SVG mínimo sin referencias innecesarias y véalo a tamaños reales. Decida accesibilidad en uso, incluido nombre del control contenedor.
- Qué aportas
- Concepto sencillo y límites de estilo.
- Qué obtienes
- SVG editable con viewBox y etiqueta accesible.
Mira la entrada y el resultado.
Entrada y salida ilustrativas · ejemplo didáctico, no una ejecución de WebAct en directo
Ejemplo campo
Need a decorative 24×24 plus icon using currentColor and a two-unit stroke.
Ejemplo completo
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" aria-hidden="true"><path d="M12 5v14M5 12h14"/></svg> Give the surrounding button an accessible name such as Add item.
Carga esta entrada en el prompt y cópialo en WebAct para probar la tarea. Tu resultado puede diferir del ejemplo.
Decisiones y solución de problemas.
¿Un SVG decorativo en botón etiquetado debe anunciarse aparte?
Normalmente ocúltelo de tecnología asistiva y deje que el nombre accesible del botón comunique la acción.
¿Por qué se recorta aunque las coordenadas parezcan correctas?
El trazo se extiende fuera del camino. Compruebe viewBox, márgenes y límites renderizados al grosor real.
Pruébalo con tu propia fuente.
Sustituye el ejemplo por tu material en el prompt. Conserva los requisitos que necesites y copia la tarea en WebAct.
Personalizar y copiar la tarea ↑