Webpack实战加载SVG的方法


Posted in Javascript onDecember 26, 2017

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

  1. SVG 相对于位图更清晰,在任意缩放的情况下后不会破坏图形的清晰度,SVG 能方便地解决高分辨率屏幕下图像显示不清楚的问题。
  2. 在图形线条比较简单的情况下,SVG 文件的大小要小于位图,在扁平化 UI 流行的今天,多数情况下 SVG 会更小。
  3. 图形相同的 SVG 比对应的高清图有更好的渲染性能。
  4. 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

使用 svg-inline-loader

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
漂亮的仿flash菜单,来自蓝色经典
Jun 26 Javascript
jquery1.83 之前所有与异步列队相关的模块详细介绍
Nov 13 Javascript
jquery实现弹出层遮罩效果的简单实例
Mar 03 Javascript
javascript中字符串拼接详解
Sep 26 Javascript
javascript实现带节日和农历的日历特效
Feb 01 Javascript
jquery+css实现的红色线条横向二级菜单效果
Aug 22 Javascript
JS组件中bootstrap multiselect两大组件较量
Jan 26 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
Vue组件化开发思考
Feb 02 Javascript
layui 实现加载动画以及非真实加载进度的方法
Sep 23 Javascript
Vue 中 template 有且只能一个 root的原因解析(源码分析)
Apr 11 Javascript
VUE UPLOAD 通过ACTION返回上传结果操作
Sep 07 Javascript
vue学习教程之带你一步步详细解析vue-cli
Dec 26 #Javascript
基于vue-cli配置lib-flexible + rem实现移动端自适应
Dec 26 #Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 #Javascript
细说webpack源码之compile流程-rules参数处理技巧(2)
Dec 26 #Javascript
AngularJS实现的根据数量与单价计算总价功能示例
Dec 26 #Javascript
细说webpack源码之compile流程-rules参数处理技巧(1)
Dec 26 #Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 #Javascript
You might like
十天学会php之第二天
2006/10/09 PHP
linux下 C语言对 php 扩展
2008/12/14 PHP
PHP mysql与mysqli事务使用说明 分享
2013/08/17 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
php htmlentities()函数的定义和用法
2016/05/13 PHP
py文件转exe时包含paramiko模块出错解决方法
2016/08/12 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
Bootstrap布局方式详解
2016/05/27 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
js实现可以点击收缩或张开的悬浮窗
2017/09/18 Javascript
React根据宽度自适应高度的示例代码
2017/10/11 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
linux下安装easy_install的方法
2013/02/10 Python
多版本Python共存的配置方法
2017/05/22 Python
对python中Matplotlib的坐标轴的坐标区间的设定实例讲解
2018/05/25 Python
python 阶乘累加和的实例
2019/02/01 Python
Python爬虫学习之获取指定网页源码
2019/07/30 Python
python可视化实现KNN算法
2019/10/16 Python
基于python 凸包问题的解决
2020/04/16 Python
HTML5 canvas画图并保存成图片的jcanvas插件
2014/01/17 HTML / CSS
Erwin Müller穆勒家居瑞士官网:您整个家庭的邮购公司
2019/12/28 全球购物
专营店会计助理岗位职责
2013/11/29 职场文书
七年级历史教学反思
2014/02/05 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
公司领导班子召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
给朋友的道歉短信
2015/05/12 职场文书
2015年数学教研工作总结
2015/07/22 职场文书
商务宴会祝酒词
2015/08/11 职场文书
推荐六本经典文学奖书籍:此生必读
2019/08/22 职场文书
写一个Python脚本下载哔哩哔哩舞蹈区的所有视频
2021/05/31 Python
MybatisPlus EntityWrapper如何自定义SQL
2022/03/22 Java/Android
Win11任务栏无法正常显示 资源管理器不停重启的解决方法
2022/07/07 数码科技