Skip to content

SVG 图像的使用及优化

  • 对于一些简单的图标如果使用svg图标会比普通图片更小
  • svg 的图片是矢量图形,放大缩小不会产生锯齿
  • 支持通过 css 修改样式、增加动画
  • 自身也支持动画

svg 图片的格式

html
<!-- 一个简单的 svg 图片 -->
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' stroke='#fff'>
  <path d='M1 1l8 8m0-8L1 9'/>
</svg>

获得 svg 图片

  • 像编写代码这样编辑 svg 图片
  • 使用 svg 编辑器自己制作
  • 使用 Ps Ai 等带类似钢笔工具的软件制作
  • 新版本的 Ps 已经支持导出 svg 图片了

优化 svg 图片

  • 使用工具制作的图片常常包含大量无用代码,建议精简到如下格式
html
<svg xmlns='http://www.w3.org/2000/svg' viewBox='' style=''>
  <!-- ...路径 -->
</svg>
  1. xmlns 是不可少的
  2. viewBox 里面的4个坐标指示 svg 图片的显示区域
  3. style 为默认样式(如果想通过 css 控制样式或内部没有一个统一的样式则不需要)
  4. 最好将 width 与 height 删掉(限定大小 svg 图片就不能够缩放了)
  5. 使用 Ps 时最好使用图层组件将可以合并的路径合并形状,最后将图层的路径’合并形状组件‘得倒一个 path 路径

使用 svg 图片

  • 根据需求选择将 svg 图片放在 html 或 css 里面
  • 放在 html 里面的 svg 图片可以通过 css 控制样式
  • 放在 css 的 background-image: url() 里面
  • 放在 background 里面需要指定格式(data:image/svg+xml;charset=utf-8)
css
.test {
  /* 使用 ("data:image/svg+xml;charset=utf-8, + svg 代码"); */
  background-image: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' stroke='#fff'><path d='M1 1l8 8m0-8L1 9'/></svg>");
}
  • 放在 background 里面的 svg 图片无法再通过 css 改变样式
  • 但比起直接放在 html 里面让 html 的结构更精简

结合 less 使用(其他同理)

  • 结合 less 使用可以在引用 svg 图片时改变部分样式
  • 同时也方便再次调用
  1. 创建一个放 svg 的 less 文件(例如:svg.less)
  2. 定义一个变量指定 svg 格式(例如:@svg-base: "data:image/svg+xml;charset=utf-8,";)
less
@svg-base: "data:image/svg+xml;charset=utf-8,";

.bg-img (@url, @s: 100%, @p: center, @r: no-repeat) {
  background-image: (url(@url));
  background-size: (@s);
  background-position: (@p);
  background-size: (@r);
}

.svg-close (@color, @size: 100%, @position: center, @repeat: no-repeat) {
  @close: escape("<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' stroke='@{color}'><path d='M1 1l8 8m0-8L1 9'/></svg>"); // 简单编码
  .bg-img("@{svg-base}@{close}", @size, @position, @repeat);
}

-通过 .svg-close 调用

less
.test {
  display: inline-block; // IE 需要
  width: 20px; // 需要指定大小
  height: 20px;
  .svg-close(#fff);
}

前往查看更多相关

结合 postcss 使用,插件推荐

创建时间:

最近更新:

nuxt 踩坑记录

nuxt 踩坑记录

为了实现更好的 seo,不得不考虑将之前的 vue 单页面程序托到服务器上渲染​,看了官方的 ssr 和 nuxt,最后选择通过 nuxt 实现。 下面分享一些我在构建过程中踩的坑

vue 清除定时器

vue 清除定时器

由于是单页面,在页面切换后,定时器没有被清除,在再次回到页面时,使得两个定时器同时工作,时间流逝加倍。使用 beforeDestroy() 来清除定时器