SVG制作说明

SVG制作说明

SVG制作说明

我们公司所做的系统，不仅只是展示在电脑上，大多还会用在大屏展示上。因此我们需要得图片格式不仅仅只是ipg或者png，而是需要一种任何种设备上展示都不会失真的格式，这种格式就是SVG格式。如果你不接触大屏设计这块领域，可能就不会熟悉SVG，那么作为设计师该如何制作SVG呢？
制作SVG可以在AI或者Sketch中绘制所要得形状就可以，只是导出得时候有几种不同的方式，导出方式的不同对应的图片文件代码也不同。本篇文档会分三部分（SVG制作要求、导出及遇到一些问题得解决方法）进行说明。
一、SVG制作要求

1. SVG代码的基本格式
   

2. 命名规范
   图层需规范命名，确保名称唯一性，如图
   

3. 不同状态制作
   命名格式：SVG_alert/SVG_ani
   2.1三种动画状态，包括静止状态、告警状态、运转状态。有些文件还包括离线在线状态（如风冷热泵、空气源热泵）、开启关闭（如灯泡、灯开关）。
   三个分组分别对应三种状态：

（1）运转状态：
AI中图层分组名SVG_ani对应 SVG代码中<g id=” SVG_ani">，通过添加style=“display:block”，控制SVG动画；如下：
<g id=” SVG_ani" style=“display:block”>  动画开启
<g id=” SVG_ani" style=“display:none”>  动画关闭
如：循环泵.svg；

（2）告警状态：
AI中图层分组名SVG_alert对应 SVG代码中<g id=” SVG_alert">，通过添加style=“display:block”，控制SVG告警；同上述。
如: 照明柜.svg；

（3）开关状态：
AI中图层分组名SVG_sta对应 SVG代码中<g id=” SVG_sta">，通过添加style=“display:block”，控制SVG告警；同上述。
如：灯泡.svg，包含两种状态，如：

（4）静止状态：没有动画显示。如生活水箱.svg。
AI中图层分组名SVG_base对应 SVG代码中<g id=” SVG_base">

注：每种状态的切换就是进行代码替换none(不显示)/block(显示)。

二、SVG导出

1. “导出为”选项
   数据可以按以下图片设置保存，注意多个状态图层在保存时要把它都显现出来，不然软件会直接去掉隐藏得图层。
   

2. “存储为”选项
   同上方，数据可以按以下图片设置保存，注意这种导出可能会出现样式互相污染得问题，解决方法在下方第三部分内容。（这种方式导出得SVG文件较大，需要第三方来压缩）

三、SVG遇到问题的解决方法

1. 样式互相污染的解决方法
   找到全局代码里“.st”开头的class和url里的“#SVGID” ，用Id进行全局替换(.st与#SVGID后面的数字不用管)

• 注意class与url是AI随机生成，不一定是“.st与#SVGID”
  

2. 其他
   导入进项目之前，删除SVG文件顶部标签，如下：