专栏名称: i小声读书

「电子书支援计划」是一个以电子书为核心的自我学习计划，以 Telagram 社群为主要载体，致力于促进中文互联网圈内的知识交流和资源共享，帮助诸位获得更好的阅读资源和阅读体验，同时鼓励社群内成员输出优质内容。

目录

相关文章推荐

重庆之声 · 刚刚丨西藏日喀则发生地震 · 9 小时前

西藏发布 · 西藏一机场最新消息！ · 20 小时前

西藏发布 · 西藏一机场最新消息！ · 20 小时前

西藏生态环境保护 · 学辐射环评知识 ... · 2 天前

西藏生态环境保护 · 学辐射环评知识 ... · 2 天前

西藏发布 · 西藏9部门出台新措施，关乎你我！ · 2 天前

西藏发布 · 02月22日《西藏新闻联播》：探寻手工艺品中 ... · 3 天前

51好读 › 专栏 › i小声读书

如何下载网页中的任意图片？连图标也能抠下来！

i小声读书 · 公众号 · · 2020-03-13 22:29

正文

我终于把这个问题搞懂了！所以写了这篇文章，算是自己的学习笔记，顺道分享给到大家。

事情是这样的：我在浏览网页时常常会遇到一些精致的图标，想把它保持到本地，用作日后的素材使用，可是在 Chrome 中右键的时候会发现这些图标没有【图片存储为…】的选项（见下图），这到底是为什么呢？

◎ 没有另存为图片的选项

打开浏览器自带的「开发者工具」审查元素后发现是嵌入式的 SVG 图标，以的形式存在着。

◎ 看到 SVG 代码

SVG 和这个 path 的意义是什么呢？

查了下 Google ，简单来说，SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）。其他图像格式都是基于像素处理的，SVG 则是属于对图像的形状描述（对应 path），所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。一般，我们可以通过 Inkscape 这款跨 Windows、macOS 、Linux 平台的应用来制作 SVG 格式的图片。

◎ 左面为 svg 格式矢量图，右面为 png 格式非矢量图

我们在网页中遇到想保存的 SVG 图片可以通过下面的办法实现。

在浏览器中通过快捷键 option + command + I 打开「开发者工具」，然后使用审查元素功能，在窗口内定位到相应图标的 svg 标签，右键呼出菜单，点选 Copy — Cut element 。

◎ 复制 SVG 代码信息

然后打开文本编辑器( Sublime Text)，把刚刚拷贝的一段代码粘贴在文本编辑器里，命名为 medium ，后缀为 .svg 的文件即可。

◎ 保存为后缀为 .svg 的文件

这时候将 medium.svg 文件拖放到 Sketch 中，我们就看到题图和封面那种那张黑色 medium 和红色灯笼鱼合影的照片了。

◎ 完成

以后遇到了无法直接下载的图片就这么来哦，赶快点个收藏和在看吧。👨🏻‍💻

补充一句，关于图片素材管理推荐 IconJar 和 Eagle 这两款软件，直接上图👇

◎ 神奇的二次元表情包，想不想要？🌚

喜欢的可以在在后台发送关键词【图片】获取软件的下载链接。

相关文章

说说 BT 下载和 Disney Plus 流媒体服务。

请到「今天看啥」查看全文

推荐文章

重庆之声 · 刚刚丨西藏日喀则发生地震

9 小时前

西藏发布 · 西藏一机场最新消息！

20 小时前

西藏发布 · 西藏一机场最新消息！

20 小时前

西藏生态环境保护 · 学辐射环评知识筑高原安全防线—2025年西藏自治区辐射类建设项目环评技术审查培训班开班

2 天前

西藏生态环境保护 · 学辐射环评知识筑高原安全防线—2025年西藏自治区辐射类建设项目环评技术审查培训班开班

2 天前

西藏发布 · 西藏9部门出台新措施，关乎你我！

2 天前

西藏发布 · 02月22日《西藏新闻联播》：探寻手工艺品中的浓浓年味儿

3 天前

艾邦高分子 · 2017塑料橡胶行业展会一览表（更新版）

8 年前

Ingress北京 · 祝懒军优秀特工 blackwong 十八岁又（以下内容受法律保护不予公开）个月生日快乐！

7 年前

G.P.A · 选择比努力重要？那是你不知道后半句

7 年前

YOKA男士 · 马云《功守道》变身打手，赤裸裸的演绎金钱就是力量！

7 年前

江南晚报 · 明明设了支付密码，但手机里的钱却“偷偷”变少！很多人已中招

7 年前

Sov5搜索 · 小百科 · 今天看啥 · 移动版

51好读 - 好文章就要读起来!