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.
Inline-SVG lebt im Dokument, sodass CSS es erreicht: Hover-Zustände, currentColor-Themes und CSS-Keyframes gestalten oder animieren die Grafik, und ein Sprite aus Symbol-Referenzen fasst wiederholte Icons in einem einzigen Download zusammen. Ein <img>-Tag lädt die Grafik als Bild: CSS kann sie nicht umgestalten, aber der Browser speichert sie im Cache, Alternativtext beschreibt sie weiterhin, wenn Bilder blockiert sind, und sie kann in der Bildersuche erscheinen. Setzen Sie Icons, die auf die Oberfläche reagieren müssen, inline ein; betten Sie die Grafik einmalig über einen CSS-Data-URI aus jeder Icon-Seite ein oder verweisen Sie auf eine Datei, wenn sie im Cache bleiben und aus dem HTML herausbleiben soll.
Inline SVG, styled by CSS
<span class="text-blue-600">
<svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true">
<path d="M4 10.5 12 4l8 6.5V20h-5.5v-4.5h-5V20H4Z"/>
</svg>
Save
</span>Image tag, cached and described with alt text
<img src="save.svg" width="20" height="20" alt="Save">Geprüfte Fakten zu dieser Website
- Exportformate: Optimized SVG, PNG, WebP, React TSX, Vue 3 SFC, Svelte, CSS mask or data URI, SVG sprite
- Raster-Exportgrößen: 64px, 128px, 256px, 512px, 1024px, 2048px
- Upload-Limit pro Datei im Arbeitsbereich: 2 MB
- Lizenz und Autor stehen auf jeder Icon-Seite.