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 exit Arguments:
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压缩工具)的更多相关文章

  1. svg矢量图绘制以及转换为Android可用的VectorDrawable资源

    项目需要 要在快速设置面板里显示一个VoWiFi图标(为了能够区分出来图形,我把透明的背景填充为黑色了) 由于普通图片放大后容易失真,这里我们最好用矢量图(SVG(Scalable Vector Gr ...

  2. 手把手教你学node之搭建node.js开发环境

    搭建node.js开发环境 本文只针对在Linux或者Mac下面.至于使用 Windows 并坚持玩新技术的同学,我坚信他们一定有着过人的.甚至是不可告人的兼容性 bug 处理能力,所以这部分同学麻烦 ...

  3. 1.0搭建 Node.js 开发环境

    <搭建 Node.js 开发环境> 本课程假设大家都是在 Linux 或者 Mac 下面.至于使用 Windows 并坚持玩新技术的同学,我坚信他们一定有着过人的.甚至是不可告人的兼容性 ...

  4. Node.js学习笔记——Node.js开发Web后台服务

    一.简介 Node.js 是一个基于Google Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个事件驱动.非阻塞式 I/O 的模型,使其轻量又高效.Node.j ...

  5. Linux虚拟机中 Node.js 开发环境搭建

    Node.js 开发环境搭建: 1.下载CentOS镜像文件和VMWare虚拟机程序; 2.安装VMWare——>添加虚拟机——>选择CentOS镜像文件即可默认安装带有桌面的Linux虚 ...

  6. heX——基于 HTML5 和 Node.JS 开发桌面应用

    heX 是网易有道团队的一个开源项目,允许你采用前端技术(HTML,CSS,JavaScript)开发桌面应用软件的跨平台解决方案.heX 是你开发桌面应用的一种新的选择,意在解决传统桌面应用开发中繁 ...

  7. 2015年最佳的15个 Node.js 开发工具

    Node.js 越来月流行,这个基于 Google V8 引擎建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.在本文中,我们列出了2015年最佳的15个 Node.js 开发工具.这些工具 ...

  8. 《Node.js开发实战详解》学习笔记

    <Node.js开发实战详解>学习笔记 ——持续更新中 一.NodeJS设计模式 1 . 单例模式 顾名思义,单例就是保证一个类只有一个实例,实现的方法是,先判断实例是否存在,如果存在则直 ...

  9. 推荐近期15个 Node.js 开发工具

    近来Node.js 越来月流行了,这个基于Google V8 引擎建立的平台, 用于方便地搭建响应速度快.易于扩展的网络应用.在本文中,我们列出了2015年最佳的15个 Node.js 开发工具.这些 ...

随机推荐

  1. 双击tomcat8w.exe出现指定的服务未安装

    进入tomcat bin 目录下 打开cmd 输入命令 service.bat install   进行服务安装. 双击tomcat8w.exe 就可以打开了.

  2. MyBatis封装对象内的List出现的问题

    本篇文章问题1:wife的复数形式是wives,不是wifes,英语不好请见谅. 对象举例: class User { private String username; private List< ...

  3. Matrix Analysis and Application

    Chap 1: Linear Equations and Matrix Linear equations Gaussian elimination Pivot; Triangularize; Back ...

  4. mysql从零开始之MySQL 删除数据库

    MySQL 删除数据库 使用普通用户登陆 MySQL 服务器,你可能需要特定的权限来创建或者删除 MySQL 数据库,所以我们这边使用 root 用户登录,root 用户拥有最高权限. 在删除数据库过 ...

  5. C语言实现简易计算器(可作加减乘除)

    C语言实现简易计算器(加减乘除) 计算器作为课设项目,已完成答辩,先将代码和思路(注释中)上传一篇博客 已增添.修改.整理至无错且可正常运行 虽使用了栈,但初学者可在初步了解栈和结构语法后理解代码 # ...

  6. 微信小程序内判断是否关注公众号(JAVA)

    微信小程序内判断是否关注公众号(JAVA) 思路来源(第二种): https://blog.csdn.net/Yanheeee/article/details/117295643 /** * 总体思路 ...

  7. CF123E Maze(期望dp,树形dp,式子)

    题目大意: 给你一棵树,边权都是1,每一个点有一个是起点的概率和一个是终点的概率,你将以起点为根,开始在树上随机dfs,每到一个点,就会将他的所有儿子随机打乱成序列,然后按照那个随机顺序走完,直到走到 ...

  8. Golang通脉之数据类型

    标识符与关键字 在了解数据类型之前,先了解一下go的标识符和关键字 标识符 在编程语言中标识符就是定义的具有某种意义的词,比如变量名.常量名.函数名等等. Go语言中标识符允许由字母数字和_(下划线) ...

  9. mybatis学习笔记(1)基本环境

    1.pom引入 <dependencies> <dependency> <groupId>org.mybatis</groupId> <artif ...

  10. 【二食堂】Alpha - Scrum Meeting 7

    Scrum Meeting 7 例会时间:4.17 11:40 - 12:00 进度情况 组员 昨日进度 今日任务 李健 1. 继续文本区域的开发,先完成目前简陋的添加方式,再区实现勾选功能issue ...