SVGO: Node.js 开发的 SVG 矢量图优化工具(svg压缩工具)
SVG图片压缩
这是个通过借助npm包的一种方式去压缩svg的图片,由于阿里的图库自己创建的图标有大小的限制,当我们想要自己用自己的图标的时候就可以使用这种方式去完成对svg的图片压缩。
1、下载node.js (地址:https://nodejs.org/zh-cn/)
即前提,必须本地部署好npm,否则就跑不起来。
2、下载svgo的包
下载node.js成功后,使用命令行安装
npm install -g svgo
项目官方网址:
https://www.npmjs.com/package/svgo
安装成功会有如下提示:(类似的提示语)
Nodejs-based tool for optimizeing SVG vector graphics files
Usage使用示例:
svgo [OPTIONS] [ARGS]
3、压缩svg
在控制台输入:
svgo E:\a.svg -o E:\b.svg
第一个路径是需要压缩文件路径;
-o OUTPUT
第二个是压缩后存放地址。
也可以是完整目录形式,如:
svgo -f .\svgFrom_tm\
4、官方示例
$ svgo test.svg
or:$ svgo *.svg
$ svgo test.svg -o test.min.svg
$ svgo test.svg other.svg third.svg
$ svgo test.svg other.svg third.svg -o test.min.svg -o other.min.svg -o third.min.svg# with STDIN / STDOUT:$ cat test.svg | svgo -i - -o - > test.min.svg
with folder$ svgo -f ../path/to/folder/with/svg/files
or:$ svgo -f ../path/to/folder/with/svg/files -o ../path/to/folder/with/svg/output
$ svgo *.svg -o ../path/to/folder/with/svg/output
with strings:$ svgo -s '<svg version="1.1">test</svg>' -o test.min.svg
or even with Data URI base64:$ svgo -s 'data:image/svg+xml;base64,...' -o test.min.svg
with SVGZ:from .svgz to .svg:$ gunzip -c test.svgz | svgo -i - -o test.min.svg
from .svg to .svgz:$ svgo test.svg -o - | gzip -cfq9 > test.svgz
5、官方使用指引
Usage:svgo [OPTIONS] [ARGS]Options:-h, --help : Help-v, --version : Version-i INPUT, --input=INPUT : Input file, "-" for STDIN-s STRING, --string=STRING : Input SVG data string-f FOLDER, --folder=FOLDER : Input folder, optimize and rewrite all *.svg files-o OUTPUT, --output=OUTPUT : Output file or folder (by default the same as the input), "-" for STDOUT-p PRECISION, --precision=PRECISION : Set number of digits in the fractional part, overrides plugins params--config=CONFIG : Config file or JSON string to extend or replace default--disable=PLUGIN : Disable plugin by name, "--disable=PLUGIN1,PLUGIN2" for multiple plugins--enable=PLUGIN : Enable plugin by name, "--enable=PLUGIN3,PLUGIN4" for multiple plugins--datauri=DATAURI : Output as Data URI string (base64, URI encoded or unencoded)--multipass : Pass over SVGs multiple times to ensure all optimizations are applied--pretty : Make SVG pretty printed--indent=INDENT : Indent number when pretty printing SVGs-r, --recursive : Use with '-f'. Optimizes *.svg files in folders recursively.-q, --quiet : Only output error messages, not regular status messages--show-plugins : Show available plugins and exitArguments:INPUT : Alias to --input
6、最后附上基于svgo压缩的图标库:zico
这是由Zoomla!逐浪CMS官方开发的中国自主图标库,拥有中国百强企业商标和特色图库,值重使用,网址:
http://ico.z01.com
引用方法很简单,有三种方式:
- 1.基于css,如`
- 2.基于svg格式,标签如上。
- 3.基于单图svg引用
- 4.在设计软件中使用,如photoshop、cordeldraw、word等一切软件应用。
开箱即用,npm快速部署是:
npm i zico
SVGO: Node.js 开发的 SVG 矢量图优化工具(svg压缩工具)相关推荐
- C#操作SVG矢量图-nuget库svg
文章目录 NuGet 测试 文档 NuGet 新建C#应用 配置包源 工具->NuGet包管理器->程序包管理器设置 新建包源https://www.nuget.org/api/v2/ 安 ...
- 【Android 安装包优化】Android 中使用 SVG 图片 ( SVG 矢量图简介 | Android 中生成 Vector 矢量图资源 )
文章目录 一.SVG 矢量图简介 二.Android 中生成 Vector 矢量图资源 三.参考资料 一.SVG 矢量图简介 Android SVG 参考文档 : https://developer. ...
- 计算机系统的搭建步骤,电脑搭建Node.js开发环境的操作教程[多图]
电脑如何搭建Node.js开发环境?近日有用户询问怎么在Win7系统电脑上搭建Node.js开发环境,今天教程之家就给大家分享Node.js开发环境的搭建教程. 操作步骤: 1.下载Node.js官方 ...
- 手把手教你学node之搭建node.js开发环境
搭建node.js开发环境 本文只针对在Linux或者Mac下面.至于使用 Windows 并坚持玩新技术的同学,我坚信他们一定有着过人的.甚至是不可告人的兼容性 bug 处理能力,所以这部分同学麻烦 ...
- 2021年Node.js开发人员学习路线图
Node.js 自发布以来,已成为业界重要破局者之一.Uber.Medium.PayPal 和沃尔玛等大型企业,纷纷将技术栈转向 Node.js.Node.js 支持开发功能强大的应用,例如实时追踪 ...
- 基于node.js开发环境下创建及开发vue.js项目的环境配置骤
基于node.js开发环境下创建开发vue.js项目的环境配置骤如下: 步骤一:安装node.js,安装完后运行node -v命令检安装node的查版本,判断是否安装成功.Npm是node.js包管理 ...
- 自制批量SVG矢量图转普通图片格式小工具
最近在学unity自制一点小游戏,当然我们这种主攻开发的,在学习阶段肯定只能借(tou)美工素材来学习了. 本来拿到了一系列的动画,但是是SVG的矢量图格式的,原生unity对SVG矢量图支持不太好, ...
- Node.js开发入门—Express安装与使用
之前我们在安装完Node.js后直接写了个HelloWorld网站,这次呢,我们使用Node.js的Web框架Express来重写一下HelloWorld,看看有什么不同.同时我们还会重写之前的文件服 ...
- svg矢量图字体图标iconfont的制作
前端拿到设计稿 若是存在SVG矢量图需要处理成字体图标,图片放大也不会模糊 ,svg也可以在项目中直接使用,但是兼容性不太好.以iconfont字体图标库为例,在字体图标库里创建一个项目. 步骤如下: ...
最新文章
- DataV 支持 token 验证啦!
- java接口方法默认权限_java 接口内定义方法的权限是什么?
- 2021,我的输入输出
- ASP.NET Core 中文文档 第三章 原理(1)应用程序启动
- 使用Apriori进行关联分析(一)
- java 局部内部类常用么_Java中的内部类
- React Native (一) react-native-video实现音乐播放器和进度条的功能
- 计算机组成的ir是指,2002.10计算机组成原理§1控制器的基本概念⑵指令寄存器IR指令.ppt...
- SpringMVC+Spring Data JPA实现增删改查操作
- Linux内核编程11期:设备树(device tree)
- USB转232和485的区别
- 曙光服务器虚拟软驱,曙光ipmi系统管理平台用户使用指南.docx
- 使用阿帕奇服务器配置多个网站站点的方法
- 测试睡眠的软件是,MOORING睡眠检测
- DNS解析异常问题排查
- python将密文解密为明文_三分钟教你学会如何将密文解码成明文
- 离线RSS浏览FeedDemon
- 猜名人读心术作业C语言答案,谁能说说这个读心术的原理?太他妈邪乎了。。。...
- c语言初学者编程大题部分
- Spark Event Log (一)概述
热门文章
- TMG solvers for NX 1847/1872/1899/1926/1953 Series Win64
- 蓝桥杯Web前端练习-----渐变色背景生成器
- javaweb基于servlet天气预报查询系统设计与实现(项目源码)
- mysql select查询字段_MySQL基础:SELECT查询语句
- LocalDateTime去掉T,JSONField失效
- maven的下载和安装(win和IOS)
- linux修改时区不用重启服务,Linux修改时区不用重启的要领
- flask引用bootstrap4框架
- python中函数的可变参数_简单谈谈Python中函数的可变参数
- python:实战篇