Schaalbare en toegankelijke SVG-iconen maken.
Houd een icoon eenvoudig, schaalbaar en zonder onnodige scripts of externe verwijzingen. Bepaal of het decoratief of betekenisvol is en label het in zijn gebruikscontext.
Stem de werkwijze af op je taak.
Definieer betekenis, viewBox, lijn of vulling en grootte. Produceer minimale SVG zonder onnodige verwijzingen en bekijk op werkelijke grootte. Bepaal toegankelijkheid bij gebruik, inclusief de naam van de omliggende knop.
- Wat je aanlevert
- Eenvoudig icoonidee en stijlgrenzen.
- Wat je krijgt
- Bewerkbaar SVG met viewBox en toegankelijk label.
Bekijk de invoer en het resultaat.
Illustratieve invoer en uitvoer · een leervoorbeeld, geen live uitvoering van WebAct
Voorbeeld invoerveld
Need a decorative 24×24 plus icon using currentColor and a two-unit stroke.
Uitgewerkt voorbeeld
<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.
Laad deze invoer in de prompt en kopieer deze naar WebAct om de taak te proberen. Je resultaat kan afwijken van het voorbeeld.
Keuzes en probleemoplossing.
Moet een decoratieve SVG in een benoemde knop apart worden uitgesproken?
Meestal verbergt u de decoratie voor hulptechnologie en laat u de toegankelijke knopnaam de actie melden.
Waarom wordt het icoon afgesneden terwijl padcoördinaten goed lijken?
De lijn loopt buiten het pad. Controleer viewBox, marges en rendergrenzen bij de bedoelde lijndikte.
Probeer het met je eigen bron.
Vervang het voorbeeld door je eigen materiaal in de taakprompt. Behoud de eisen die je nodig hebt en kopieer de taak naar WebAct.
De taak aanpassen en kopiëren ↑