Créer une icône SVG évolutive et accessible.
Gardez l'icône simple, adaptable et sans scripts ou références externes inutiles. Décidez si elle est décorative ou signifiante et étiquetez-la à l'usage.
Adaptez le processus à votre tâche.
Définissez sens, viewBox, trait ou remplissage et taille. Produisez un SVG minimal sans référence inutile, puis testez les tailles réelles. Décidez du traitement accessible sur place, y compris le nom du bouton contenant.
- Ce que vous fournissez
- Concept simple et contraintes de style.
- Ce que vous obtenez
- SVG éditable avec viewBox et étiquette accessible.
Consultez les données et le résultat.
Entrée et sortie illustratives · exemple pédagogique, pas une exécution WebAct en direct
Exemple champ
Need a decorative 24×24 plus icon using currentColor and a two-unit stroke.
Exemple complet
<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.
Chargez ces données dans le prompt, puis copiez-le dans WebAct pour essayer la tâche. Votre résultat peut différer de l'illustration.
Décisions et dépannage.
Une icône décorative dans un bouton nommé doit-elle être annoncée à part ?
En général, masquez-la aux aides techniques et laissez le nom accessible du bouton porter l'action.
Pourquoi l'icône est-elle coupée malgré des coordonnées correctes ?
Le trait dépasse le chemin. Vérifiez viewBox, marges et limites affichées à l'épaisseur prévue.
Essayez avec votre propre source.
Remplacez l'exemple par vos données dans le prompt. Gardez les exigences nécessaires, puis copiez la tâche dans WebAct.
Personnaliser et copier la tâche ↑