SVG导出实战总结那些年踩过的坑和技术细节分享

先看效果，再看代码

最近在项目里遇到了一个需求，需要将一些图表导出成SVG格式。折腾了半天发现，其实这个功能还挺常见的，而且实现起来也并不复杂。今天就来聊聊我是怎么搞定的。

核心代码就这几行

首先，我们需要用到一个库叫 html2canvas 和 svg.js。这两个库可以帮助我们把HTML元素转换成SVG格式并导出。下面是一个简单的示例代码：

// 引入必要的库
import html2canvas from 'html2canvas';
import { SVG } from '@svgdotjs/svg.js';

// 获取要导出的DOM元素
const element = document.getElementById('myChart');

// 使用html2canvas将DOM元素转为canvas
html2canvas(element).then(canvas => {
  // 创建一个SVG画布
  const svg = SVG().addTo('#svgContainer').size(800, 600);

  // 将canvas内容转为SVG
  const img = svg.image(canvas.toDataURL(), 0, 0, 800, 600);

  // 导出SVG
  const svgData = svg.svg();
  const blob = new Blob([svgData], { type: 'image/svg+xml' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'chart.svg';
  a.click();
});

这个场景最好用

这个方法最适合那些需要动态生成图表并导出的场景。比如，你有一个柱状图、饼图或者其他复杂的图表，通过 D3.js 或 Chart.js 生成，然后用户点击“导出”按钮时，就可以直接导出成SVG格式。

举个例子，假设你有一个使用 Chart.js 生成的饼图：

<canvas id="myPieChart" width="400" height="400"></canvas>
<script>
  const ctx = document.getElementById('myPieChart').getContext('2d');
  const myPieChart = new Chart(ctx, {
    type: 'pie',
    data: {
      labels: ['Red', 'Blue', 'Yellow'],
      datasets: [{
        data: [12, 19, 3],
        backgroundColor: ['#FF6384', '#36A2EB', '#FFCE56']
      }]
    }
  });
</script>

然后，你可以在页面上添加一个导出按钮：

<button id="exportButton">导出SVG</button>
<div id="svgContainer" style="display: none;"></div>
<script>
  document.getElementById('exportButton').addEventListener('click', () => {
    const element = document.getElementById('myPieChart');
    html2canvas(element).then(canvas => {
      const svg = SVG().addTo('#svgContainer').size(800, 600);
      const img = svg.image(canvas.toDataURL(), 0, 0, 800, 600);
      const svgData = svg.svg();
      const blob = new Blob([svgData], { type: 'image/svg+xml' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = 'pieChart.svg';
      a.click();
    });
  });
</script>

踩坑提醒：这三点一定注意

在实际使用过程中，我踩过不少坑，这里总结了几个需要注意的地方：

• 字体问题：如果你的图表中有自定义字体，可能会在导出时出现问题。解决办法是确保字体文件已经加载，并且在CSS中正确设置。
• 透明度和颜色：有些情况下，颜色和透明度可能不会完全一致。建议在导出前先预览一下，确保颜色和透明度没问题。
• 性能问题：如果图表非常复杂，转换过程可能会比较慢。可以考虑优化图表的复杂度，或者在用户点击导出按钮时提示他们稍等片刻。

高级技巧：处理复杂图表

对于更复杂的图表，比如带有交互功能的图表，直接导出可能会有问题。这时候可以考虑使用 canvg 库来处理。它可以将SVG字符串渲染到canvas上，然后再导出。

下面是一个示例代码：

import canvg from 'canvg';

// 获取SVG字符串
const svgString = '<svg width="100" height="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red"/></svg>';

// 创建一个canvas元素
const canvas = document.createElement('canvas');
canvas.width = 100;
canvas.height = 100;

// 使用canvg将SVG渲染到canvas上
canvg.from(svgString, canvas).then(() => {
  // 导出SVG
  const svgData = canvas.toDataURL('image/svg+xml');
  const blob = new Blob([svgData], { type: 'image/svg+xml' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = 'complexChart.svg';
  a.click();
});

结尾

以上就是我关于SVG导出的一些实战经验分享。这个技术的拓展用法还有很多，比如导出PDF、处理大量数据等，后续会继续分享这类博客。希望对你有帮助，如果有什么更好的实现方式，欢迎评论区交流。