SVG support for the Async Clipboard API  |  Blog  |  Chrome for Developers

博客文章详细介绍了如何在使用异步剪贴板 API 时实现对 SVG 图像的支持。此功能允许 web 应用实现更自然的图像编辑软件交互，通过剪贴板复制和粘贴 SVG 图像，而非以文本形式或使用变通方法。

核心功能

• 异步剪贴板 API：此 API 使网页应用可以直接读写系统剪贴板的内容，支持剪切、复制和粘贴功能。
• 支持图片格式：除了文本、PNG 格式图片、经过清理和未经清理的 HTML，以及 Web 自定义格式之外，现也增加对复制和粘贴 SVG 图像的支持。

实现步骤

1. 检测 SVG 支持：使用 ClipboardItem.supports() 静态方法检测是否支持 SVG 图像（以及任何其他 MIME 类型）。
2. 复制 SVG 图像：通过 ClipboardItem 用对象填充要复制的 SVG 图像数据的 Blob，其键为 Blob 类型（即 'image/svg+xml'）。
3. 粘贴 SVG 图像：从剪贴板读取 ClipboardItem 并通过 getType() 方法获取所需类型（即 'image/svg+xml'）的 Blob，之后将其转换为 Blob URL 并分配给 <img> 的 src 属性。

安全性

• SVG 是一种功能强大的格式，允许嵌入脚本，这在从未知来源粘贴内容时可能是危险的。
• 浏览器在复制过程中生成一个格式良好的 SVG 文档，并将其写入剪贴板。在粘贴过程中，通过片段解析器产生一个严格处理的 SVG 片段，因此，在粘贴操作之前，onclick 事件处理器属性仍然存在，但粘贴时会被删除，以确保用户安全。

演示和实际应用

• 文章通过 Glitch 上的演示详细展示了如何复制和粘贴 SVG 图像。示例代码揭示了实现过程，并通过点击圆形之前和之后的对比展示了潜在危险的 onclick 事件处理器属性的自动删除。
• Boxy SVG 和 SVGcode 等生产软件已经开始利用此特性。

此功能由 Microsoft Edge 团队在 Chromium 中实现，表明了 web 开发正在不断进步，以提高用户与应用间交互的便利性和安全性。