Comment importer des fichiers SVG en JavaScript ?-js tutoriel-php.cn

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

Copier après la connexion

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>

Copier après la connexion

La deuxième méthode

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