怎么把 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动手做(40)——旋转编码器模块

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

  2. spark机器学习从0到1协同过滤算法 (九)

      一.概念 协同过滤算法主要分为基于用户的协同过滤算法和基于项目的协同过滤算法.   基于用户的协同过滤算法和基于项目的协同过滤算法 1.1.以用户为基础(User-based)的协同过滤 用相似统 ...

  3. linux常用命令---网络端口信息与进程管理

    进程管理 进程管理

  4. EMAIL、用户名测试点

    EMAIL xxxaa@xxx.xxx 1.没有@情况,如:aa.net 2.没有.符号,如:aa@qqcom 3..后面没有字符:如 xxxaa@xxx. 4..不在@后面, 如:xxxaa.@xx ...

  5. 基于elementUI使用v-model实现经纬度输入的vue组件

    绑定一个 [12.34,-45.67] (东经西经,南纬北纬 正负表示) 形式的经纬度数组,能够按度分秒进行编辑,效果如下所示,点击东经,北纬可切换. 经纬度的 度转度分秒 能够获取度分秒格式数据 C ...

  6. BZOJ 1028 BZOJ 1029 //贪心

    1028: [JSOI2007]麻将 Time Limit: 1 Sec  Memory Limit: 162 MBSubmit: 2197  Solved: 989[Submit][Status][ ...

  7. Poj 2109 k^n = p.

    Poj2109(1)和Poj2109(2)这两种解答都是有漏洞的,就是解不一定存在. 当然这种漏洞的存在取决于出题人是否假设输入的n,p必须默认有kn = p这样的关系存在. 这道题可以详细看http ...

  8. Web-Security-Learning

    Web Security sql注入 MySql MySQL False 注入及技巧总结 MySQL 注入攻击与防御 sql注入学习总结 SQL注入防御与绕过的几种姿势 MySQL偏门技巧 mysql ...

  9. freemark+dom4j实现自动化word导出

    导出word我们常用的是通过POI实现导出.POI最擅长的是EXCEL的操作.word操作起来样式控制还是太繁琐了.今天我们介绍下通过FREEMARK来实现word模板导出. 目录 开发准备 模板准备 ...

  10. PHP 连接数据库基础操作

    <?phpheader('Content-type:text/html;charset=utf-8');//1建立 或者 关闭mysql服务器   @符号用于屏蔽错误信息$link=@mysql ...