[SOLVED] how to directly open a base64 svg in browser with hyperlink

how to directly open a base64 svg in browser with hyperlink

i got a base64 svg img and link in html, like:

<a href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0..." target="_blank">img</a>

but when i click the img link, a new window (looks like blank) flash and disappear very quickly and nothing more.

if add the 'download' attribute, like:

<a href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0..." target="_blank" download>img</a>

the svg img could be download successfully and open in browser.

if directly paste the data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0... into the browser url bar, the svg could be open directly as expected.

how should i use the <a> tag correctly to open the base64 svg directly in browser?

thanks very much.

Solution

use iframe or embed tag
you can us js to open it in new tab as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG Test</title>
</head>
<body>
    <a href="javascript:void(0);" onclick="openSVG()">img</a>

    <script>
    function openSVG() {
        // Your Base64 encoded SVG data
        const svgData = atob("PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAiIGhlaWdodD0iMTAwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+CiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgcj0iNDQiIHN0eWxlPSJmaWxsOnJlZDsiIC8+Cjwvc3ZnPg==");

        // Create a Blob from the SVG data
        const blob = new Blob([svgData], { type: 'image/svg+xml' });
        const url = URL.createObjectURL(blob);

        // Open the Blob URL in a new window
        window.open(url, '_blank'); // No 'noopener,noreferrer' here
    }
    </script>
</body>
</html>

when you click img