SVG ist ein Vektor-Bildformat (XML-basiert), daher skaliert es auf jede Größe ohne Unschärfe. Sie können es auf zwei Hauptwege einbinden, jeder mit Trade-offs.
Inline SVG — Markup direkt im HTML
html
Vorteile: Sie können es mit CSS (fill, stroke) stylen, seine Teile animieren, Farbe via currentColor ändern (erbt Textfarbe) und auf Ereignisse reagieren — weil es echtes DOM ist. Keine zusätzliche HTTP-Anfrage.
Nachteile: bläht HTML auf, nicht separat gecacht, wiederholte Symbole duplizieren Markup.
<img> — als Datei referenziert<img src="logo.svg" alt="Company logo" width="120" />
Vorteile: vom Browser gecacht, hält HTML sauber, einfach. Nachteile: Sie können seine internen Teile mit Ihrem CSS/JS nicht stylen oder skripten — es ist ein undurchsichtiges Bild.
Need to recolor/animate/interact with the SVG → inline SVG
Static logo/illustration, want caching + clean HTML → <img src=".svg">
Many repeated icons → an SVG sprite (<use>) or an icon component
<svg role="img" aria-label="Settings">...</svg> <!-- meaningful icon -->
<svg aria-hidden="true">...</svg> <!-- decorative: hide from AT -->
Die Wahl zwischen inline und <img> SVG kommt darauf an, ob Sie die Grafik stylen/animieren müssen (inline) oder nur effizient anzeigen (<img>).
Symbole, die bei Hover oder Theme-Wechsel die Farbe ändern, gehen inline (oft als Komponenten); statische Markenelement gehen via <img>.
In jedem Fall bleiben Vektoren bei jeder Auflösung scharf — ideal für Symbole und Logos.