怎么把 SVG 转成 PNG ?用 Chrome 吧,非常好用,还能设定自己想要的尺寸。

什么是 SVG ?

SVG (Scalable Vector Graphics,可缩放矢量图形) 是基于 XML 、用于描述二维矢量图形的一种图形格式。 SVG 由 W3C 制定,是一个开放标准。

SVG 转 PNG 有哪些办法?

  1. 在线转换
  2. 在线编辑器
  3. 本地软件,如: AI, Inkscape 等
  4. 代码转换

但都会有些问题:

  1. 在线转换:改不了颜色、尺寸。

    • 尤其 SVG 图标,一般 24x24 黑色。
  2. 在线编辑器:编辑不好,用着总不怎么灵光。
  3. 本地软件:需要下载安装,可能操作不好。就简单转 PNG 而已。
    • Sketch 导入 SVG 图标( path 属性描述)效果异常; AI 也是,也可能是操作不熟。
  4. 代码转换:算了吧。

现代浏览器

现代浏览器(Chrome, Edge 等)本身就能预览 SVG ,不如直接截图?也是个办法。

不过,发现 Microsoft Edge 可以直接另存 SVG ,但尺寸只能跟随窗口改变,不精确。

那 Google Chrome 呢?首先想到的是插件,但没找到一个好用的。后来发现,「开发者工具」里就能够导出。

Chrome 将 SVG 转 PNG

准备一个 SVG 图标

准备了一个 svg.svg 做演示。你也可以到 Simple Icons: https://simpleicons.org 下载一个。

Chrome 打开 SVG 图标

直接把 SVG 图标拖动到 Chrome 页面,打开:

F12 或右键「审查元素」打开「开发者工具」

页面右侧顶部工具栏,打开第二个按钮「Toggle device toolbar」(Elements 左侧那个)。

调整 SVG 的尺寸和颜色

  1. 页面左侧上部,设定尺寸

    • 500x500
  2. 页面右侧上部,修改颜色
    • svg 添加属性 style="background-color:#FFB13B" ,设定背景色
    • path 添加属性 fill="#ffffff" ,设定前景色

将 SVG 转成 PNG

页面左侧右上角打开「更多」,选择「Capture screenshot」:

就会保存成 PNG 到下载目录。

但 macOS 上 PNG 尺寸会放大一倍:

可以设定尺寸时减小一倍,或者用 PS 编辑。

此外,「Capture full size screenshot」可以截取页面长图。

结语

什么时候用上了这个小技巧,想得起 GoCoding 就最好了。

小技巧:如何用 Chrome 将 SVG 转成 PNG的更多相关文章

  1. sql server 小技巧(7) 导出完整sql server 数据库成一个sql文件,包含表结构及数据

    1. 右健数据库 –> Tasks –> Generate Scripts   2. 选择所有的表   3. 下一步,选择Advanded, Types of data to script ...

  2. sql server 小技巧 集锦

    sql server 小技巧(1) 导入csv数据到sql server sql server 小技巧(2) 删除sql server中重复的数据 sql server 小技巧(3) SQL Serv ...

  3. Chrome 35个开发者工具的小技巧

    来源:w3cplus - 南北(@ping4god) 网址:http://www.w3cplus.com/tools/dev-tips.html 谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览 ...

  4. Chrome 的 100 个小技巧 中文版

    英文原版<100 Tips For Chrome, Chrome OS and ChromeBook Users>作者博客 - chromestory.com 本文是对<100 Ti ...

  5. [转帖]CHROME开发者工具的小技巧

    CHROME开发者工具的小技巧 https://coolshell.cn/articles/17634.html 需要仔细学习看一看呢. 2017年01月19日 陈皓 评论 58 条评论  64,08 ...

  6. 关于Google Chrome的使用小技巧!

    1 1 http://www.runoob.com/w3cnote/chrome-skip.html Chrome是Google公司开发的一个现代化的网页浏览器,作为三大浏览器之一 它搭载了被称为V8 ...

  7. 前端开发者应该知道的 CSS 小技巧

    一些小技巧让你的CSS技术更专业 使用:not()去除导航上不需要的边框 为body添加行高 垂直居中任何元素 逗号分离的列表 使用负nth-child选择元素 使用SVG图标 文本显示优化 在纯CS ...

  8. 前端网络、JavaScript优化以及开发小技巧

    一.网络优化 YSlow有23条规则,中文可以参考这里.这几十条规则最主要是在做消除或减少不必要的网络延迟,将需要传输的数据压缩至最少. 1)合并压缩CSS.JavaScript.图片,静态资源CDN ...

  9. 开发必备的Windows小技巧

    在Windows中我们经常会遇到各种小问题,而这些小问题又确实在影响着工作效率,如果能解决这些小问题,那么就能在一定程度上提高工作效率,保证心情愉悦.今天我就来分享一下几个自认为比较有用的小技巧. 保 ...

随机推荐

  1. 【雕爷学编程】Arduino动手做(48)---三轴ADXL345模块

    37款传感器与模块的提法,在网络上广泛流传,其实Arduino能够兼容的传感器模块肯定是不止37种的.鉴于本人手头积累了一些传感器和模块,依照实践(动手试试)出真知的理念,以学习和交流为目的,这里准备 ...

  2. for循环中break和continue的区别

    break 会立即退出循环,强制执行循环后面的语句 默认只会终止紧邻的循环,如果要终止其他循环,需要给循环起名字 例如: name:for(var i = 0; i < 5; i++){ for ...

  3. Django之AJAX简单使用

    AJAX简介: AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步的Javascript和XML”.即使用Javascript语言与服务器进行异步交互,传输 ...

  4. ol,li,ul,dl,dt,dd

    块级元素div尽量少用,其实和table一样,嵌套越少越好,它也是会影响速度的! ol 有序列表. <ol> <li>……</li> <li>……< ...

  5. 为什么说OC是运行时语言?什么是动态类型、动态绑定、动态加载?

    转载:https://www.cnblogs.com/dxb123456/p/5525343.html 动态: 主要是将数据类型的确定由编译时,推迟到了运行时. 这个问题其实浅涉及到两个概念,运行时和 ...

  6. spring的动态代理实现

    Host.java package cn.zys.dynamiproxy; public class Host implements Rent{ public void rent(){ System. ...

  7. window端口被占用

    一.问题描述 今天一来公司,在IntelliJ IDEA 中启动Tomcat服务器时就出现了如下图所示的错误: 错误: 代理抛出异常错误: java.rmi.server.ExportExceptio ...

  8. 基于 kubeadm 搭建高可用的kubernetes 1.18.2 (k8s)集群二 搭建高可用集群

    1. 部署keepalived - apiserver高可用(任选两个master节点) 1.1 安装keepalived # 在两个主节点上安装keepalived(一主一备) $ yum inst ...

  9. [Objective-C] 015_Delegate(委托代理)

    Delegate在iOS开发中随处可见,Delegate是一种功能强大的软件架构设计理念,它的功能是程序中一个对象代表另一个对象,或者一个对象与另外一个对象协同工作(如小明喜欢一个女孩如花,却苦于没有 ...

  10. 抽象类(abstract class)与抽象方法

    package cm.aff.abst; /* abstract:抽象的,,可以修饰类,方法 1.修饰类: 抽象类: ①不能被实例化 ②有构造器的 ③凡是类都有构造器 ④抽象方法所修饰的类一定是抽象类 ...