在网页开发和设计学习的过程中，我们常常会遇到一些精美的 SVG 图片，想要将其下载保存以便学习借鉴。作为零基础的小伙伴，该如何操作呢？别担心，今天编程狮就来手把手教你。

一、SVG 是什么

SVG（Scalable Vector Graphics）是一种可缩放的矢量图形格式，具有文件体积小、清晰度高等优点，广泛应用于网页设计中。

二、下载网页中的 SVG 图片的方法

方法一：直接右键另存为

这是最简单直接的方法。如果网页中的 SVG 图片支持右键操作，你可以直接右键点击图片，选择 “另存为”，然后选择保存路径，保存类型选择 “.svg”，点击保存即可。

方法二：复制 SVG 代码

打开浏览器的开发者工具（通常按 F12 或右键点击页面并选择 “检查”）。

在开发者工具中，找到包含 SVG 的 HTML 元素。一般情况下，SVG 元素会被嵌入在 HTML 代码中，类似于其他 HTML 标签。

右键点击该 SVG 元素，选择 “复制”->“复制外部 HTML”。这将复制整个 SVG 代码，包括所有的子元素和属性。

将复制的代码粘贴到一个文本编辑器（如记事本等）中，将文件保存为 “.svg” 格式。

方法三：使用浏览器控制台提取 SVG

打开浏览器开发者工具（按 F12），切换到 “控制台（Console）”。

输入以下代码并执行：

var svg = document.querySelector('svg');

var svgData = new XMLSerializer().serializeToString(svg);

var blob = new Blob([svgData], { type: "image/svg+xml" });

var url = URL.createObjectURL(blob);

var link = document.createElement('a');

link.download = 'image.svg';

link.href = url;

link.click();

浏览器会自动下载 SVG 文件。

方法四：保存为 PNG/JPEG 格式

浏览器截图 ：部分浏览器支持右键点击 SVG 元素，选择 “截图”，然后选择截图范围后保存为 PNG/JPEG。

系统工具截图 ：可以使用 Windows 的 “Snipping Tool” 或 macOS 的 “Shift + Cmd + 4” 等系统自带的截图工具进行截图。

方法五：使用在线工具或编程脚本

在线工具 ：有一些在线工具可以帮助你从网页中提取 SVG 图片，如在线 SVG 提取工具等，你只需要输入网页网址，然后按照工具的提示操作即可。

Python 脚本 ：如果你对编程感兴趣，可以学习使用 Python 的 requests 和 BeautifulSoup 库来编写脚本，自动提取网页中的 SVG 图片。

推荐课程：

Python3 入门课程

Python 静态爬虫入门课程

Python爬虫技术入门指南

三、注意事项

确保保存的 SVG 文件包含 和 等命名空间和声明，以免出现兼容性问题。

若 SVG 由 JavaScript 动态生成，需在页面加载完成后操作，否则可能无法获取完整内容。

有些网页中的 SVG 可能会包含内联样式或外部 CSS，保存后样式可能会丢失，需手动修复。

以上就是在编程狮学习平台上零基础小白学习如何下载网页中的 SVG 图片的详细内容，大家可以根据自己的实际情况选择合适的方法进行操作。