Comment charger SVG dans Webpack

Cet article présente principalement la méthode pratique de chargement de SVG avec Webpack. Maintenant, je le partage avec vous et le donne comme référence.

SVG, en tant que format standard pour les graphiques vectoriels, est pris en charge par les principaux navigateurs et est également devenu synonyme de graphiques vectoriels sur le Web. L'utilisation de SVG au lieu de bitmaps dans les pages Web présente les avantages suivants :

1. SVG est plus clair que les bitmaps et ne détruira pas la clarté des graphiques sous une mise à l'échelle arbitraire. SVG peut faciliter la résolution efficace du problème. d'affichage d'images peu claires sur les écrans haute résolution.

2. Lorsque les lignes graphiques sont relativement simples, la taille du fichier SVG est plus petite que le bitmap Aujourd'hui, lorsque l'interface utilisateur plate est populaire, SVG sera plus petit dans la plupart des cas.

3. SVG avec les mêmes graphiques a de meilleures performances de rendu que les graphiques haute définition correspondants.

4. SVG utilise une description de syntaxe XML cohérente avec HTML, qui est très flexible.

L'outil de dessin peut exporter les fichiers .svg un par un. La méthode d'importation de SVG est similaire à celle des images. Elle peut être utilisée directement en CSS comme suit :

body {
 background-image: url(./svgs/activity.svg);
}

Il peut également être utilisé en HTML :

<img src="./svgs/activity.svg"/>

C'est-à-dire que vous pouvez utiliser le fichier SVG directement comme image, exactement de la même manière que vous utilisez des images. Par conséquent, les deux méthodes présentées dans 3-19 Chargement d'images à l'aide du chargeur de fichiers et de l'utilisation du chargeur d'url sont également efficaces pour SVG. Il vous suffit de changer le suffixe du fichier dans la configuration de test du chargeur en .svg.

module.exports = {
 module: {
  rules: [
   {
    test: /\.svg/,
    use: ['file-loader']
   }
  ]
 },
};

Étant donné que SVG est un fichier au format texte, il existe d'autres méthodes en plus des deux méthodes ci-dessus, qui seront expliquées une par une ci-dessous.

Utiliser raw-loader

raw-loader peut lire le contenu du fichier texte et l'injecter dans JavaScript ou CSS.

Par exemple, écrivez ceci en JavaScript :

import svgContent from './svgs/alert.svg';

Le code de sortie après le traitement du chargeur brut est le suivant :

module.exports = "<svg xmlns=\"http://www.w3.org/2000/svg\"... </svg>" // 末尾省略 SVG 内容

C'est-à-dire que le Le contenu de svgContent est égal à SVG sous forme de chaîne. Puisque SVG lui-même est un élément HTML, après avoir obtenu le contenu SVG, vous pouvez directement insérer le SVG dans la page Web via le code suivant :

window.document.getElementById('app').innerHTML = svgContent;

Pertinent. Configuration du Webpack lors de l'utilisation de raw-loader Comme suit :

module.exports = {
 module: {
  rules: [
   {
    test: /\.svg$/,
    use: ['raw-loader']
   }
  ]
 }
};

Étant donné que raw-loader renverra directement le contenu texte de SVG et que le contenu texte de SVG ne peut pas être affiché via CSS, SVG ne peut pas être importé dans CSS après avoir utilisé cette méthode. C'est-à-dire qu'un code tel que background-image: url(./svgs/activity.svg) ne peut pas apparaître en CSS, car background-image: url(486d7a50595533609bc98d44595dc670...de28f444098d408d960da4dccff3a948) est illégal. .

Cet exemple fournit le code complet du projet

Utilisation de svg-inline-loader

svg-inline-loader et le raw-loader mentionné ci-dessus sont très similaires, mais la différence est que svg-inline-loader analysera le contenu de SVG et supprimera le code inutile pour réduire la taille du fichier SVG.

Après avoir utilisé des outils de dessin tels qu'Adobe Illustrator et Sketch pour créer du SVG, ces outils généreront du code inutile pour que la page Web s'exécute lors de l'exportation. Par exemple, voici le code SVG exporté par Sketch :

<svg class="icon" verison="1.1" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
   stroke="#000">
 <circle cx="12" cy="12" r="10"/>
</svg>

sera simplifié comme suit après avoir été traité par svg-inline-loader :

<svg viewBox="0 0 24 24" stroke="#000"><circle cx="12" cy="12" r="10"/></svg>

En d'autres termes , svg-inline -loader ajoute une fonction de compression pour SVG.

La configuration Webpack pertinente lors de l'utilisation de svg-inline-loader est la suivante :

module.exports = {
 module: {
  rules: [
   {
    test: /\.svg$/,
    use: ['svg-inline-loader']
   }
  ]
 }
};

Cet exemple fournit le code complet du projet

Ce qui précède est ce que j'ai compilé pour tout le monde. J'espère qu'à l'avenir, cela sera utile à tout le monde.

Articles associés :

Comment intégrer vux dans vue.js pour implémenter le chargement pull-up et l'actualisation déroulant

Connexe projets vue dans webpack Le fichier de ressources signale un problème 404 (tutoriel détaillé)

Utiliser webpack+vue2 pour la construction du projet

À propos de la façon d'implémenter une liaison secondaire in vue est sélectionné par défaut La première valeur

Utilisation de ui-route pour implémenter le routage imbriqué multicouche dans AngularJS (tutoriel détaillé)

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!