SVG kostenlos erstellen

Was ist SVG und warum ist es für das Web ideal?

SVG (Scalable Vector Graphics) ist ein XML-basiertes Vektorgrafikformat, das 1999 vom W3C standardisiert wurde und heute von allen modernen Browsern nativ unterstützt wird. Im Gegensatz zu Rasterformaten wie PNG oder JPG werden SVG-Grafiken mathematisch beschrieben – als Kurven, Formen und Pfade. Das bedeutet: SVGs sind unendlich skalierbar ohne Qualitätsverlust. Ein 10 KB großes SVG sieht auf einem kleinen Smartphone-Bildschirm genauso scharf aus wie auf einem 4K-Monitor. Für Logos, Icons, Illustrationen und Infografiken ist SVG das überlegene Format. Zusätzlich lassen sich SVGs direkt in HTML einbetten, per CSS stylen und mit JavaScript animieren.

SVG vs. PNG vs. JPG vs. WebP – Wann welches Format?

Die Formatwahl hängt von der Art des Inhalts ab. SVG eignet sich hervorragend für: Logos und Icons, Illustrationen mit klaren Formen, UI-Elemente wie Buttons und Badges, Infografiken und Diagramme, und animierbare Grafiken. PNG ist besser für: Fotos mit Transparenz, Screenshots, Bilder mit vielen Farben und feinen Details. JPG ist optimal für: Fotos ohne Transparenzanforderung, Bilder bei denen die Dateigröße entscheidend ist. WebP bietet die beste Komprimierung für alle Bildtypen, wird aber noch nicht überall unterstützt. Die goldene Regel: Wenn es mit Vektorgrafik darstellbar ist, verwende SVG – du sparst Dateigröße und gewinnst Skalierbarkeit.

SVG in HTML einbetten: Die drei Methoden

Es gibt drei Möglichkeiten, SVGs in Webseiten einzubinden. Inline SVG: Den SVG-Code direkt in das HTML-Dokument kopieren – erlaubt CSS-Styling und JavaScript-Interaktion, erhöht aber die HTML-Dateigröße. <img>-Tag: Die SVG-Datei als Bildquelle einbinden (<img src="icon.svg">) – einfachste Methode, aber kein CSS-Zugriff auf SVG-Elemente. CSS-Background-Image: Als Hintergrundbild in CSS setzen (background-image: url(icon.svg)) – ideal für dekorative Elemente. Für interaktive SVGs (Farbe bei Hover ändern, Animationen) empfehlen wir das direkte Einbetten im HTML. Unser exportierter SVG-Code ist direkt für alle drei Methoden geeignet.

SVG-Farbverläufe: linearGradient und radialGradient

SVG unterstützt nativ zwei Arten von Farbverläufen. linearGradient erzeugt einen linearen Farbverlauf zwischen zwei Punkten – ideal für Backgrounds, Schaltflächen und Balken in Diagrammen. Der Verlauf kann in jede Richtung zeigen: von oben nach unten, diagonal oder horizontal. radialGradient erzeugt einen kreisförmigen Verlauf von innen nach außen – besonders gut für Kugeln, Knöpfe mit Tiefeneffekt und Glanzeffekte. In unserem Tool kannst du beide Verlaufstypen mit einem Klick aktivieren und die Richtung anpassen. Der generierte SVG-Code enthält die korrekten <defs>-Definitionen für maximale Browser-Kompatibilität.

SVG für Logos und Icons: Best Practices

Beim Erstellen von SVG-Logos und -Icons gibt es wichtige Best Practices. ViewBox definieren: Immer das viewBox-Attribut setzen (z.B. viewBox="0 0 100 100"), damit das SVG korrekt skaliert. Keine hartkodierten Pixel-Werte: Absolute Pixelangaben machen SVGs weniger flexibel. Kontur vs. Füllung: Icons nur mit Füllung (fill) oder nur mit Kontur (stroke) sind wartungsfreundlicher – Mischungen aus beidem können bei Farbänderungen per CSS problematisch sein. Kompression: SVGs können mit SVGO (kostenloser Tool) deutlich komprimiert werden – oft 50–80% Dateigrößenreduzierung möglich. Accessible SVGs: <title>- und <desc>-Elemente für Screenreader hinzufügen.

SVG animieren: SMIL, CSS und JavaScript

SVGs sind einzigartig, weil sie direkt im Browser animiert werden können – ohne Video- oder GIF-Format. CSS-Animationen: SVG-Elemente können wie HTML-Elemente mit @keyframes animiert werden – einfachste Methode für Hover-Effekte und einfache Animationen. SMIL-Animationen: SVG's eigenes Animationssystem mit <animate>, <animateTransform> – wird von allen modernen Browsern unterstützt. JavaScript (GSAP, anime.js): Für komplexe Animationen und Interaktivität. Die Kombination aus SVG und CSS-Animationen ist besonders leistungsstark für Ladeanimationen, Hover-Effekte auf Icons und interaktive Diagramme – und das alles ohne externe Bibliotheken.

Alternativen: Inkscape, Figma, Illustrator

Für professionelles SVG-Erstellen gibt es spezialisierte Tools. Inkscape ist ein kostenloser, Open-Source-Vektorgrafik-Editor für Windows, Mac und Linux – der direkteste Ersatz für Adobe Illustrator. Figma (kostenlos für Einzelpersonen) ist ein browserbasiertes Design-Tool, das SVG-Export unterstützt. Adobe Illustrator ist die Industriestandard-Software für professionelle Vektorgrafiken – kostenpflichtig. Canva bietet SVG-Export (in der Pro-Version). Unser Tool ist ideal für schnelle, einfache SVGs – Formen, Icons und Text – ohne Software-Installation und komplett kostenlos. Den generierten SVG-Code kannst du anschließend in Inkscape oder Figma weiterbearbeiten.