Displaying SVG in HTML page using XSLT

Question

I have an SVG image as a part of the XML file which I want to display on my HTML page using XSLT conversion. I tried using the IMG tag but the image does not show up.

My XML file segment containing SVG:

<topimagebase64>url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABUAAAAJACAYAAABMocy1AAAAIGNIUk0AAHomAACAhAAA+gAAAIDo&#13;
AAB1MAAA6mAAADqYAAAXcJy6UTwAAAAEZ0FNQQAAsY58+1GTAAAAAXNSR0IArs4c6QAAAAZiS0dE&#13;
AP8A/wD/oL2nkwAAAAlwSFlzAAAOxAAADsQBlSsOGwAAIABJREFUeNrs3Q+oXeWdL/wVJ1AvDTS+&#13;
zb11mFz0XlOMXEsjWlSqNKLepBgxUqUpV6mSSAwq6quiQUUlFVscUVFRsaKlioq5VNHSSJQoOuhQ&#13;
................ 
')</topimagebase64>

(cannot post the entire text due to space restrictions)

My XSLT:

<img src= "//topimagebase64" width="30% " margin-top="20px" margin-left="10px"/>

Any help would be appreciated.

Regards, Saumya Govil

Answer 1

url('data:...) is not an ordinary SVG image, it's a Data URI , ie simply binary data. But if you don't want to use CSS but the img element, you need to strip the url() wrapper. The following XSLT 1.0 transform...

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <body>
                <img src="{ substring( normalize-space(//topimagebase64), 5, string-length(//topimagebase64)-5)}" />
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

...works on this XML:

<?xml version="1.0"?>
<root>
    <topimagebase64>url(data:image/gif;base64,R0lGODlhEAAQAMQAAORHHOVSKudfOulrSOp3WOyDZu6QdvCchPGolfO0o/XBs/fNwfjZ0frl3/zy7////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAkAABAALAAAAAAQABAAAAVVICSOZGlCQAosJ6mu7fiyZeKqNKToQGDsM8hBADgUXoGAiqhSvp5QAnQKGIgUhwFUYLCVDFCrKUE1lBavAViFIDlTImbKC5Gm2hB0SlBCBMQiB0UjIQA7)</topimagebase64>
</root>

Alternatively, use CSS:

<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <head>
                <style>
                    div {
                        background: <xsl:value-of select="//topimagebase64" />;
                        width: 500px;
                        height: 500px;
                    }
                </style>
            </head>
            <body>

                <div></div>

            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

Displaying SVG in HTML page using XSLT

Question

1 answers

solution1
1 ACCPTED 2014-06-17 09:50:58

Displaying SVG in HTML page using XSLT

Question

1 answers

solution1 1 ACCPTED 2014-06-17 09:50:58

solution1
1 ACCPTED 2014-06-17 09:50:58