So laden Sie SVG in Webpack

Dieser Artikel stellt hauptsächlich die praktische Methode zum Laden von SVG mit Webpack vor. Jetzt teile ich ihn mit Ihnen und gebe ihn als Referenz.

SVG wird als Standardformat für Vektorgrafiken von den wichtigsten Browsern unterstützt und ist auch zum Synonym für Vektorgrafiken im Web geworden. Die Verwendung von SVG anstelle von Bitmaps in Webseiten hat die folgenden Vorteile:

1. SVG ist klarer als Bitmaps und beeinträchtigt die Klarheit von Grafiken bei willkürlicher Skalierung nicht. SVG kann das Problem effektiv lösen unscharfer Bilddarstellung auf hochauflösenden Bildschirmen.

2. Wenn die grafischen Linien relativ einfach sind, ist die Größe der SVG-Datei kleiner als die der Bitmap. Heutzutage, wenn flache Benutzeroberflächen beliebt sind, ist SVG in den meisten Fällen kleiner.

3. SVG mit den gleichen Grafiken hat eine bessere Renderleistung als die entsprechenden hochauflösenden Grafiken.

4. SVG verwendet eine mit HTML konsistente XML-Syntaxbeschreibung, die sehr flexibel ist.

Das Zeichentool kann .svg-Dateien einzeln exportieren. Die Importmethode von SVG ähnelt der von Bildern. Sie kann wie folgt direkt in CSS verwendet werden:

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

Wird auch in HTML verwendet:

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

Mit anderen Worten, die SVG-Datei kann direkt als Bild verwendet werden, und die Methode ist genau die gleiche wie bei der Verwendung von Bildern. Daher sind die beiden in 3-19 „Laden von Bildern mit File-Loader“ und „URL-Loader“ vorgestellten Methoden für SVG gleichermaßen wirksam. Sie müssen lediglich das Dateisuffix in der Loader-Testkonfiguration in „.svg“ ändern.

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

Da SVG eine Datei im Textformat ist, gibt es neben den beiden oben genannten Methoden noch andere Methoden, die im Folgenden einzeln erläutert werden.

Raw-Loader verwenden

Raw-Loader kann den Inhalt der Textdatei lesen und ihn in JavaScript oder CSS einfügen.

Schreiben Sie dies beispielsweise in JavaScript:

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

Der Ausgabecode nach der Raw-Loader-Verarbeitung lautet wie folgt:

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

Das heißt, der Inhalt von svgContent ist entspricht der Zeichenfolgenform SVG. Da SVG selbst ein HTML-Element ist, können Sie SVG nach Erhalt des SVG-Inhalts über den folgenden Code direkt in die Webseite einfügen:

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

Die relevante Webpack-Konfiguration bei Verwendung von Raw -loader lautet wie folgt:

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

Da Raw-Loader den Textinhalt von SVG direkt zurückgibt und den Textinhalt von SVG nicht über CSS anzeigen kann, kann SVG nach Verwendung dieser Methode nicht in CSS importiert werden. Das heißt, Code wie „background-image: url(./svgs/activity.svg)“ kann nicht in CSS erscheinen, da „background-image: url(486d7a50595533609bc98d44595dc670...de28f444098d408d960da4dccff3a948)“ illegal ist .

Dieses Beispiel stellt den vollständigen Code des Projekts bereit

Verwendung des SVG-Inline-Loaders

SVG-Inline-Loader und des erwähnten Raw-Loaders Die oben genannten sind sehr ähnlich, der Unterschied besteht jedoch darin, dass der SVG-Inline-Loader den Inhalt von SVG analysiert und unnötigen Code entfernt, um die Dateigröße von SVG zu reduzieren.

Nachdem Sie Zeichenwerkzeuge wie Adobe Illustrator und Sketch zum Erstellen von SVG verwendet haben, generieren diese Werkzeuge unnötigen Code für die Ausführung der Webseite beim Exportieren. Das Folgende ist beispielsweise der von Sketch exportierte SVG-Code:

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

wird nach der Verarbeitung durch den SVG-Inline-Loader wie folgt vereinfacht:

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

Mit anderen Worten: SVG- Inline-Loader wurde um eine Komprimierungsfunktion für SVG hinzugefügt.

Die relevante Webpack-Konfiguration bei Verwendung des SVG-Inline-Loaders lautet wie folgt:

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

Dieses Beispiel stellt den vollständigen Code des Projekts bereit

Das Obige ist das, wofür ich kompiliert habe Ich hoffe, es wird in Zukunft nützlich sein. Jeder ist hilfreich.

Verwandte Artikel:

So integrieren Sie Vux in vue.js, um Pull-Up-Laden und Pull-Down-Aktualisierung zu implementieren

Verwandt Vue-Projekte in Webpack Ressourcendatei meldet 404-Problem (ausführliches Tutorial)

Verwenden Sie Webpack+vue2 für die Projektkonstruktion

Informationen zur Implementierung der sekundären Verknüpfung in vue ist standardmäßig ausgewählt Der erste Wert

Ui-Route verwenden, um mehrschichtiges verschachteltes Routing in AngularJS zu implementieren (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo laden Sie SVG in Webpack. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!