React中如何使用SVG标签展示Base64格式的SVG文件？

要把Base64格式的SVG转换成<svg>标签直接渲染，核心思路是解码Base64数据得到原始SVG字符串，再把它注入到React组件的<svg>节点中。下面是具体的实现步骤和代码示例：

1. 处理Base64数据，提取并解码SVG内容 #

你拿到的Base64结果是类似 data:image/svg+xml;base64,PHN2ZyB... 这样的Data URL，首先需要去掉前缀部分，只保留Base64编码的SVG内容，然后解码成原始的SVG字符串。

可以写一个工具函数来完成这个操作：

const decodeBase64SVG = (base64Data) => {
  // 移除Data URL的前缀
  const base64String = base64Data.replace(/^data:image\/svg\+xml;base64,/, '');
  // 解码Base64字符串
  const decodedString = atob(base64String);
  return decodedString;
};

2. 在React组件中渲染SVG标签 #

拿到解码后的SVG字符串后，我们可以用React的dangerouslySetInnerHTML属性把内容插入到<svg>标签中。注意这个属性的命名虽然带“dangerously”，但只要你的SVG来源是可信的（比如自己上传的文件），就不用担心安全问题。

函数组件示例： #

import { useState } from 'react';

const SVGViewer = () => {
  const [svgContent, setSvgContent] = useState('');

  // 处理文件上传的函数
  const handleFileUpload = (event) => {
    const file = event.target.files?.[0];
    if (!file || file.type !== 'image/svg+xml') return;

    const reader = new FileReader();
    reader.onloadend = (upload) => {
      const base64Data = upload.target.result;
      // 解码得到SVG原始字符串
      const decodedSVG = decodeBase64SVG(base64Data);
      setSvgContent(decodedSVG);
    };
    reader.readAsDataURL(file);
  };

  return (
    <div>
      <input type="file" accept=".svg" onChange={handleFileUpload} />
      {svgContent && (
        <div>
          <h3>用SVG标签展示的内容：</h3>
          <svg
            dangerouslySetInnerHTML={{ __html: svgContent }}
            // 可以在这里设置width、height等属性，覆盖SVG原有的尺寸
            width="200"
            height="200"
          />
        </div>
      )}
    </div>
  );
};

// 工具函数
const decodeBase64SVG = (base64Data) => {
  const base64String = base64Data.replace(/^data:image\/svg\+xml;base64,/, '');
  return atob(base64String);
};

export default SVGViewer;

3. 注意事项 #

• 安全提示：如果你的SVG来自不可信的第三方，使用dangerouslySetInnerHTML可能会引入XSS攻击风险，这种情况下建议先对SVG内容进行 sanitize（比如使用DOMPurify库过滤危险标签和属性）。
• 尺寸控制：你可以直接在<svg>标签上设置width、height或者viewBox属性，来调整SVG的显示尺寸，不需要修改原始SVG的内容。
• 兼容性：atob是浏览器原生API，在现代浏览器和React支持的环境中都能正常工作，不需要额外的polyfill。

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