Bedienungsanleitung – SVG Icon Styler

Über das Tool

Der SVG Icon Styler wurde speziell für Webdesigner und Entwickler entwickelt, um Duotone-Icons, Logo-Kombinationen oder App-Assets extrem schnell im Browser zu gestalten. Ohne den Overhead schwerer Grafikprogramme kombinierst du Vektoren, Formen und Typografie auf bis zu 3 Ebenen inklusive direktem Export als SVG oder hochauflösendes PNG.

1. Ebenen-Verwaltung (Links)

Dynamische Ebenen: Beliebig viele Schichten flexibel über den Button + Ebene hinzufügen ergänzen, um beliebig komplexe Icons zu gestalten.
SVG-Upload / Code: SVG-Code direkt im Textfeld einfügen oder über den Upload-Button (oben links im Card-Header) als .svg-Datei laden.
Text+ Modul: Öffnet ein zentrales Bootstrap-Modal zur schnellen Vektortext-Eingabe.
Form+ Modul: Standard-Vektorformen (Kreis, Quadrat, Rechteck, Dreieck, Pfeil, Plus) per Klick einfügen.
Reihenfolge & Löschen: Sortierung per ↑ / ↓ anpassen, Sichtbarkeit umschalten (👁) oder Ebene vollständig Löschen (🗑).

2. Farben & Transformationen

Farben & Ränder: Füllfarbe, Randfarbe (Stroke) und Randbreite inklusive Schnellwahl-Palette (Color-Presets).
Größe & Drehung: Skalierung von 10% bis 300% sowie Rotation um $0^\circ$–$360^\circ$.
Feinpositionierung: Schieberegler für Pos X und Pos Y für pixelgenaue Ausrichtung.
Quick-Positioning: 9 Pfeil-Buttons zur direkten Ausrichtung an den Rändern (Oben-Links, Zentriert, Unten-Rechts etc.).

3. Canvas & Drag & Drop

Drag & Drop: Klicke ein Element im Vorschau-Canvas an und ziehe es mit gedrückter Maustaste an die gewünschte Position.
Hilfslinien: Über den Button Hilfslinien blendest du Mittelachsen und Schutzabstände ein/aus.
External Icons: Verlinkung zu FontAwesome zur schnellen Icon-Suche.
Reset: Setzt das gesamte Projekt über den gelben Button oben rechts auf den Standardzustand zurück.

4. Export & Formate

SVG Export

Generiert eine saubere, skalierbare Vector-Datei, in der alle Layer nativ zusammengefasst sind.

PNG Export

Rendert ein transparentes PNG. Die Pixel-Auflösung (z.B. 512px, 1024px) lässt sich im Eingabefeld frei wählen.

Schnellstart in 3 Schritten

Basis wählen

Füge in Ebene 1 eine Grundform (z. B. Quadrat über Form+) ein und wähle die Farbe.

Icon / Text einfügen

Lade in Ebene 2 ein Vektor-Icon hoch oder füge per Text+ ein Kürzel ein.

Ziehen & Exportieren

Richte das Element im Canvas per Drag & Drop aus und klicke auf PNG Export.