一、SVG图片介绍
SVG(Scalable Vector Graphics)即可缩放矢量图形,是一种基于XML语法的图像格式。和传统的位图不同,SVG图像是矢量的,它可以保持清晰度无论放大还是缩小。
SVG图片优点:
- 渲染清晰度高,缩放不失真
- 文件大小相对较小
- 支持CSS样式、JavaScript交互等
- 可压缩性高
二、微信中使用SVG的限制
微信中使用SVG图片时,需要注意以下几点:
- 不支持外部文件引用
- 不支持filter,mask等高级特效
- 动画效果受限,CSS动画较为受限制
- 样式需内联或嵌入到svg标签内
- 仅在iOS7及以上、Android5.0及以上版本支持
三、SVG优化技巧
1、使用SVG压缩工具
由于SVG图像作为文本文件,可以进行压缩。因此,可以使用工具对SVG文件进行压缩。常见的SVG压缩工具有SVGOMG、SVGO等。
<svg width="106" height="99" viewBox="0 0 106 99" xmlns="http://www.w3.org/2000/svg"> <path d="M24 23h60v53H24z"/> <path d="M12.5 16.5h81l-4.28 42.436h-72.44L12.5 16.5z"/> <ellipse transform="rotate(-.53 53.979 60.698)" cx="53.979" cy="60.698" rx="16.963" ry="17.224"/> </svg>
使用SVGOMG工具对SVG进行压缩后:
<svg viewBox="0 0 106 99" xmlns="http://www.w3.org/2000/svg"> <path d="M24 23h60v53H24z"/> <path d="M12.5 16.5h81l-4.28 42.436h-72.44L12.5 16.5z"/> <ellipse transform="rotate(-.53 53.98 60.7)" cx="53.98" cy="60.7" rx="16.96" ry="17.22"/> </svg>
压缩前后可见文件大小缩小约10%。
2、减小SVG文件大小
在使用SVG图片时,考虑到微信的限制,尽可能减少SVG文件大小,以提高加载速度。
- 尽可能少的节点和命令,减小文件大小
- 尽量避免使用
、 等标签,因为它们会增加文件大小,影响加载速度
<svg viewBox="0 0 106 99" xmlns="http://www.w3.org/2000/svg"> <path d="M24 23h60v53H24z"/> <path d="M12.5 16.5h81l-4.28 42.436h-72.44L12.5 16.5z"/> </svg>
3、避免使用SVG动画
SVG在微信中的动画效果非常有限,除了CSS动画以外几乎无法使用动画效果,因此在使用SVG图片时,最好不要使用SVG动画。
<svg viewBox="0 0 106 99" xmlns="http://www.w3.org/2000/svg"> <animateTransform> </animateTransform> </svg>
4、使用字体替代SVG图片
在部分文字需要用到的情况下,可以考虑使用字体来替代SVG图片,以减少图片文件大小,提高加载速度。
font-family: 'icomoon'; content: '\e904';
四、结语
以上便是在微信中使用SVG图片的优化技巧。在使用SVG图片时,需要考虑微信的限制和文件大小,尽可能减小文件大小,以提高加载速度和流畅度。