Skip to content

⒚ SVG整体解决方案

Jump to bottom
bugluo edited this page Dec 20, 2016 · 9 revisions

如果你正在使用 tmt-workflow，那么当你运行 gulp build_dist 的时候，img 目录下的svg会根据使用方法的不同做不同的编译。 本方案解决 svg 在使用上机械重复的一些工作，解放劳动力。 具体使用方案和 demo 请移步首页使用 npm 进行安装。

功能介绍

  1. 压缩至原本体积 2/3 甚至更低。
  2. 自动 SYMBOL 合并并内联。
  3. 自动内联到 HTML。
  4. 自动内联到 CSS。
  5. 自动生成引用 PNG 优雅降级。

配合本流程其它工具使用

  1. 自动 REM。
  2. 自动生成宽高。
  3. 自动生成 background-size。

使用介绍

本工作流支持三种svg图片使用方案：

1. 内联到css中当作背景图使用 此方案用于使用svg替换二三倍图切图

.svg{
    background-image:url(../icon/icon.svg);
}

编译后：

.svg{
    background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='51' height='52' viewBox='0 0 51 52' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3EGroup 6%3C/title%3E%3Cdefs%3E%3Cpath id='a' d='M.154 2.198h8.472V.476H.154z'/%3E%3Cpath id='c' d='M.07 8.541h1.8V.008H.07z'/%3E%3C/defs%3E%3Cg transform='translate(0 1);
}

2. 内联到html中当作背景图使用 此方案适用于需要导出设计师 path 做 svg 动画的需求

<!-- 在引用 svg 后面加上 ?i -->
<img src="icon.svg?i" id="toggle" class="toggle">

编译后：

<svg width="20" height="23" id="toggle" class="red" viewBox="0 0 20 23" xmlns="http://www.w3.org/2000/svg">
<path d="M19.5 11.217V11c0-.037-.008-.072-.01-.109C19.365 5.122 16.22.5 10.002.5 3.995.5.672 5.089.517 10.829.511 10.885.5 10.94.5 11v5.5A1.5 1.5 0 0 0 2 18h2.5A1.5 1.5 0 0 0 6 16.5V11a1.5 1.5 0 0 0-1.5-1.5H2.09c.453-4.275 2.689-7.508 7.912-7.508 5.231 0 7.46 
3.233 7.911 7.508H15.5A1.5 1.5 0 0 0 14 11v5.5a1.5 1.5 0 0 0 1.5 1.5H18a1.5 1.5 0 0 0 1.5-1.5v-5.23l.001-.024v-.029zm-17-.216H4a.5.5 0 0 1 .5.5V16a.5.5 0 0 1-.5.5H2.5A.5.5 0 0 1 2 16v-4.5a.5.5 0 0 1 .5-.5zM18 16a.5.5 0 0 1-.5.5H16a.5.5 0 0 1-.5-.5v-4.5a.5.5 0 0 1 .5-.5h1.5a.5.5 0 0 1 
.5.5V16zm-1.409 2c-.372.698-.771 1.272-1.184 1.593-.639.498-1.57.381-2.277.37a1.957 1.957 0 0 0-1.887-1.463 1.965 1.965 0 0 0-1.961 1.968c0 1.088.878 1.97 1.961 1.97.767 0 1.423-.446 1.746-1.09.84.051 2.073-.05 3.024-.598.768-.443 1.447-1.499 
2.028-2.75h-1.45zm-5.348 3.312a.84.84 0 0 1-.837-.844.84.84 0 0 1 .837-.844.84.84 0 0 1 .836.844.84.84 0 0 1-.836.844z" fill-rule="evenodd"></path>
</svg>

3. 使用 symbol 合并 html 中内引用的单色 svg 图片 此方案适用于有单色icon有换色需求的图片

<!-- 在引用 svg 后面加上 ?s -->
<img src="icon.svg?s" id="toggle" class="toggle">

编译后：

<svg width="21" height="22" xmlns="http://www.w3.org/2000/svg" id="toggle" class="red">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../symbolsvg/symbol.cccb32ab.svg#icon"></use>
</svg>
.red use,.red path{
   fill:red;
}

降级方案

在配置文件 .tmtworkflowrc 中开启或关闭，img 目录下的 svg 图片会自动生成对应的 png 一倍图用于低版本 android 及 ie8 的降级

"SVGGracefulDegradation": true

css 中利用低版本浏览器不支持多背景图片进行降级。

.icon{
    background-image: url(icon.png);
    background-image: url(icon.svg),none;
}

html 中利用 image 标签 src 在支持 svg 的浏览器不会被渲染，在低版本浏览器被渲染成 img 进行降级。

<svg><image src="icon.png"></image></svg>

注意点

  1. svg 图片一定是放在 img 目录下才会被处理
  2. 当作背景使用的时候一定是 background-image 属性才会被识别匹配
  3. 若在 svg 中直接引用图片没有在后缀加上?i或?s，本流程会只进行降级，不进行内联或 symbol 处理
  4. 本流程压缩使用 svgo，具体配置详见代码，默认不删除 title，此便签在语义化和无障碍会有一定作用。
  5. 方案 3 使用 use 引用打包的 svg 文件中的 path，如果 symbol 中的 path 有 fill 属性填充颜色，css 的.icon use{fill:red}优先级没有内联的 fill 高，所以如果有换色需求需要手动删掉 svg 文件中的 fill 属性。
  6. 方案 2 内联到 html 的 svg片段由于 svgo 会将多余的 id 删除，建议在 svgo 对应需要操作的 path 中加上 data-id，进行 path 操作。

xxx__item_hightlight

Clone this wiki locally