Javascript 将已编辑的SVG文件另存为新文件或保存到DB

我不需要经常问问题，但这次谷歌让我失望了

因此，我有一个使用Javascript编辑外部SVG文件的站点，如下所示：

<embed id="svgFile" src="svgFile.svg" type="image/svg+xml" />

现在一切正常，页面上的“image”/SVG更新，但现在我需要保存更新后的图像。
新的我不知道我们需要什么样的文件格式，但将信息保存到php/MySQL数据库和PDF是最低要求。PDF供用户保存和打印。。。无论他们想做什么，数据库都是用于在线保存的

我也有JQuery链接到该网站，但我发现Javascript更自然地编码，我需要某种解决方案/示例/插件。有人能帮忙吗

另存为SVG 用于获取SVG的源XML表示形式，并将其发布回服务器（如果愿意，可以使用AJAX）

另存为PNG 使用

XMLSerializer

为SVG创建一个源代码，并将其用作

元素的源代码。将此图像绘制到HTML5画布，然后使用将内容转换为base64编码的PNG数据URI，然后将其发布到服务器并另存为文件

警告：当前版本的Chrome和半最新版本的Firefox（但不是最新版本）目前在安全性上“下注”，并在绘制任何SVG时污染画布，阻止您获取数据URI

注：以上两个答案都要求IE9+；但是，SVG也是如此。

另存为SVG 用于获取SVG的源XML表示形式，并将其发布回服务器（如果愿意，可以使用AJAX）

另存为PNG 使用

XMLSerializer

为SVG创建一个源代码，并将其用作

元素的源代码。将此图像绘制到HTML5画布，然后使用将内容转换为base64编码的PNG数据URI，然后将其发布到服务器并另存为文件

警告：当前版本的Chrome和半最新版本的Firefox（但不是最新版本）目前在安全性上“下注”，并在绘制任何SVG时污染画布，阻止您获取数据URI

---

注：以上两个答案都要求IE9+；但是，SVG也是如此。

我通过在php和mySQL数据库中使用以下代码段实现了这一点： 首先，请记住svg基本上存储在文本中，就像HTML也存储在文本中一样。svg标记，无论是不同的标记，其布局都非常类似于HTML标记

存储到数据库中。您必须在实际的mySQL Insertcall中使用以下代码段。我发现，如果先对变量执行此操作，然后将变量放入insert调用中，它将不起作用。函数必须在mySQL语句中。

mysql\u real\u escape\u字符串（$myValue）

正在检索值中的文本框。假设您的值已经从数据库中检索到，并且现在位于名为theValues的数组中。基本上，我删除任何反斜杠，但在此之前，我要确保它可以正确显示使用htmlentities。据我所知，由于svg中没有反斜杠，所以服务器会将引号替换为\“。如果在svg中遇到一些反斜杠，您只需在替换函数中稍微聪明一点即可。

$myValue=str\u replace（“\\”，“”），htmlentities（$theValues->myValue））；
echo$myValue；

回溯到页面的原因与上述相同，但htmlentities功能使其仅显示svg的文本，而不是处理svg和显示图片。这仅在将svg的文本存储在数据库中后显示svg时需要，但如果不是第一个数据，则不会影响显示不必要的函数调用。

---

str\u replace（“\\”，“”，$myValue）

我通过在php和mySQL数据库中使用以下代码段完成了这一点： 首先，请记住svg基本上是以文本的形式存储的，就像HTML一样。svg标签，不管是不同的标签，其布局都非常类似于HTML标签

存储到数据库中。您必须在实际的mySQL Insertcall中使用以下代码段。我发现，如果您先对变量执行此操作，然后将变量放入insert调用中，则无法工作。该函数必须位于mySQL语句中。

mysql\u real\u escape\u字符串（$myValue）

在值中检索到文本框。假设您的值已经从数据库中检索到，现在位于一个名为theValues的数组中。基本上，我正在删除任何反斜杠，但在此之前，我要确保它可以使用htmlentities正确显示。因为您在svg中没有反斜杠，所以我知道它会在服务器重新显示的位置修复它在引号中加上“\”。如果您确实在svg中遇到了一些反斜杠，您只需在替换函数中稍微聪明一点即可。

$myValue=str\u replace（“\\”，“”），htmlentities（$theValues->myValue））；
echo$myValue

返回到页面的原因与上述相同，但htmlentities函数使其仅显示svg的文本，而不是处理svg并显示图片。这仅在将的文本存储在数据库中后显示svg时需要，但如果不是第一个数据，这不会影响您的显示，只是一个不必要的函数调用。

str\u replace（“\\”，“，$myValue）
谢谢您的帮助！我听说过Base64编码的东西，但对它一无所知。我会尝试一下你的建议，但总有一天会成功的。如果有帮助的话，我会给你回电，并加上这样的分数：）。。。看起来我还需要在画布上做更多的阅读：（谢谢你的帮助，但看起来我的另一位同事找到了Raphael的序列化程序，所以我们正在使用它。谢谢你的帮助！我听说过Base64编码的东西，但对此一无所知。我会尝试你的一些建议，但会拖我一段时间。如果有帮助，我会回复你的
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="JavascriptFile.js"></script>

....HTML....

<input id="txt1" name="text_one" maxlength="16" type="text" class="text" placeholder="Line one" onkeyup="update(1)" />

function update(n) {var txtID = n;
var txt = document.getElementById("txt" + txtID).value;
var svgTXT = document.getElementById("svgFile").getSVGDocument().getElementById("txt" + txtID);
svgTXT.textContent = txt;
}