使用 img 标签的 Java 和 SVG答案

【问题标题】：Java & SVG using the img tag使用 img 标签的 Java 和 SVG
【发布时间】：2014-11-21 06:44:12
【问题描述】：

我正在创建一个图表引擎，并且我已经完成了 GET 请求返回 SVG 的所有设置。我正在使用 JFreeSVG（与 Batik 非常相似）。我可以使用 iframe 和对象 HTML 标记呈现 SVG。我想使用 img 标签来创建 svg 图像，但它给了我一个空白框。我在网上搜遍了，真的找不到任何东西，你是我最后的希望。

这是我的请求返回的示例：

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:jfreesvg="http://www.jfree.org/jfreesvg/svg" width="423" height="452" text-rendering="auto" shape-rendering="auto">
<rect x="0" y="0" width="423" height="452" style="fill: rgb(255,255,255); fill-opacity: 1.0" transform="matrix(1,0,0,1,0,0)" clip-path="url(#4989619974245clip-0)"/>
<g transform="matrix(1,0,0,1,0,0)">
    <text x="8" y="446.14" style="fill: rgb(0,0,0); fill-opacity: 1.0; font-family: Tahoma; font-size: 9px; " clip-path="url(#4989619974245clip-0)">November 19, 2014</text>
<g style="fill: url(#4989619974245gp0); fill-opacity: 1.0; stroke: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#4989619974245clip-1)">
<rect x="5" y="8" width="386.62" height="412.27" style="stroke-width: 1.0;stroke: rgb(204,204,204);stroke-opacity: 1.0;; fill: none" transform="matrix(1,0,0,1,0,0)" clip-path="url(#4989619974245clip-0)"/>
</svg>

【问题讨论】：

标签： java svg jfreechart batik

【解决方案1】：

最好的解决方案是使用 URI 将图像作为 Base64 传递。 Base64 是可取的，因为它与浏览器 (IE9) 兼容

        //g2.getSVGEleemnt returns a SVG in string eg. <svg> ... </svg>
        String imageString = g2.getSVGElement();
        //encode it in Base64 
        byte[] imageData = Base64.encodeBase64(imageString.getBytes());
        //indicate mime type && base64
        String header = "data:image/svg+xml;base64,";
        byte[] headerData = header.getBytes();

一旦你有了，你必须按顺序流式传输标题和图像数据。将您的数据或获取数据的调用放在 img 标签和 Viola 中！

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

【讨论】：