如何用<a>标签直接在浏览器中打开Base64编码的SVG？

问题现象 #

使用 <a href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0..." target="_blank">img</a> 时，点击链接新窗口闪一下就消失；添加download属性只能下载SVG，但希望直接在浏览器中打开，而直接将Base64链接粘贴到地址栏可正常显示。

解决方案 #

方法1：通过JavaScript解码Base64并写入新窗口 #

利用JS阻止默认跳转，解码Base64内容后直接写入新窗口文档，绕开浏览器对data URI的安全限制：

<a id="svg-open-link" href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0..." target="_blank">打开SVG</a>

<script>
document.getElementById('svg-open-link').addEventListener('click', function(e) {
  e.preventDefault();
  // 提取并解码Base64部分
  const base64Str = this.href.split(',')[1];
  const svgContent = atob(base64Str);
  
  // 创建新窗口并写入SVG内容
  const newWin = window.open();
  newWin.document.write(svgContent);
  newWin.document.close();
});
</script>

方法2：将Base64转换为Blob URL #

把Base64数据转为Blob对象，生成临时的Blob URL作为<a>的href，浏览器会将Blob URL视为正常资源链接，允许在新窗口打开：

<a id="svg-blob-link" href="#" target="_blank">打开SVG</a>

<script>
document.getElementById('svg-blob-link').addEventListener('click', function(e) {
  e.preventDefault();
  // 替换为你的Base64编码内容（去掉data:image/svg+xml;base64,前缀）
  const base64Data = 'PD94bWwgdmVyc2lvbj0...';
  
  // Base64转Blob
  const byteChars = atob(base64Data);
  const byteArray = new Uint8Array(byteChars.length);
  for (let i = 0; i < byteChars.length; i++) {
    byteArray[i] = byteChars.charCodeAt(i);
  }
  const svgBlob = new Blob([byteArray], { type: 'image/svg+xml' });
  
  // 创建Blob URL并设置为href
  const blobUrl = URL.createObjectURL(svgBlob);
  this.href = blobUrl;
  
  // 跳转后释放Blob URL，避免内存泄漏
  setTimeout(() => URL.revokeObjectURL(blobUrl), 1000);
});
</script>

原因说明 #

部分浏览器的安全策略会限制data:协议的链接在<a target="_blank">中打开，认为这类链接存在潜在风险，因此会自动关闭新窗口；而直接在地址栏输入data URI时，浏览器的处理逻辑更宽松，允许正常渲染SVG内容。

内容的提问来源于stack exchange，提问作者furynerd