可直接保存网页内联SVG为矢量文件：先用开发者工具搜索
你想把网页里那些清晰放大不模糊的SVG图标、插画或UI组件直接保存为本地矢量文件，用于设计复用或开发替换，但右键另存为只能拿到PNG截图，源码里又混着大量内联SVG和JS动态注入代码，米侠浏览器需要配合开发者工具精准定位并导出原始XML结构。
识别页面中所有内联SVG元素
内联SVG不走网络请求，不会出现在资源嗅探列表里，必须从DOM树中手动揪出来。打开目标网页后，按 Ctrl+Shift+I 唤出开发者工具 → 切换到 Elements 标签页 → 在搜索框中输入 <svg> 并回车。页面会高亮所有 <svg> 标签起始位置，滚动查看是否有多处匹配——若只找到1个，说明该页SVG极少；若出现十几条，说明图标密集，需逐个筛选。</svg></svg>
注意：部分网站用 <object></object> 或 <iframe></iframe> 嵌入外部SVG文件，这类不属于内联SVG，本方法无法提取，需换用“查看页面资源”路径。
复制单个SVG的完整XML代码
在 Elements 面板中，找到你想要提取的那个
打开记事本或 VS Code，粘贴内容，检查开头是否为 <svg xmlns="</code"> 或类似结构。若开头是 <code><div><svg>，说明你误选了父容器，需往上逐级点击直到只高亮 <svg> 标签本身再复制。
<h2>批量导出页面全部内联SVG为独立文件</h2>
<p>当一页含10+个SVG图标时，逐个复制效率太低。此时需用控制台脚本一次性抓取所有有效SVG节点并生成可下载的文本块。</p>
<p>方法一：运行脚本提取全部SVG XML</p>
<p>在开发者工具 Console 面板中，粘贴并执行以下代码：</p>
<p><code>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（需额外操作）
此方法不依赖插件，但需手动补全文件头。复制上一步结果后，在文本开头插入一行：<?xml version="1.0" encoding="UTF-8"?>，再保存为 .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或返回旧版本。
