将数据 URI 转换回 SVG答案

【问题标题】：Converting a data URI back to SVG将数据 URI 转换回 SVG
【发布时间】：2016-01-03 05:34:40
【问题描述】：

可能是一个愚蠢的问题，但是否可以将数据 URI 转换回 SVG？我已经用谷歌搜索并搜索了 SO 并没有找到关于这个主题的任何东西，当然反过来也有很多东西。

谢谢！

编辑：抱歉应该更具体 - 像这样的数据：图像：

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MCA4MCI+PHBhdGggZmlsbD0iIzFBMzc2MSIgZD0iTTE3Ljc4IDI1LjY1Yy44OS0uODkgMi4zNS0uODkgMy4yNSAwTDQwIDQ0LjU5bDE4Ljk3LTE4Ljk1Yy44OS0uODkgMi4zNS0uODkgMy4yNCAwbDIuNDMgMi40M2MuODkuODkuODkgMi4zNSAwIDMuMjVMNDEuNjIgNTQuMzVjLS45Ljg5LTIuMzUuODktMy4yNSAwTDE1LjM1IDMxLjMzYy0uODktLjg5LS44OS0yLjM1IDAtMy4yNWwyLjQzLTIuNDN6Ii8+PC9zdmc+

【问题讨论】：

在网页中为了修改它或手动修改它，即查看应用程序源并通过粘贴到转换程序中转换适当的位？

标签： svg data-uri

【解决方案1】：

在网络浏览器中查看数据 URI
使用检查元素
在新的浏览器窗口/选项卡中打开数据 URI
将图像另存为 .svg 文件

【讨论】：

喜欢这个，比另一个答案更快（也可以正常工作），谢谢！
美丽。绝对是一种更简单的方法。
注意：第 3 步意味着右键单击 URI 并选择“在新选项卡中打开”。由于编码问题，复制和粘贴到 URL 栏将不起作用。 Chrome 76 在这里。
不适用于 Firefox，但适用于 Chrome。
从几天前开始，Chrome 似乎停止支持这一点。现在保存文件时它只是挂起。

【解决方案2】：

我假设您的意思是 Base64 编码的数据 URI。

答案是肯定的。 URI 将类似于：

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0c...

Base64 部分是以PH 开头的部分。将该部分复制到在线转换器中，例如this one。

【讨论】：

我给了你一个，但是那个链接并没有像这样转换一个简单的形状 uri：jointjs.com/rappid/docs/format/svg
在旁注中，编码的 uri 在 IE 中看起来是不是格式不正确，所有那些“%”都在那里？ % 符号是否应该在 base64 uri 中？
什么 URI？我在那个链接上没有看到。
如果您单击该链接并向下滚动以查看“以 SVG 形式打开”按钮，它会打开一个新窗口，其中包含一个单独的，其中编码的 uri 带有一堆“%”那里..但它仍然在 IE 中打开？

【解决方案3】：

使用 javascript，您可以打开开发者工具并在控制台：

var dataURI = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MCA4MCI+PHBhdGggZmlsbD0iIzFBMzc2MSIgZD0iTTE3Ljc4IDI1LjY1Yy44OS0uODkgMi4zNS0uODkgMy4yNSAwTDQwIDQ0LjU5bDE4Ljk3LTE4Ljk1Yy44OS0uODkgMi4zNS0uODkgMy4yNCAwbDIuNDMgMi40M2MuODkuODkuODkgMi4zNSAwIDMuMjVMNDEuNjIgNTQuMzVjLS45Ljg5LTIuMzUuODktMy4yNSAwTDE1LjM1IDMxLjMzYy0uODktLjg5LS44OS0yLjM1IDAtMy4yNWwyLjQzLTIuNDN6Ii8+PC9zdmc+';

var svg = atob(dataURI.replace(/data:image\/svg\+xml;base64,/, ''));
console.log(svg);

atob() 方法对 base-64 编码的字符串进行解码。

【讨论】：

收到此错误：The string to be decoded is not correctly encoded
@HidaytRahman 你可能有不同的 MIme 类型的数据（你需要更新正则表达式）或者它不是 base64。
我正在为带有d 属性的 svg 单路径而苦苦挣扎，我想让它成为多路径，这样我就可以选择每个路径来执行删除或着色
@HidaytRahman SVG 是 base64 编码的字符串？如果不是，你应该问另一个问题，它可能与你认为相关的事情无关（检查X/Y Problem）。
这对我有用！这就是我要找的！ 10 倍老兄

【解决方案4】：

查看此网站SVG VIEWER。您可以将您的 .svg 文件或 SVG Text-Based 放到这个网站上。之后，您可以下载为 .svg、.jsx 和 .png 扩展名。

【讨论】：