Heim > Artikel > Web-Frontend > Wie importiere ich SVG-Dateien in JavaScript?

Wie importiere ich SVG-Dateien in JavaScript?

WBOYnach vorne: 2023-09-12 23:01:011436Durchsuche

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;"/>

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>

Die zweite Methode

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

verwenden

Grammatik

<object type="image/svg+xml" data="logo.svg" class="logo">
   Logo
</object>

Um SVG mit dem „object“-Element einzubetten, ist Folgendes erforderlich -

TypEigenschaft
DatenEigenschaften
Klassenattribut (bei Verwendung von internem/externem CSS)

Vorteile

SVG kann mit externem/internem CSS gestaltet werden.
Codierung ist einfach und schnell.
Sollte beim Caching gut funktionieren.

Nachteile

Wenn Sie ein externes Stylesheet verwenden möchten, sollten Sie das
Nicht vertraut mit Ausführung und Syntax.

Beispiel 2

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">
   <link rel="stylesheet" type="css" href="https://www.php.cn/link/dfb8e1450abdf50cc0f260e0e7a62296" />
</head>
<body style="text-align:center">
   <object type="image/svg+xml" data="/logo.svg" class="logo">
Tutorialspoint Logo
</object>
</body>
</html>

CSS-Quellcode

logo {
   height: 90;
   width: 310;
}

Ausgabe

Der obige Code liefert die folgende Ausgabe -

如何在 JavaScript 中导入 SVG 文件？

Die dritte Methode

In der folgenden Methode lernen wir, wie man SVG mit einbettet.

Grammatik

<iframe src="logo.svg" width="500" height="500">
</iframe>

Das Einbetten von SVG erfordert das -Element.

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

Schnell und einfach umzusetzen.
Es ist dasselbe wie das

Nachteile

JavaScript kann nicht zum Ändern von SVG verwendet werden.
Caching ist nicht ideal.

Beispiel 3

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">
   <link rel="stylesheet" href="style.css">
</head>
<body style="text-align:center">
   <iframe src="/logo.svg" width="200" height="120"></iframe>
</body>
</html>

Das obige ist der detaillierte Inhalt vonWie importiere ich SVG-Dateien in JavaScript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

JavaScript css html Object xml class 样式表伪类搜索引擎 ux

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie zeige ich mit JavaScript einen Fehler ohne Warnfeld an?Nächster Artikel：Wie zeige ich mit JavaScript einen Fehler ohne Warnfeld an?

In Verbindung stehende Artikel

Mehr sehen