npm install -g svgo
svgo test.svg
今天遇到一个项目中使用纯色图标的问题,用字体麻烦用图片low,所以就想直接用svg,毕竟只有一两个图标。
第一想法是用 DataURI,然后想到了之前 CSS-tricks 的文章,翻了下做下汇总:
不建议把 svg 转 base64 来用
base64 本身浏览器解码也会消耗一定的资源
svg 转 base64 后反而会变大
解决方案:
压缩 svg 文件,使用 SVGO 或者 SVGOMG
使用 DataURI 而不用 base64 ,DataURI 的用法是 data:[][;base64], base64 只是声明 data 使用 base64 编码而已,非必须(via RFC 2397)
比如,前端观察的 logo 的 svg,sketch 导出后有 702 byte,svgo 压缩后是 292 byte,base64 转码后是 937 byte。
最后代码如下:
background-image: url("data:image/svg+xml,<svg width='288' height='288' viewBox='0 0 288 288' xmlns='http://www.w3.org/2000/svg'%3E%3Ctitle%3Eqianduan logo%3C/title%3E%3Cpath d='M222 144v-6l-41-23v12l30.304 17L181 161v12l41-23v-6zm-144.304 0L108 127v-12l-41 23v12l41 23v-12l-30.304-17z' fill='%2318BC9C' /svg>");
参考
https://css-tricks.com/probably-dont-base64-svg/
https://codepen.io/tigt/post/optimizing-svgs-in-data-uris
microbit 说话
参考网址:http://www.qingchuangzhiyi.com/doc/speech.html
一下:I am a DALEK - EXTERMINATE
import speech
while True:
if microbit.button_a.is_pressed():
speech.pronounce("AY3AEMMM")
microbit.sleep(100)
speech.pronounce("AE6")
microbit.sleep(100)
speech.say("DALEK", speed=180, pitch=100, throat=100, mouth=200)
microbit.sleep(500)
speech.say("EXTERMINATE", speed=150, pitch=100, throat=100, mouth=200)
microbit.sleep(100)