Elysia Tools
Mobile Navigation
Workflow Playbook
Freigegebene Icons bereinigen, interne oder externe Referenzen wählen, Kennungen und Farben auf der Seite prüfen und einzelne Rasteralternativen exportieren.
Themen
Dieser Ablauf liefert ein wiederverwendbares Icon-Set für eine Benutzeroberfläche. Bewahren Sie je Icon eine freigegebene eigenständige SVG-Datei mit Rolle und Zielgröße auf. Nutzen Sie svg-minifier-analyzer und vergleichen Sie die Darstellung nach der Optimierung. Prüfen Sie fehlende viewBox-Werte: Ein aus Abmessungen abgeleitetes Rechteck kann versetzte Formen abschneiden. Verläufe, Masken und Ausschnitte gehören ebenfalls ins Inventar. Für Tab-Icons und App-Manifeste nutzen Sie svg-favicon-icon-workflows.
Mit svg-sprite-generator lassen sich bis zu 30 Dateien kombinieren. Dokumentieren Sie erzeugte Kennungen und entfernte Duplikate; der Vergleich verwendet viewBox und Inhalt mit normalisierten Leerzeichen. Verlassen Sie sich nicht auf unveränderte Dateinamen. Eindeutige oberste IDs verhindern keine Kollision interner Verläufe oder Ausschnitte. Mehrfarbige Grafiken behalten ihre Farben. Nach dem Entfernen einfarbiger Attribute prüfen Sie Hohlräume und legen Füllung oder Kontur am Verbraucher fest: Ohne fill=none kann eine zuvor leere Fläche gefüllt werden.
Im symbol-Modus betten Sie die heruntergeladene Datei einmal ein und referenzieren die tatsächlichen Kennungen. Externe Dateien kommen an den endgültigen Ressourcenpfad; prüfen Sie das wirklich verwendete Fragment oder die Gruppe. Beispiele müssen mit jedem Icon, hellen und dunklen Hintergründen und aktiven Zuständen getestet werden. Eine isolierte Vorschau beweist keine funktionierende Referenz. Das Entfernen von Skripten und Ereignisattributen bedeutet keine vollständige Bereinigung beliebiger SVGs; verwenden Sie geprüfte Quellen. Reine Icon-Schaltflächen brauchen verständliche zugängliche Namen, Dekorationen eine passende Behandlung.
Benötigt das Ziel Rasterbilder, verwenden Sie svg-to-png oder svg-to-webp auf jeder eigenständigen Quelle. Eine versteckte Symbolsammlung ist keine sichtbare Übersicht. Prüfen Sie Pixelmaße, Alpha und kleine Darstellungen, dann übergeben Sie Sprite, Kennungszuordnung, Ersatzbilder und Testnotizen. Regelkonflikte untersuchen Sie mit css-authoring-layout-and-cascade-workflows; die umfassende Barrierefreiheitsprüfung folgt in web-accessibility-audits.
Workflow-Leitfaden
SVGs analysieren, Vorher und Nachher vergleichen und freigegebene Geometrie, Farben und viewBox wiederherstellbar aufbewahren.
Mit gewähltem Modus und Präfix zusammenführen, Duplikate und viewBox-Warnungen prüfen sowie interne Referenzen kontrollieren.
Beispiele an Dateipfad und tatsächliche Fragmentziele anpassen; jedes Icon, jeden Zustand und zugängliche Namen in der Anwendung prüfen.
Freigegebene Quellen für das Ziel in PNG oder WebP umwandeln und Pixelgröße, Alpha und Lesbarkeit prüfen.
symbol für eine einmal eingebettete Sammlung wählen; externe Ziele und Dateipfade zuerst in der bereitgestellten Anwendung prüfen.
Farben mehrfarbiger Grafiken erhalten; nur geprüfte einfarbige Formen bereinigen und Füllung sowie Kontur testen, weil das Entfernen von fill=none Hohlräume verändert.
PNG oder WebP aus dem freigegebenen Einzel-SVG erzeugen, wenn das Ziel keine Sprites nutzt; die versteckte Symbolsammlung ist kein sichtbares Gesamtbild.