如何解码 svg 数据 uri（不是 base64）答案

【问题标题】：how to decode svg data uri (not base64)如何解码 svg 数据 uri（不是 base64）
【发布时间】：2016-02-29 23:20:59
【问题描述】：

我有 svg 数据 uri：

"data:image/svg+xml;charset=utf8,%3Csvgxmlns='http://www.w3.org/2000/svg'width='18'height='36'viewBox='001836'%3E%3Cpathd='M15.70714.293l-2.82-2.82C13.58510.493149.296148c0-3.314-2.686-6-6-6S24.68628s2.686666c1.29602.492-.4153.473-1.113l2.822.82c.195.195.45.293.707.293.2570.512-.098.707-.293.39-.39.39-1.0230-1.414zM812c-2.2060-4-1.794-4-4s1.794-44-441.79444-1.7944-44z'fill='%23000'/%3E%3Cpathd='M15.70732.293l-2.82-2.82C13.58528.4931427.2961426c0-3.314-2.686-6-6-6s-62.686-662.686666c1.29602.492-.4153.473-1.113l2.822.82c.195.195.45.293.707.293.2570.512-.098.707-.293.39-.39.39-1.0230-1.414zM830c-2.2060-4-1.794-4-4s1.794-44-441.79444-1.7944-44z'fill='red'/%3E%3C/svg%3E"

请帮助我将其解码为 svg 文件。我使用“data_uri”gem 解码 base64 数据 uri 没有问题，但如果我尝试使用优化的 url 编码，我有一个错误：

ArgumentError: 未知编码名称 - utf8

【问题讨论】：

标签： ruby svg utf-8 decoding data-uri

【解决方案1】：

我使用decodeURIComponent 获得了更新的解决方案。然后使用切片删除：

image/svg+xml;charset=utf-8

我是这样做的：

const svg = decodeURIComponent(dataUrl);
const blob = new Blob([svg]).slice(33);

【讨论】：

【解决方案2】：

这看起来只是 URL 编码的：

require 'uri'

uri = "data:image/svg+xml;charset=utf8,%3Csvgxmlns='http://www.w3.org/2000/svg'width='18'height='36'viewBox='001836'%3E%3Cpathd='M15.70714.293l-2.82-2.82C13.58510.493149.296148c0-3.314-2.686-6-6-6S24.68628s2.686666c1.29602.492-.4153.473-1.113l2.822.82c.195.195.45.293.707.293.2570.512-.098.707-.293.39-.39.39-1.0230-1.414zM812c-2.2060-4-1.794-4-4s1.794-44-441.79444-1.7944-44z'fill='%23000'/%3E%3Cpathd='M15.70732.293l-2.82-2.82C13.58528.4931427.2961426c0-3.314-2.686-6-6-6s-62.686-662.686666c1.29602.492-.4153.473-1.113l2.822.82c.195.195.45.293.707.293.2570.512-.098.707-.293.39-.39.39-1.0230-1.414zM830c-2.2060-4-1.794-4-4s1.794-44-441.79444-1.7944-44z'fill='red'/%3E%3C/svg%3E"

data = URI.decode(uri.split(',', 2)[1])
puts data
# =>  <svgxmlns='http://www.w3.org/2000/svg'width='18'height='36'viewBox='001836'><pathd='M15.70714.293l-2.82-2.82C13.58510.493149.296148c0-3.314-2.686-6-6-6S24.68628s2.686666c1.29602.492-.4153.473-1.113l2.822.82c.195.195.45.293.707.293.2570.512-.098.707-.293.39-.39.39-1.0230-1.414zM812c-2.2060-4-1.794-4-4s1.794-44-441.79444-1.7944-44z'fill='#000'/><pathd='M15.70732.293l-2.82-2.82C13.58528.4931427.2961426c0-3.314-2.686-6-6-6s-62.686-662.686666c1.29602.492-.4153.473-1.113l2.822.82c.195.195.45.293.707.293.2570.512-.098.707-.293.39-.39.39-1.0230-1.414zM830c-2.2060-4-1.794-4-4s1.794-44-441.79444-1.7944-44z'fill='red'/></svg>

【讨论】：

非常感谢！这就是我要找的！ :)