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).
Le moyen le plus rapide est d'utiliser l'élément HTML .
<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.
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.
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.
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>
Dans la méthode suivante, dites-nous comment utiliser SVG comme
<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 -