如何从SVG文件提取文本？求JavaScript实现示例与方案

架构老林

2026-8-2

从SVG文件中提取文本的JavaScript实现方案

SVG是结构化矢量文档，无需依赖OCR工具，直接解析其XML结构就能提取文本内容，效率和准确率远高于位图OCR。

场景1：解析内联SVG或SVG字符串

使用浏览器原生DOMParser API解析SVG内容，遍历所有文本相关节点提取内容：

function extractTextFromSVGString(svgString) {
  const parser = new DOMParser();
  const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
  
  // 捕获所有文本节点：text、tspan、textPath
  const textNodes = svgDoc.querySelectorAll('text, tspan, textPath');
  let extractedText = '';
  
  textNodes.forEach(node => {
    // 可选：过滤隐藏元素（如display:none、visibility:hidden）
    const style = window.getComputedStyle(node);
    if (style.display !== 'none' && style.visibility !== 'hidden') {
      extractedText += node.textContent + '\n';
    }
  });
  
  return extractedText.trim();
}

// 示例调用（结合你提供的SVG片段）
const sampleSVG = `<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="595.2pt" height="841.92pt" viewBox="0 0 595.2 841.92"><g enable-background="new"><text x="50" y="50">示例标题</text><tspan x="50" y="70">副标题文本</tspan></g></svg>`;
console.log(extractTextFromSVGString(sampleSVG));

场景2：加载并解析外部SVG文件

通过fetch加载外部SVG文件后，复用上述解析逻辑：

async function extractTextFromExternalSVG(filePath) {
  try {
    const response = await fetch(filePath);
    const svgString = await response.text();
    return extractTextFromSVGString(svgString);
  } catch (error) {
    console.error('SVG加载失败:', error);
    return '';
  }
}

// 示例调用
// extractTextFromExternalSVG('./target.svg').then(text => console.log(text));