Anleitungen & Artikel

SVG vs. PNG: Welches Format sollten Sie nutzen?

Verwenden Sie SVG für Website-Icons, Logos und Benutzeroberflächen, da Vektorpfade auf jedem Bildschirm gestochen scharf bleiben. Nutzen Sie PNG für feste Pixelgrafiken in E-Mails oder sozialen Netzwerken.

So animieren Sie SVG-Icons mit CSS

Fügen Sie Ihrem Inline-SVG eine CSS-Klasse hinzu und nutzen Sie transform oder stroke-dasharray Keyframes. Unser Live-Editor erstellt flüssige 60fps-Animationen ganz ohne JavaScript.

SVG-Icons in Figma oder im Browser bearbeiten

Kopieren Sie den SVG-Code von SVG Nexus und fügen Sie ihn direkt in Figma oder Illustrator ein. Alternativ können Sie jedes Icon direkt in unserem Browser-Studio bearbeiten.

SVG-Icons in React, Next.js und Vue verwenden

Wählen Sie auf einer Icon-Seite den Tab React TSX oder Vue 3, um eine fertige Komponente mit currentColor-Unterstützung für Tailwind CSS zu kopieren.

Inline-SVG gegen Bild-Tag

Nutze Inline-SVG oder Komponenten, wenn du Farbe beim Ueberfahren und CSS-Animationen brauchst. Nutze das Bild-Tag mit Breite, Hoehe und Alternativtext, wenn die Bildsuche das Symbol indexieren soll.

Kollisionen von Verlaufs- und Clip-IDs vermeiden

Mehrfarbige Sets verwenden oft interne IDs wie paint0_linear. Teilen zwei Symbole eine ID auf einer Seite, wird der falsche Verlauf gezeichnet. SVG Nexus versieht jede interne ID automatisch mit einem eigenen Bereich.

Zugaengliche Symbole und RTL-Spiegelung

Blende dekorative Symbole mit aria-hidden und focusable false aus. Gib Symbol-Schaltflaechen ein klares aria-label. Spiegele Pfeile fuer Sprachen von rechts nach links horizontal.

Fremde SVG-Dateien bereinigen

SVG ist XML, daher koennen fremde Dateien Skripte und Ereignishandler enthalten. Entferne Skriptknoten und liefere SVG mit strenger Sicherheitsrichtlinie und nosniff Kopfzeile.