可直接保存网页内联SVG为矢量文件：先用开发者工具搜索

你想把网页里那些清晰放大不模糊的SVG图标、插画或UI组件直接保存为本地矢量文件，用于设计复用或开发替换，但右键另存为只能拿到PNG截图，源码里又混着大量内联SVG和JS动态注入代码，米侠浏览器需要配合开发者工具精准定位并导出原始XML结构。

识别页面中所有内联SVG元素

内联SVG不走网络请求，不会出现在资源嗅探列表里，必须从DOM树中手动揪出来。打开目标网页后，按 Ctrl+Shift+I 唤出开发者工具 → 切换到 Elements 标签页 → 在搜索框中输入

注意：部分网站用 或 嵌入外部SVG文件，这类不属于内联SVG，本方法无法提取，需换用“查看页面资源”路径。

复制单个SVG的完整XML代码

在 Elements 面板中，找到你想要提取的那个

打开记事本或 VS Code，粘贴内容，检查开头是否为

批量导出页面全部内联SVG为独立文件

当一页含10+个SVG图标时，逐个复制效率太低。此时需用控制台脚本一次性抓取所有有效SVG节点并生成可下载的文本块。

方法一：运行脚本提取全部SVG XML

在开发者工具 Console 面板中，粘贴并执行以下代码：

const svgs = document.querySelectorAll('svg'); const result = Array.from(svgs).map(svg => svg.outerHTML).join('\n\n'); console.log(result);

回车后，控制台将输出所有SVG的XML代码，每段之间用两个换行分隔。全选控制台输出 → 右键复制 → 粘贴进新建文本文件，保存为 【svgs-batch.txt】，后续可按分隔符拆分成单个文件。

方法二：自动打包成ZIP（需额外操作）

CDP浏览器大师

CDP浏览器大师：通过Chrome DevTools Protocol驱动已登录浏览器实现自动化任务，解决反爬封号、选择器失效、SPA路由难导航、固定sleep不准四大痛点。核心能力包括UA伪装、WebGL/Canvas指纹混淆、智能等待、动态选择器以及可视化调试。

下载

此方法不依赖插件，但需手动补全文件头。复制上一步结果后，在文本开头插入一行：，再保存为 .svg 文件即可被系统识别——但注意：单个文件只能含一个

提取外部引用的SVG文件

第一步：触发资源扫描

长按网页任意空白区域 → 弹出菜单中选择「查看页面资源」→ 等待5秒左右，资源列表自动加载完成。

第二步：筛选SVG类型资源

在资源列表顶部点击「筛选」→「类型」→ 勾选「document」和「media」→ 再在搜索框输入 【.svg】。优先找 Content-Type 显示为 image/svg+xml 的条目，忽略 mime-type 为 text/html 或 application/octet-stream 的假链接。

第三步：验证并下载

找到目标条目后，点击右侧「预览」→ 新标签页打开应显示清晰矢量图（非空白或报错）→ 若正常，长按该条目 → 选择「下载」。默认保存为 .svg 后缀，双击可用系统自带查看器打开。

注意：部分SVG地址带查询参数（如 ?v=2.1），下载时务必保留全部字符，删掉参数可能导致404或返回旧版本。