SVG Nexus / EXPLAINER Ohne Anmeldung | 100% im Browser verarbeitet

Was ist SVG?

SVG (Scalable Vector Graphics) ist das vom Browser unterstützte Format für Icons, Logos und Illustrationen: XML-Code, der in jeder Größe scharf bleibt und sich mit einem Attribut umfärben lässt.

SVG in einer Minute

Eine SVG-Datei ist reiner Text. Sie lässt sich im Browser, im Texteditor oder im Designwerkzeug öffnen, wie HTML lesen und ohne Qualitätsverlust umfärben, skalieren und umformen. Deshalb werden Interfaces, Logos und Buttons als Vektor ausgeliefert.

SVG Nexus indiziert offene SVG-Icon-Bibliotheken und Illustrationen, damit Sie suchen, umfärben und produktionsreifen Code direkt in React, Vue, HTML, CSS oder Ihr Lieblings-Designwerkzeug kopieren. Kein Konto, kein Upload nötig.

Skaliert endlos

Pfade sind Mathematik, keine Pixel: dieselbe Datei bleibt scharf als 16px Favicon, als Retina-Logo und als 4K-Grafik.

Umfärbung in einem Attribut

Fill oder Stroke einmal ändern und das ganze Zeichen folgt. CSS-Keyframes und Hover wirken auf inline SVG ganz ohne JavaScript.

Text bleibt winzig

Icons komprimieren zu Kilobyte, laufen mit gzip auf jedem Server effizient und bleiben für Suchmaschinen und Screenreader lesbar.

SVG-Code für jeden Stack kopieren

Alle Werkzeuge anzeigen

Jede Katalogseite und jeder SVG-Upload öffnet sich in einem Browser-Werkzeug, das den Vektor-Code für Ihr Framework umschreibt: JSX, Vue, Svelte, CSS, Data-URI, PNG-Exporte und Sprites.

Interaktiver SVG-Vektoreditor

Verzögerungsfreier Vektoreditor im Browser für Farben, Strichstärke, viewBox, Transformationen, Abstände, Hintergründe und sofortigen SVG/PNG-Export.

SVG-zu-React-JSX-, Vue- und Svelte-Konverter

Transformiere rohe SVG-Attribute in saubere TypeScript-React- (TSX), Next.js-Server-Component-, Vue-3-<script-setup>-, Svelte-5-, Flutter- und Angular-Komponenten.

SVG-zu-PNG- und WebP-Konverter in hoher Auflösung

Verwandeln Sie jedes SVG-Icon oder eigenes Markup in gestochen scharfe PNG- oder WebP-Bilder von 64 bis 2048 px – mit Alpha-Transparenz-Steuerung.

SVG-zu-CSS- und Data-URI-Konverter

Enkodieren Sie SVG-Markup in kompakte, URL-sichere UTF-8- oder Base64-Data-URIs, CSS-background-image-Regeln und dynamische currentColor-mask-image-Snippets.

SVG-Icon-Matrix und Badge-Generator

Parametrische Erzeugung von SVG-Icons: eigene Squircle-/Sechseck-Rahmen, mehrstufige Verläufe, Status-Badges und sofortiger Framework-Export.

SVG-Optimierer und -Minimierer

Minimieren Sie SVG im Browser: Editor-Metadaten, Kommentare und XML-Restanteile entfernen, Leerzeichen zusammenfassen und die echte Byte-Ersparnis sehen.

SVG-Icons nach Thema finden

Alle Kategorien anzeigen

Der Katalog gruppiert Icons in Themen wie Verkehr, Finanzen, Medizin, Wetter und Feiertage. Öffnen Sie ein Thema und kopieren Sie passende Vektoren in Sekunden.

SVG oder PNG?

Verwenden Sie SVG für Icons und Interface-Grafiken, die skalieren und sich umfärben müssen; exportieren Sie PNG oder WebP für fotorealistische Details, Social-Vorschauen oder rasternde Plattformen. Die Werkzeuge hier liefern beides aus einer Quelldatei.

SVG vs. PNG: Welches Format sollten Sie nutzen? Inline-SVG gegen Bild-Tag SVG-Icons in Figma oder im Browser bearbeiten Alle Anleitungen

Kostenlos für kommerzielle Nutzung

Jede Icon-Zeile nennt Quellbibliothek und Lizenz. MIT-, ISC- und Apache-2.0-Pakete decken kommerzielle Produkte ab; Markenlogos folgen eigenen Regeln, immer auf der Lizenztabelle.

Lizenzen →

Open-Source-Icon-Bibliotheken

Material Icons Phosphor Icons selfh.st Icons Tabler Icons Authentic Brand Logos Domain Icons

Icon libraries →

SVG-Fragen, beantwortet

Ist SVG besser als PNG?

Für Icons, Logos und UI-Grafik ja: SVG skaliert, färbt sich um und wiegt weniger, weil es Zeichenanweisungen statt Pixeln speichert. PNG bleibt für detailreiche Raster-Exporte nützlich.

Wie öffnet und bearbeitet man eine SVG-Datei?

Ziehen Sie es in einen Browser, einen Texteditor oder ein Designwerkzeug. SVG Nexus Studio öffnet es im Browser, damit Sie Farben, Ebenen und Pfade ohne Installation bearbeiten.

Darf ich die Icons kommerziell nutzen?

Die offenen Bibliotheken hier stehen unter MIT, ISC, Apache-2.0 und ähnlichen Lizenzen, die kommerzielle Nutzung erlauben. Jede Icon-Seite nennt die exakte Lizenz; Markenlogos haben Zusatzregeln.

Warum sieht mein SVG unscharf aus?

Ein unscharfes SVG wurde meist zu früh rasterisiert oder mit der falschen Viewport-Größe exportiert. Halten Sie es bis zum finalen Rendering vektorbasiert oder exportieren Sie es aus der Originaldatei erneut.

Starten Sie mit einem SVG-Asset

Katalog durchsuchen, ein Asset im Browser-Studio öffnen und sauberen Vektor-Code ausliefern: Icons, Logos, Illustrationen und die Tools, die sie umformen.

Alle SVG Icons Im Editor öffnen

Lizenz	Kommerzielle Nutzung	Nennung	Aendern oder umfaerben
MIT	Erlaubt	Hinweis im Paket	Erlaubt
ISC	Erlaubt	Hinweis im Paket	Erlaubt
Apache-2.0	Erlaubt	Pflicht mit Hinweisdatei	Erlaubt
CC BY 4.0	Erlaubt	Nennung noetig	Erlaubt
CC-BY-SA-4.0	Erlaubt	Weitergabe unter gleichen Bedingungen	Weitergabe unter gleichen Bedingungen
Trademark / Brand	Nur referenzielle Nutzung	Regeln des Inhabers	Eingeschraenkt