Wie importiere ich SVG-Dateien in JavaScript?-js-Tutorial-php.cn

Skalierbare Vektorgrafiken, manchmal auch SVG genannt, sind 2D-Grafik- oder Bilddateien. für Um visuelle Effekte zu erzeugen, verwenden SVG-Dateien mathematische Formeln und eine Reihe von Formen, Linien, und andere Funktionen. SVG ist lediglich XML-Code, der angibt, wie und wo Farben gerendert werden Wie jedes Formular im Verhältnis zu den anderen Formen in der Datei angezeigt werden soll und wie die Formen angezeigt werden sollen zeigen.

SVG und einige andere Vektorgrafiken hängen davon ab Pixel, die zur Übertragung visueller Daten verwendet werden, z. B. JPEG- oder PNG-Dateien.

Vier Vorteile der Verwendung von SVG-Dateien im Webdesign sind wie folgt -

Klarheit

SVG-Dateien können stufenlos skaliert werden. SVG-Dateien haben gegenüber Rasterbildern erhebliche Vorteile, weil Sie können sie beliebig oft vergrößern und in der Größe ändern, ohne dass die Übersichtlichkeit verloren geht. Rasterbild Wenn sie nicht richtig skaliert werden, können sie an Schärfe verlieren und möglicherweise sogar körnig aussehen.

Flexibilität

Es ist ganz einfach, responsive SVG-Dateien zu erstellen, die sogar auf jedem Gerät großartig aussehen Der Betrachter vergrößert die Webseite. Die Größe von SVG-Dateien kann während der Bearbeitungsphase wiederholt geändert werden ohne die Klarheit zu verlieren. SVG-Dateien eignen sich hervorragend für Logos und einfache Infografiken Wegen ihrer Anpassungsfähigkeit. SVG-Dateien können auch für Animationen verwendet werden und sind besonders nützlich für Günstig für die Entwicklung von Schriftarten mit unterschiedlichen Farbschemata und Verläufen.

Kleinere Dateien

SVG-Dateigröße basierend auf der visuellen Komplexität oder der Anzahl der Pfade im Design Wahrscheinlich viel weniger als ein PNG oder JPG des exakt gleichen Bildes. SVG-Dateien können sein Laut Vecta.io 60 % bis 80 % kleiner als PNG, was auch die Last reduziert Zeiten und verbessern die Benutzererfahrung (UX). Ein weiterer Vorteil von Website-SEO besteht darin, dass Seiten schneller geladen werden.

Einfacher Zugang und Inklusion

SVG-Dateien haben viele Vorteile, wenn es um Zugänglichkeit und Vielfalt geht. Designer Möglichkeit, Strukturdaten in SVG-Dateien einzuschließen, die grafische visuelle Elemente definieren Kann selbst Benutzern bestimmter unterstützender Technologien dabei helfen, den darin enthaltenen Inhalt zu verstehen ein Bild. Optional verwenden Rasterdateien nur Metadaten (d. h. Alt-Text), um Bildschirmlesegeräte zu informieren und Andere unterstützende Technologien für Grafikinhalte.

In diesem Artikel werden wir viele SVG-Nutzungsszenarien (Scalable Vector Graphics) untersuchen und verwenden.

Die erste Methode

Der schnellste Weg ist die Verwendung des HTML-Elements Wie importiere ich SVG-Dateien in JavaScript? .

Grammatik

<img src='logo.svg' alt="some file"    style="max-width:90%"  style="max-width:90%" style="color:orange;"/>

Nach dem Login kopieren

Sie benötigen Folgendes, um SVG in ein -Element einzubetten -

src-Attribut
Verwenden Sie das Höhenattribut, wenn Ihr SVG kein inhärentes Seitenverhältnis hat.
Verwenden Sie das Attribut „Breite“, wenn Ihr SVG kein natives Seitenverhältnis hat.

Vorteile

Die Bereitstellung ist einfach und schnell.
Verschachtelte HTML-Elemente und wandeln das SVG-Bild zusammen in einen Hyperlink um.

SVG-Datei-Caching für schnelleres Laden.

Nachteile

SVG-Dateien lassen sich nicht leicht manipulieren.
Verwenden Sie einfach Inline-CSS, um Ihre SVG-Datei zu formatieren.
CSS-Pseudoklassen können nicht zum Stylen von SVG verwendet werden.

Beispiel 1

HTML-Quellcode

<!DOCTYPE html>
<html>
   <title>How to import a SVG file in JavaScript article - TutorialsPoint</title>
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body style="text-align:center">
   <body>
      <img src="https://img.php.cn/upload/article/000/887/227/169453086951251.png" alt="Wie importiere ich SVG-Dateien in JavaScript?"    style="max-width:90%"  style="max-width:90%" style="background-color: transparent" />
   </body>
</body>
</html>

Nach dem Login kopieren

Die zweite Methode

In der folgenden Methode teilen Sie uns mit, wie Sie SVG als