Maison > Article > interface Web > Comment importer des fichiers SVG en JavaScript ?

Comment importer des fichiers SVG en JavaScript ?

WBOYavant: 2023-09-12 23:01:011437parcourir

Scalable Vector Graphics, parfois appelé SVG, est un fichier graphique ou image 2D. pour Pour créer des effets visuels, les fichiers SVG utilisent des formules mathématiques et un ensemble de formes, de lignes, et d'autres fonctionnalités. SVG est juste du code XML qui spécifie comment restituer les couleurs, où Comment chaque formulaire doit apparaître par rapport aux autres formes du fichier et comment les formes doivent apparaître montrer.

SVG et certains autres graphiques vectoriels dépendent de Pixels utilisés pour transmettre des données visuelles, telles que des fichiers jpeg ou png.

Quatre avantages de l'utilisation de fichiers SVG dans la conception de sites Web sont les suivants :

Clarté

Les fichiers SVG peuvent être mis à l’échelle à l’infini. Les fichiers SVG présentent des avantages significatifs par rapport aux images raster car Vous pouvez les agrandir et les redimensionner autant de fois que vous le souhaitez sans perdre en clarté. image tramée S’ils ne sont pas correctement mis à l’échelle, ils peuvent perdre leur netteté et même commencer à paraître granuleux.

Flexibilité

Il est facile de créer des fichiers SVG réactifs qui s'affichent parfaitement sur n'importe quel appareil, même Le spectateur zoome sur la page Web. Les fichiers SVG peuvent être redimensionnés à plusieurs reprises tout au long de la phase d'édition sans perdre en clarté. Les fichiers SVG sont un excellent choix pour les logos et les infographies simples En raison de leur adaptabilité. Les fichiers SVG peuvent également être utilisés pour des animations et sont particulièrement adaptés à Idéal pour développer des polices avec différents schémas de couleurs et dégradés.

Fichiers plus petits

Taille du fichier SVG basée sur la complexité visuelle ou le nombre de chemins dans la conception Probablement beaucoup moins qu'un PNG ou un JPG de la même image. Les fichiers SVG peuvent être Selon Vecta.io, 60 à 80 % plus petit que le PNG, ce qui réduit également la charge fois et améliorer l’expérience utilisateur (UX). Un autre avantage du référencement de sites Web est que les pages se chargent plus rapidement.

Accès et inclusion plus faciles

Les fichiers SVG présentent de nombreux avantages en termes d'accessibilité et de variété. designer Possibilité d'inclure des données structurelles dans des fichiers SVG qui définissent des éléments visuels graphiques Peut lui-même aider les utilisateurs de technologies d'assistance spécifiques à comprendre le contenu qui y est contenu une image. En option, les fichiers raster utilisent uniquement des métadonnées (c'est-à-dire du texte alternatif) pour informer les lecteurs d'écran et Autres technologies d'assistance pour le contenu graphique.

Dans cet article, nous explorerons et utiliserons de nombreux scénarios d'utilisation du SVG (Scalable Vector Graphics).

La première méthode

Le moyen le plus rapide est d'utiliser l'élément HTML Comment importer des fichiers SVG en JavaScript ? .

Grammaire

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

Vous avez besoin des éléments suivants pour intégrer SVG dans un élément -

attribut src
Utilisez l'attribut height lorsque votre SVG n'a pas de rapport hauteur/largeur inhérent.
Utilisez l'attribut width lorsque votre SVG n'a pas de rapport hauteur/largeur de manière native.

Avantages

Le déploiement est simple et rapide.
Les éléments HTML imbriqués et convertiront ensemble l'image SVG en un lien hypertexte.
Mise en cache des fichiers SVG pour un chargement plus rapide.

Inconvénients

Les fichiers SVG ne sont pas faciles à manipuler.
Utilisez simplement du CSS en ligne pour styliser votre SVG.
Les pseudo-classes CSS ne peuvent pas être utilisées pour styliser SVG.

Exemple 1

Code source HTML

<!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="Comment importer des fichiers SVG en JavaScript ?"    style="max-width:90%"  style="max-width:90%" style="background-color: transparent" />
   </body>
</body>
</html>

La deuxième méthode

Dans la méthode suivante, dites-nous comment utiliser SVG comme

Grammaire

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

Pour intégrer SVG à l'aide de l'élément "object", les éléments suivants sont requis -

TypePropriétés
DonnéesPropriétés
attribut de classe (lors de l'utilisation de CSS interne/externe)

Avantages

SVG peut être stylisé avec du CSS externe/interne.
Le codage est simple et rapide.
Devrait bien fonctionner en matière de mise en cache.

Inconvénients

Si vous souhaitez utiliser une feuille de style externe, vous devez utiliser l'élément
Pas familier avec l'exécution et la syntaxe.

Exemple 2

Code source HTML

<!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>

Code source CSS

logo {
   height: 90;
   width: 310;
}

Sortie

Le code ci-dessus donnera le résultat suivant -

如何在 JavaScript 中导入 SVG 文件？

La troisième méthode

Dans la méthode ci-dessous, apprenons à intégrer SVG en utilisant .

Grammaire

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

L'intégration de SVG nécessite l'élément .

attribut src.
Utilisez l'attribut height lorsque votre SVG n'a pas de rapport hauteur/largeur inhérent.
Utilisez l'attribut width lorsque votre SVG n'a pas de rapport hauteur/largeur de manière native.

Avantages

Rapide et facile à mettre en œuvre.
C'est la même chose que l'élément

Inconvénients

JavaScript ne peut pas être utilisé pour modifier SVG.
La mise en cache n'est pas idéale.

Exemple 3

Code source HTML

<!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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

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

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment afficher une erreur sans boîte d'alerte en utilisant JavaScript ?Article suivant：Comment afficher une erreur sans boîte d'alerte en utilisant JavaScript ?

Articles Liés

Voir plus