SVG Color Replacer

Ja. SVG Color Replacer aktualisiert Füllung und Kontur zusammen, sodass Umrisse und Innenbereiche ausgerichtet bleiben. Wenn Sie nur eine wollen, duplizieren Sie die Datei und führen Sie SVG Color Replacer mit verschiedenen Optionen aus, um Ergebnisse zu vergleichen. Für konsistentes Theming wählen Sie Farben aus demselben Token-Set wie im UI und testen Sie auf hellem und dunklem Hintergrund.

currentColor weist das SVG an, die CSS-Farbe vom übergeordneten Element zu erben. SVG Color Replacer kann alle soliden Farben zu currentColor wechseln, damit Icons auf Theme-Tokens reagieren. Kombinieren Sie die SVG Color Replacer-Ausgabe mit CSS-Variablen für konsistentes Theming über Komponenten hinweg. Wenn Sie CSS-Variablen verwenden, erbte die Ausgabe automatisch Updates ohne erneutes Bearbeiten des SVG. Dies funktioniert gut mit Icon-Komponenten, die einen Farb-Prop akzeptieren.

Ja. SVG Color Replacer behält none-Werte unverändert bei, sodass transparente Formen transparent bleiben. Wenn Sie unerwartete Füllungen sehen, prüfen Sie auf Inline-Styles, die Attribute überschreiben, bevor Sie SVG Color Replacer erneut ausführen. Wenn Sie sich auf Konturbreiten für Ausrichtung verlassen, überprüfen Sie die Vorschau nach dem Ersetzen, um sicherzustellen, dass keine visuelle Verschiebung vorliegt.

SVG Color Replacer ersetzt nur Solide Werte. Verläufe und Muster bleiben wie definiert, wodurch komplexe Illustrationen erhalten bleiben. Wenn Sie Verlaufsänderungen benötigen, passen Sie diese in einem Design-Tool an und führen Sie dann SVG Color Replacer für die verbleibenden soliden Farben aus. Muster und Verläufe enthalten oft mehrere Stops, daher verhindert die Handhabung upstream inkonsistente Farbtöne. Wenn Sie ein einheitliches Erscheinungsbild benötigen, passen Sie die Stop-Farben in Ihrem Design-Tool an und exportieren Sie erneut.

Nein. SVG Color Replacer läuft lokal, sodass Assets Ihr Gerät nie verlassen. Dieser lokale SVG Color Replacer-Workflow ist sicher für Markenicons, Produkt-UIs und Client-Bibliotheken und funktioniert even mit strengen Unternehmensnetzwerkrichtlinien. Lokale Verarbeitung vermeidet auch Dateigrößenbeschränkungen durch Upload-Dienste und hält die Einhaltung einfach.

Ja. Nach der Verwendung von SVG Color Replacer führen Sie Optimierung aus, um Bytes zu reduzieren. SVG Color Replacer ändert nur Farben, daher sind Optimierung und Minifizierung noch wertvoll für Größe und Leistung, besonders bei großen Icon-Sets. Führen Sie eine schnelle Vorschau nach der Optimierung aus, um zu bestätigen, dass Kanten scharf bleiben und Transparenz erhalten bleibt.

Inline-Styles werden wie Attribute behandelt, sodass solide Farben konsistent ersetzt werden. Wenn Sie mehr Kontrolle möchten, konvertieren Sie Styles vor dem Ersetzen der Farben in Attribute in Ihrer Quelldatei. Wenn Styles in einem Style-Tag definiert sind, ziehen Sie in Betracht, sie zuerst inline zu verschieben für vorhersagbare Ergebnisse. Präsentations-Attribute überschreiben normalerweise vererbte Styles, seien Sie also konsistent in Ihrer Quelle. Dies ist besonders nützlich, wenn Icons aus mehreren Quellen stammen.

Dieses Tool wendet eine einzelne Ersetzung auf alle soliden Farben an. Wenn Sie selektive Änderungen benötigen, duplizieren Sie das SVG und isolieren Farben in Ihrem Editor, dann wenden Sie die Ersetzung auf jede Version an. Für erweiterte Workflows halten Sie ein basis-SVG vor und leiten Varianten mit Build-Skripten oder CSS-Klassen ab. Sie können auch verschiedene Themes zur Laufzeit anwenden, indem Sie CSS-Klassen austauschen.

Ja. SVG Color Replacer ist kostenlos in Ihrem Browser nutzbar. Keine Downloads oder Installation erforderlich.

Nein. SVG Color Replacer funktioniert sofort im Browser ohne Anmeldung, und Dateien bleiben lokal.