🎨 SVG Previewer & Editor

Erstelle, bearbeite und exportiere SVG-Icons für WordPress

SVG Code

Live Vorschau

Größe: -
ViewBox: -

Export Optionen

Vorgefertigte Icons

AI Prompt Vorlagen

Kopiere diese Prompts für ChatGPT, Claude oder andere AI-Tools

🎯 Basis Icon erstellen

Erstelle ein einfaches, minimalistisches SVG-Icon für [THEMA]. Das Icon sollte 24x24px viewBox haben, nur einen Path verwenden und mit "currentColor" gefüllt sein. Der Stil sollte modern und klar sein.

✏️ Icon-Set erstellen

Erstelle ein zusammenhängendes Set von 5 SVG-Icons zum Thema [THEMA]. Jedes Icon sollte: viewBox="0 0 24 24", stroke-width="2", keine Fill-Farbe (nur Stroke), konsistenten Stil haben. Icons: [ICON1, ICON2, ICON3, ICON4, ICON5]

🎨 Detailliertes Logo

Erstelle ein SVG-Logo für [FIRMENNAME/PROJEKT]. Stil: [modern/vintage/minimalistisch]. Farben: [FARBE1, FARBE2]. Das Logo sollte skalierbar sein, auf weißem und dunklem Hintergrund funktionieren und maximal 3 Farben verwenden. ViewBox: 0 0 100 100

🔄 Icon konvertieren

Konvertiere dieses Icon in sauberen SVG-Code: [BESCHREIBUNG]. Optimiere den Code, entferne unnötige Attribute, verwende relative Pfade wo möglich und halte die Dateigröße minimal. ViewBox: 0 0 24 24

🎭 Icon mit Varianten

Erstelle ein [THEMA]-Icon in 3 Varianten: 1) Outline (nur Stroke), 2) Filled (nur Fill), 3) Duotone (2 Farben). Alle mit viewBox="0 0 24 24" und konsistentem Design. Verwende semantische Path-Namen.

🌐 WordPress-optimiert

Erstelle ein WordPress-optimiertes SVG-Icon für [ZWECK]. Das Icon muss: class="wp-icon" haben, aria-label für Accessibility, width/height-Attribute, mit currentColor arbeiten und in Gutenberg-Blöcken funktionieren. ViewBox: 0 0 24 24

SVG Ressourcen & Tools

Nützliche Quellen für SVG-Icons und Code

🎨

Heroicons

Handgefertigte SVG-Icons von den Tailwind-Machern

Besuchen →
💡 Tipp: Kopiere den Code direkt mit einem Klick

Lucide Icons

1000+ konsistente, open-source Icons

Besuchen →
💡 Tipp: Nutze die Suchfunktion mit Kategorien
🔥

Feather Icons

Minimale, schöne Open-Source-Icons

Besuchen →
💡 Tipp: Alle Icons als einzelne SVG-Dateien
🎯

Iconify

150.000+ Icons aus allen großen Sets

Besuchen →
💡 Tipp: SVG, React, Vue Code generieren

SVG Optimizer

SVGO - Online SVG komprimieren

Besuchen →
💡 Tipp: Perfekt zum Aufräumen von AI-generierten SVGs
🎨

SVG Backgrounds

Generiere SVG-Hintergrund-Muster

Besuchen →
💡 Tipp: Ideal für Hero-Sections
📚

MDN SVG Tutorial

Komplettes SVG-Tutorial und Referenz

Besuchen →
💡 Tipp: Lerne SVG von Grund auf
🔧

SVG Path Editor

Visuell SVG-Paths bearbeiten

Besuchen →
💡 Tipp: Für komplexe Path-Anpassungen

🔌 WordPress Integration

SVG in WordPress Theme einfügen:
<?php
// functions.php - SVG Upload erlauben
function allow_svg_upload($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter('upload_mimes', 'allow_svg_upload');

// SVG inline ausgeben
function get_inline_svg($filename) {
    $path = get_template_directory() . '/assets/icons/' . $filename;
    return file_exists($path) ? file_get_contents($path) : '';
}
?>

<!-- Im Template verwenden -->
<?php echo get_inline_svg('icon-name.svg'); ?>
Kontakt ← Zurück zur Toolbox