使用 Base64 编码 URI 和 JAVA 在 SVG 中创建图像并在 HTML 中呈现它们答案

【问题标题】：Creating images in SVG and rendering them in HTML using Base64 encoding URI and JAVA使用 Base64 编码 URI 和 JAVA 在 SVG 中创建图像并在 HTML 中呈现它们
【发布时间】：2015-01-22 13:40:37
【问题描述】：

我正在尝试创建一个返回 SVG 的服务。要求是 SVG 必须在 img 标签中工作（脚本标签将是一个奖励）并且还要避免 JavaScript。

我认为在 BASE 64 中对 img 进行编码并将其用作 URI 是我最好的选择。

Java 小服务程序

        String imageString = g2.getSVGElement();  // creates svg html string e.g <svg> blah blah</svg>
        byte[] imageData = Base64.encodeBase64(imageString.getBytes());

        OutputStream out = response.getOutputStream();
        out.write(imageData);
        out.flush();
        out.close();

GET 请求的响应

data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5v= ...

HTML

<img src="http://localhost:8080/testapp/getSVG?optionone=1&optiontwo=2">

但是当我加载页面时，我得到空白的 img 框。我知道 base64 img 是正确的，因为当我这样做时。 . .

<img src="data:image/svg+xml;base64,PHN22...">

它工作正常。我怎样才能用上面的 HTML 标签来实现呢？

【问题讨论】：

为什么要将图像编码为base64？为什么不只使用二进制数据？
因为我没有看到这个网站：css-tricks.com/probably-dont-base64-svg - 现在我让它返回数据：image/svg+xml;utf8,%3Csvg+xmln - utf8 之后的所有内容都是 URL/HTML编码 - aaa 还是不行

标签： java html svg base64 uri

【解决方案1】：

为什么要从服务器返回数据 URL？只需返回 SVG 本身。不需要data:image/svg+xml;base64,。

out.write(imageString.getBytes());

您还应该确保返回正确的 MIME 类型。即：

response.addHeader("Content-Type", "image/svg+xml");

这让浏览器知道响应是一个 SVG 文件。

【讨论】：

我返回 Base64 是因为它是我用来制作图表的。如果我使用 .. . . "> 或 .. . 创建一个静态 HTML 页面>"> 或 - 它们都不起作用。但是当我做base64时，它工作正常。
base64 数据 URL 是嵌入在静态页面中的 URL 的合适选择。从 Web 服务返回生成的 SVG 时，您不应该这样做。
无论我是用 Base64 还是二进制发送，我得到的结果都是一样的：img 标签（带有 src='urlA'）显示一个断开的链接，但是当我得到 urlA 并得到响应时，把它在 img 标签的 src 属性中，图像会显示出来。由于某种原因，当我检查它时，它说无法加载图像。
我不明白你刚才说什么。什么是“urlA”？
无论我使用二进制还是Base64，我都遇到同样的问题；该 URL 在 img 标记内不起作用。如果我直接访问 URL（GET 或 PSOT），它会响应“data:image/svg+xml;charset=utf-8,%3Csvg%20xml ...”，如果我将提供的数据放入 img 标签，图像有效！ URL/urlA 的一个示例是我的原始帖子中 HTML 的 img 标记中的 src 属性