Imagick是PHP中常用的图像处理扩展，支持将SVG矢量图转换为多种格式的位图，但在处理包含自定义字体的SVG时，经常会出现字体无法正确渲染的情况，比如自定义字体被替换为系统默认字体，或者文字位置偏移、样式丢失。这种问题通常和Imagick的SVG渲染引擎、字体配置机制有关，单纯调整SVG内的字体属性很难彻底解决。
Imagick处理SVG自定义字体失败的原因
Imagick默认使用ImageMagick的SVG渲染模块，该模块对自定义字体的支持存在局限性：
- ImageMagick的字体缓存不会自动识别项目中引入的自定义字体文件，需要手动配置字体映射文件，操作繁琐且容易出错。
- 部分版本的ImageMagick在解析SVG的
font-family属性时，无法正确匹配自定义字体的实际名称，导致字体加载失败。 - 如果SVG中引用的自定义字体是网络路径或者相对路径，ImageMagick可能无法正确读取字体文件，进而使用默认字体渲染。
Fabric.js的解决方案思路
Fabric.js是一款基于Canvas的强大的图形库，本身支持加载自定义字体，并且可以将Canvas内容导出为图片，因此可以替代Imagick完成SVG转图的需求，同时保证自定义字体正常渲染。核心流程分为三步：
- 提前加载自定义字体文件，确保Canvas渲染时可以识别该字体。
- 将SVG内容解析为Fabric.js的对象，添加到Canvas画布中。
- 将Canvas导出为图片，得到字体渲染正常的位图结果。
具体实现步骤与代码示例
1. 准备自定义字体与SVG内容
首先准备自定义字体文件，比如my-custom-font.ttf，以及需要处理的SVG字符串，SVG中需要声明对应的font-family。
2. 加载自定义字体
使用CSS的@font-face规则加载自定义字体，确保页面渲染时可以识别该字体：
<style>
@font-face {
font-family: 'MyCustomFont';
src: url('./my-custom-font.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</style>
3. 使用Fabric.js解析SVG并导出图片
引入Fabric.js库后，编写处理逻辑，先加载字体再处理SVG：
// 自定义字体加载函数
function loadCustomFont(fontName, fontUrl) {
return new Promise((resolve, reject) => {
const font = new FontFace(fontName, `url(${fontUrl})`);
font.load().then(() => {
document.fonts.add(font);
resolve();
}).catch(err => {
reject(err);
});
});
}
// SVG转图片主函数
async function svgToImageWithFabric(svgString, outputFormat = 'png') {
try {
// 先加载自定义字体，字体名称需要和SVG中font-family的值一致
await loadCustomFont('MyCustomFont', './my-custom-font.ttf');
// 创建隐藏的Canvas元素
const canvas = document.createElement('canvas');
const fabricCanvas = new fabric.Canvas(canvas, { width: 800, height: 600 });
// 将SVG字符串加载到Fabric画布
return new Promise((resolve) => {
fabric.loadSVGFromString(svgString, (objects, options) => {
const svgGroup = fabric.util.groupSVGElements(objects, options);
fabricCanvas.add(svgGroup);
fabricCanvas.renderAll();
// 导出Canvas为图片URL
const imageUrl = fabricCanvas.toDataURL({
format: outputFormat,
quality: 1
});
resolve(imageUrl);
});
});
} catch (err) {
console.error('处理失败:', err);
return null;
}
}
// 示例SVG内容，使用自定义字体
const sampleSvg = `
<svg width="800" height="600" xmlns="http://www.w3.org/2000/svg">
<text x="100" y="200" font-family="MyCustomFont" font-size="48" fill="#333">
自定义字体测试内容
</text>
</svg>
`;
// 调用函数获取结果
svgToImageWithFabric(sampleSvg).then(url => {
if (url) {
const img = document.createElement('img');
img.src = url;
document.body.appendChild(img);
}
});
4. 后端场景的补充处理
如果需要在Node.js后端环境使用Fabric.js处理，可以配合canvas库和fabric的Node版本实现，核心逻辑和前端一致，只需要调整字体加载的方式，使用Node的字体加载模块读取本地字体文件即可。
注意事项
- 自定义字体的
font-family名称需要和SVG中声明的一致，否则仍然会渲染失败。 - 如果SVG中包含多个自定义字体，需要提前加载所有用到的字体，避免部分文字渲染异常。
- Fabric.js导出的图片清晰度可以通过调整Canvas的缩放比例来优化，比如设置
fabricCanvas.setZoom(2)后再导出，可以得到更高清的图片。
相比Imagick的复杂配置，Fabric.js的方案更灵活，不仅支持自定义字体，还可以对SVG内容进行二次编辑、调整样式，适合需要动态处理SVG转图的场景。