WebpackにSVGをロードする方法

この記事では主にWebpackでSVGを読み込む実際の方法を紹介しますので、参考にしてください。

SVG はベクター グラフィックスの標準形式として主要なブラウザーでサポートされており、Web 上のベクター グラフィックスの代名詞ともなっています。 Web ページでビットマップの代わりに SVG を使用すると、次のような利点があります。

1. SVG はビットマップよりも鮮明で、任意のスケーリングでもグラフィックスの鮮明さを損なうことはありません。 SVG は、高解像度の画面上の画像を簡単に解決できます。

2. グラフィック線が比較的単純な場合、SVG ファイルのサイズはビットマップよりも小さくなります。フラット UI が普及している現在、SVG のサイズはほとんどの場合小さくなります。

3. 同じグラフィックスの SVG は、対応する高解像度グラフィックスよりもレンダリング パフォーマンスが優れています。

4. SVG は、HTML と一致する XML 構文記述を使用しており、非常に柔軟です。

描画ツールは .svg ファイルを 1 つずつエクスポートできます。SVG のインポート方法は、次のように CSS で直接使用できます:

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

HTML でも使用できます。

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

つまり、画像を使用するのとまったく同じ方法で、SVGファイルを画像として直接使用できます。 したがって、「3-19 file-loader を使用した画像の読み込み」と「url-loader を使用した画像の読み込み」で紹介した 2 つの方法は、SVG に対して同様に効果的です。必要なのは、Loader テスト設定のファイル接尾辞を .svg に変更することだけです。

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

SVGはテキスト形式のファイルなので、上記2つの方法以外にも方法がありますので、以下で一つずつ説明していきます。

raw-loader を使用します

raw-loader を使用して、テキスト ファイルの内容を読み取り、JavaScript または CSS に挿入します。

たとえば、これを JavaScript で記述します。

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

raw-loader 処理後の出力コードは次のとおりです。

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

つまり、svgContent の内容は、SVG 以降の文字列形式の SVG と同じになります。それ自体は HTML 要素であるため、After SVG コンテンツを取得した後、次のコードを通じて SVG を Web ページに直接挿入できます:

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

raw-loader を使用する場合の関連する Webpack 設定は次のとおりです:

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

Because raw-loader will SVG のテキスト コンテンツを直接返し、CSS を通じてアクセスすることはできません。 SVG のテキスト コンテンツを表示するため、このメソッドを使用した後は SVG を CSS にインポートできません。 つまり、background-image: url() は違法であるため、background-image: url(./svgs/activity.svg) のようなコードは CSS に含めることができません。 。

この例はプロジェクトの完全なコードを提供します

svg-inline-loaderの使用方法

svg-inline-loaderは上記のraw-loaderと非常に似ていますが、違いはsvg-inline-loaderが分析することです。 SVG のコンテンツを削除して、SVG のファイル サイズを減らすためにコードの不要な部分を含めます。

Adobe Illustrator や Sketch などの描画ツールを使用して SVG を作成すると、これらのツールはエクスポート時に Web ページを実行するために不要なコードを生成します。 たとえば、以下は Sketch によってエクスポートされた SVG のコードです:

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

svg-inline-loader によって処理された後、次のように合理化されます:

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

つまり、svg-inline-loader は圧縮を追加します。 SVG用の関数です。

svg-inline-loader を使用する場合の関連する Webpack 構成は次のとおりです:

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

この例はプロジェクトの完全なコードを提供します

上記は、すべての人に役立つことを願っています。未来。

関連記事:

vux を vue.js に統合してプルアップ読み込みとプルダウン更新を実装する方法

webpack の vue プロジェクト リソース ファイルに関する 404 問題の報告 (詳細なチュートリアル)

使用webpack+vue2 プロジェクトの構築

vue で第 2 レベルのリンケージを実装する方法については、デフォルトで最初の値が選択されます

ui-route を使用して AngularJS で多層ネストされたルーティングを実装する (詳細なチュートリアル)

以上がWebpackにSVGをロードする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。