Sie können SVG (skalierbare Vektorgrafiken) in HTML5 in verschiedenen Arten verwenden, abhängig von Ihren Anforderungen - ob Sie einfache Symbole einbetten, interaktive Grafiken erstellen oder die Leistung optimieren. Hier sind die häufigsten und effektivsten Methoden:

1. Inline SVG (direkte Einbettung in HTML)

Diese Methode umfasst das Schreiben des SVG -Codes direkt in Ihr HTML -Dokument mit dem <svg></svg> -Element. Es gibt Ihnen die volle Kontrolle über Styling und Interaktivität über CSS und JavaScript.

 <svg width = "100" height = "100" xmlns = "http://www.w3.org/2000/svg">
  <Kreis cx = "50" cy = "50" r = "40" fill = "blau" />
</svg>

Profis:

• Vollstilbar mit CSS (sogar einzelne Teile der Grafik).
• Kann mit JavaScript animiert oder interaktiv gemacht werden.
• Keine zusätzliche HTTP -Anfrage (gut für die Leistung, wenn es klein ist).

Am besten für: kleine Symbole, Logos oder Grafiken, die Interaktion oder dynamisches Styling benötigen.

2. Verwenden Sie das <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175489020994273.jpeg" class="lazy" alt="Wie verwenden Sie SVG in HTML5?" > -Tag

Sie können auf eine externe .svg -Datei verweisen, genau wie jedes Bild.

 <img src = "icon.svg" alt = "Beschreibung" width = "100" height = "100" />

Profis:

• Einfach und sauber.
• Harmable und wiederverwendbar über Seiten.
• Hält HTML sauber.

Nachteile:

• Kann die SVG -Interna nicht mit CSS/JS von der übergeordneten Seite stylen oder manipuliert.
• Weniger flexibel für die Interaktivität.

Am besten für: statische Bilder, in denen Sie keine Farben oder Teile ändern müssen.

3.. Verwenden Sie CSS -Hintergrundbilder

Sie können ein SVG als Hintergrundbild in CSS festlegen, was für dekorative Elemente nützlich ist.

 .icon {
  Hintergrundbild: URL ('icon.svg');
  Hintergrundgröße: enthalten;
  Breite: 100px;
  Höhe: 100px;
  Anzeige: Inline-Block;
}

 <div class = "icon"> </div>

Profis:

• Ideal für dekorative oder themenbasierte Grafiken.
• Kann leicht auf andere Formate zurückgreifen (z. B. PNG für ältere Browser).
• Hält Markup sauber.

Nachteile:

• Kein Zugang zu internen SVG -Elementen.
• Nicht für interaktive oder zugängliche Grafiken geeignet.

Hinweis: Möglicherweise möchten Sie background-image: url('icon.svg#id'); Bei Fragment -Identifikatoren in einigen fortgeschrittenen Fällen variiert die Unterstützung.

4. Verwenden Sie <object> oder <iframe> (weniger häufig)

Sie können SVGs als externe Objekte einbetten:

 <Objekt type = "Image/svg xml" data = "graphic.svg" width = "200" height = "200">
  Ihr Browser unterstützt SVG nicht.
</Object>

Profis:

• SVG kann seine eigenen Skripte und Stile haben.
• Fallback -Inhalt ist möglich.
• Gute Isolation.

Nachteile:

• Schwerer und komplexer.
• Sicherheits- und Leistungsbedenken in einigen Fällen.

Selten verwendet, es sei denn, Sie benötigen eine vollständige SVG -Interaktivität oder befassen sich mit komplexen Vektordokumenten.

5. Verwenden Sie <use> für wiederverwendbare SVG -Symbole

Ein leistungsstarkes Muster ist die Definition von SVG -Symbolen einmal und wiederverwendet sie mit <use> , insbesondere für Icon -Systeme.

 <svg style = "display: keine;">
  <symbol id = "star" viewbox = "0 0 100 100">
    <Polygon Points = "50,5 61,35 95,35 68,55 79,90 50,70 21,90 32,55 5,35 39,35" Fill = "Gold"/>
  </symbol>
</svg>

<!-Verwenden Sie das Symbol->
<svg> <verwenden href = "#star" width = "50" height = "50"/> </svg>

Profis:

• Effiziente Wiederverwendung.
• Zentralisiertes Symbolmanagement.
• Stilbar, wenn inline.

Am besten für: Icon -Bibliotheken oder wiederholte Grafiken.

Tipps zur Verwendung von SVG in HTML5

• Fügen Sie immer viewBox in Ihre <svg></svg> ein, um die Reaktionsfähigkeit zu erhalten.
• Verwenden Sie aria-label oder <title></title> für die Barrierefreiheit.
• Optimieren Sie SVG -Dateien (Metadaten entfernen, Kommentare), bevor Sie in der Produktion verwenden.
• Testen Sie Fallbacks, wenn Sie ältere Browser unterstützen (obwohl die meisten modernen Browser SVG gut unterstützen).

Kurz gesagt, verwenden Sie Inline SVG , wenn Sie Kontrolle und Interaktion benötigen,* `" Für einfache statische Bilder und CSS -Hintergrundbilder ** für dekorative Elemente. Jede Methode hat ihren Platz - sucht auf der Grundlage von Leistung, Wartbarkeit und Funktionalität.

Grundsätzlich ist SVG ein erstklassiger Bürger in HTML5. Wählen Sie daher die Einbettungsmethode aus, die zu Ihrem Anwendungsfall passt.

Das obige ist der detaillierte Inhalt vonWie verwenden Sie SVG in HTML5?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!