Detailed example of how Webpack actually loads SVG

This article mainly introduces the actual method of loading SVG with Webpack. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

As a standard format for vector graphics, SVG has been supported by major browsers, and it has also become synonymous with vector graphics on the Web. Using SVG instead of bitmaps in web pages has the following benefits:

1. SVG is clearer than bitmaps and will not destroy the clarity of graphics under arbitrary scaling. SVG can facilitate It effectively solves the problem of unclear image display on high-resolution screens.

2. When the graphic lines are relatively simple, the size of the SVG file is smaller than the bitmap. Today, when flat UI is popular, SVG will be smaller in most cases.

3. SVG with the same graphics has better rendering performance than the corresponding high-definition graphics.

4. SVG uses XML syntax description consistent with HTML, and is highly flexible.
   

The drawing tool can export .svg files one by one. The import method of SVG is similar to that of pictures. It can be used directly in CSS as follows:

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

can also be used in HTML:

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

That is to say, the SVG file can be used directly as a picture. The method is as follows It's exactly the same when using images. Therefore, the two methods introduced in 3-19 Loading Images using file-loader and using url-loader are equally effective for SVG. You only need to change the file suffix in the Loader test configuration to .svg. The code is as follows:

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

Since SVG is a text format file, there are other methods besides the above two methods, which will be explained one by one below.

Use raw-loader

raw-loader can read the contents of the text file and inject it into JavaScript or CSS.

For example, write this in JavaScript:

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

The output code after raw-loader processing is as follows:

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

That is to say, the content of svgContent is equal to SVG in the form of a string. Since SVG itself is an HTML element, after obtaining the SVG content, you can directly insert the SVG into the web page through the following code:

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

The relevant Webpack configuration when using raw-loader is as follows:

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

Because raw-loader will directly return the text content of SVG , and the text content of SVG cannot be displayed through CSS, so SVG cannot be imported into CSS after using this method. That is to say, code such as background-image: url(./svgs/activity.svg) cannot appear in CSS, because background-image: url(486d7a50595533609bc98d44595dc670...de28f444098d408d960da4dccff3a948) is illegal of.

This example provides the complete code of the project

Using svg-inline-loader

svg-inline-loader and the raw-loader mentioned above are very Similar, but the difference is that svg-inline-loader will analyze the content of SVG and remove unnecessary code to reduce the file size of SVG.

After using drawing tools such as Adobe Illustrator and Sketch to create SVG, these tools will generate unnecessary code for the web page to run when exporting. For example, the following is the SVG code exported by 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>

will be simplified to the following after being processed by svg-inline-loader:

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

That is to say, svg-inline-loader adds a compression function for SVG.

The relevant Webpack configuration when using svg-inline-loader is as follows:

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

This example provides the complete code of the project

Related recommendations:

Detailed example of Webpack optimization configuration to narrow the file search scope

Detailed explanation of the core concepts of Webpack framework

Detailed explanation of webpack+express multi-page site development examples

The above is the detailed content of Detailed example of how Webpack actually loads SVG. For more information, please follow other related articles on the PHP Chinese website!