有时候看上某网页的某个图标，或者想把某个动态元素保存下来，找到代码里是 SVG 标签数据，这个时候要保存这个 SVG 对新手来说还有点无从下手。

刚好站长操作了一遍，总结几种保存 SVG 图像的方法以供参考。

方法 1：直接右键另存为（适用于独立 SVG 文件）

如果 SVG 是通过 <img> 标签引用的：

  1. 右键点击 SVG 图像。
  2. 选择 “图片另存为”（Save Image As）。
  3. 保存为 .svg 文件。

如果 SVG 是内联嵌入的（<svg> 标签），浏览器可能不支持直接保存，需用后面的方法。

方法 2：通过开发者工具提取代码

  1. 右键点击 SVG 元素，选择 “检查”（Inspect）。
  2. 在开发者工具中找到对应的 <svg> 元素。
  3. 右键点击元素，选择 “复制” → “复制外部 HTML”（Copy Outer HTML） 或手动选中代码复制。
  4. 新建文本文件并粘贴代码，添加以下声明（如果代码中没有）：
    1
    2
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  5. 保存为 .svg 文件（如 image.svg）。

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

  1. 打开开发者工具（按 F12），切换到 控制台（Console）。

  2. 输入以下代码并执行：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // 获取页面中的第一个 SVG 元素
    var svg = document.querySelector('svg');
    // 序列化 SVG 代码
    var svgData = new XMLSerializer().serializeToString(svg);
    // 创建 Blob 对象并生成下载链接
    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();

    以上代码粘贴时可能会提示不安全不让粘贴，照提示输入 允许粘贴 回车后再粘贴就可以了。

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

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

  1. 浏览器截图：
    • 右键点击 SVG 元素，选择 “截图”（部分浏览器支持）。
    • 选择截图范围后保存为 PNG/JPEG。
  2. 系统工具截图：
    • 使用工具如 Windows 的 Snipping Tool 或 macOS 的 Shift+Cmd+4。

注意事项

  1. XML 声明：
    1
    2
    <?xml version="1.0" encoding="UTF-8"?>
    <svg xmlns="http://www.w3.org/2000/svg">...</svg>

    确保保存的 SVG 文件包含以上命名空间和声明。

  2. 动态内容：若 SVG 由 JavaScript 动态生成，需在页面加载完成后操作。
  3. 外部依赖：内联样式或外部 CSS 可能导致保存后样式丢失，需手动修复。

完整代码验证

保存后的 SVG 文件可用浏览器打开，检查是否能正常渲染成你要的图像。