Webpack实战加载SVG的方法

2024-10-15 00:22:17

SVG 作为矢量图的一种标准格式，已经得到了各大浏览器的支持，它也成为了 Web 中矢量图的代名词。在网页中采用 SVG 代替位图有如下好处：

SVG 相对于位图更清晰，在任意缩放的情况下后不会破坏图形的清晰度，SVG 能方便地解决高分辨率屏幕下图像显示不清楚的问题。
在图形线条比较简单的情况下，SVG 文件的大小要小于位图，在扁平化 UI 流行的今天，多数情况下 SVG 会更小。
图形相同的 SVG 比对应的高清图有更好的渲染性能。
SVG 采用和 HTML 一致的 XML 语法描述，灵活性很高。

画图工具能导出一个个 .svg 文件，SVG 的导入方法和图片类似，既可以像下面这样在 CSS 中直接使用：

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

也可以在 HTML 中使用：

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

也就是说可以直接把 SVG 文件当成一张图片来使用，方法和使用图片时完全一样。所以在3-19 加载图片中介绍的两种方法使用 file-loader 和使用 url-loader 对 SVG 来说同样有效，只需要把 Loader test 配置中的文件后缀改成 .svg ，代码如下：

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

由于 SVG 是文本格式的文件，除了以上两种方法外还有其它方法，下面来一一说明。

使用 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 元素，在获取到 SVG 内容后，可以直接通过以下代码将 SVG 插入到网页中：

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

使用 raw-loader 时相关的 Webpack 配置如下：

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

由于 raw-loader 会直接返回 SVG 的文本内容，并且无法通过 CSS 去展示 SVG 的文本内容，因此采用本方法后无法在 CSS 中导入 SVG。也就是说在 CSS 中不可以出现 background-image: url(./svgs/activity.svg) 这样的代码，因为 background-image: url(<svg>...</svg>) 是不合法的。

本实例提供项目完整代码

使用 svg-inline-loader

svg-inline-loader和上面提到的 raw-loader 非常相似，不同在于 svg-inline-loader 会分析 SVG 的内容，去除其中不必要的部分代码，以减少 SVG 的文件大小。

在使用画图工具如 Adobe Illustrator、Sketch 制作 SVG 后，在导出时这些工具会生成对网页运行来说不必要的代码。举个例子，以下是 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']
   }
  ]
 }
};

本实例提供项目完整代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Webpack实战加载SVG的方法

SVG 作为矢量图的一种标准格式,已经得到了各大浏览器的支持,它也成为了 Web 中矢量图的代名词. 在网页中采用 SVG 代替位图有如下好处: SVG 相对于位图更清晰,在任意缩放的情况下后不会破坏图形的清晰度,SVG 能方便地解决高分辨率屏幕下图像显示不清楚的问题. 在图形线条比较简单的情况下,SVG 文件的大小要小于位图,在扁平化 UI 流行的今天,多数情况下 SVG 会更小. 图形相同的 SVG 比对应的高清图有更好的渲染性能. SVG 采用和 HTML 一致的 XML 语法描述,灵活性
Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法

通过多次爬坑,发现了这些监听滚动来加载更多的组件的共同点, 因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的, 所以是进入页面则直接触发一次,当监听到滚动事件之后,继续加载更多, 所以对于无限滚动加载不需要写首次载入列表的函数, 代码如下: html: //父组件 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance=
基于vue和react的spa进行按需加载的实现方法

基于vue和react的spa进行按需加载由于最近打算将所有的管理系统采用同一套登陆方法,然后在登陆后进行系统的切换选择,不需要每个系统都去重新登陆一次,所以前端这边思考将所有的系统用一套spa的应用进行构建,但是各个系统的合并之后,打包后的代码应该是相当大的,单页需要一次性加载所有系统的资源,显得不合实际,所以打算将不同系统的资源进行分离,再选择后在加载该系统的相应资源.自己发现这个业务和每个系统的路由比较类似,因此将系统的配置基于vue-router或者react-router的基础进行按
Android编程实现压缩图片并加载显示的方法

本文实例讲述了Android编程实现压缩图片并加载显示的方法.分享给大家供大家参考,具体如下: 解析: 图片压缩的关键就是 options.inSampleSize = scale; 如果scale > 0,表示图片进行了压缩 /** * 压缩图片 * @author chen.lin * */ public class LoadImageActivity extends Activity implements OnClickListener { private Button mBtnLoad;
js检测iframe是否加载完成的方法

本文实例讲述了js检测iframe是否加载完成的方法.分享给大家供大家参考,具体如下: 这里是继上一篇<js实现iframe框架取值的方法(兼容IE,firefox,chrome等)>的扩展应用: 应用场景:iframe个人感觉最独特的应用之一就是配合P3P协议可以实现跨域写入cookie(好象除此之外,还没找到更有效的办法),但是有时候我们不知道这个iframe页面是否执行完毕,有没有办法判断iframe里的页面是否load完成了呢? iframe1.html: <html> &
Android开发之加载图片的方法

本文实例讲述了Android开发之加载图片的方法.分享给大家供大家参考.具体分析如下: 加载网络上的图片需要在manifest中配置访问网络的权限,如下: <uses-permission android:name="android.permission.INTERNET" /> 如果不配置这个权限的话,会报错:unknown host exception. package com.example.loadimgfromweb; import java.io.InputSt
解决JSON数据因为null导致数据加载失败的方法

一.首先分析问题: 使用NSJSONSerialization或者AFN框架的AFHTTPSessionManager(底层也是NSJSONSerialization)将NSData数据转化成OC对象,有时会出现URL正确,加载数据任然会报错: reason: '-[NSNull length]: unrecognized selector sent to instance 分析原因发现,转化出来的OC对象中含有null.所以,NSNull没有length方法,所以会报找不到方法错误. 二.解决
JS简单实现滑动加载数据的方法示例

本文实例讲述了JS简单实现滑动加载数据的方法.分享给大家供大家参考,具体如下: //滑动 function getScrollTop() { var scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; }else if (document.body) { scrollTop =
js/jquery控制页面动态加载数据滑动滚动条自动加载事件的方法

页面滚动动态加载数据,页面下拉自动加载内容相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志今天我们就来看看他们的实现思路和js控制动态加载的代码下面的代码主要是控制滚动条下拉时的加载事件的在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据都可以别忘了引用jquery类库 $(window).scroll(functi
js实现动态加载脚本的方法实例汇总

本文实例讲述了js实现动态加载脚本的方法.分享给大家供大家参考,具体如下: 最近公司的前端地图产品需要做一下模块划分,希望用户用到哪一块的功能再加载哪一块的模块,这样可以提高用户体验. 所以到处查资料研究js动态脚本的加载,不过真让人伤心啊!,网上几乎都是同一篇文章,4种方法,讨厌其中拷贝别人成果的人,也不加个原文的链接.哎!关键是最后一种方法还有点错误.经过两天的研究查阅资料,在这里和大家分享一下. 首先我们需要一个被加载的js文件,我在一个固定文件夹下创建了一个package.js,打开后在

Webpack实战加载SVG的方法

相关推荐

随机推荐