Skalierbare und zugängliche SVG-Icons erstellen.
Halten Sie Icons einfach, skalierbar und ohne unnötige Skripte oder externe Bezüge. Entscheiden Sie, ob dekorativ oder bedeutsam, und geben Sie beim Einsatz das passende Label.
Passe den Ablauf an deine Aufgabe an.
Legen Sie Bedeutung, viewBox, Strich oder Füllung und Größe fest. Erstellen Sie minimales SVG ohne unnötige externe Quellen und prüfen Sie echte Größen. Entscheiden Sie den barrierefreien Umgang am Einsatzort, auch den Namen der umgebenden Schaltfläche.
- Was du bereitstellst
- Einfaches Iconkonzept und Stilgrenzen.
- Was du erhältst
- Bearbeitbares SVG mit viewBox und barrierefreiem Label.
Sieh dir Eingabe und Ergebnis an.
Beispielhafte Ein- und Ausgabe · ein Lehrbeispiel, kein tatsächlicher WebAct-Durchlauf
Beispiel Eingabe
Need a decorative 24×24 plus icon using currentColor and a two-unit stroke.
Vollständiges Beispiel
<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.
Lade diese Eingabe in den Prompt und kopiere ihn zum Ausprobieren nach WebAct. Dein Ergebnis kann vom Beispiel abweichen.
Entscheidungen und Fehlerbehebung.
Soll ein dekoratives SVG in einer benannten Schaltfläche extra angesagt werden?
Meist verstecken Sie das dekorative Icon vor Hilfstechnik und lassen den zugänglichen Schaltflächennamen die Aktion sagen.
Warum ist das Icon abgeschnitten, obwohl Pfadkoordinaten stimmen?
Der Strich reicht über den Pfad hinaus. Prüfen Sie viewBox, Rand und Anzeigegrenze bei vorgesehener Strichstärke.
Probiere es mit deiner eigenen Quelle.
Ersetze das Beispiel im Aufgaben-Prompt durch dein Material. Behalte nötige Anforderungen bei und kopiere die Aufgabe nach WebAct.
Aufgabe anpassen und kopieren ↑