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 で直接使用することもできます。 HTML 内:

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

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

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

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

raw-loader を使用します

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

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

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

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

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

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

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

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

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

raw-loader は 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 のコードです:

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

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

<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 圧縮機能のサポートを追加します。

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

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

この例では、プロジェクトの完全なコードが提供されます

関連する推奨事項:

Webpack 最適化構成例の詳細な説明ファイル検索範囲

詳細な説明 Webpack フレームワークのコアコンセプト

webpack+express のマルチページサイト開発例の詳細な説明

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