在不更改字体的情况下将SVG转换为PNG

Posted 2021-04-09

我正在尝试制作一个简单的应用程序，该应用程序从用户处获取文本并编辑svg文件中的文本（从Illustrator生成）并将最终结果发送回用户。

我能够在javascript中更改SVG文件文本，但我遇到将其转换为png的问题。当我这样做时，它会变为不同的roboto字体。

这是我的svg

<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2248.1 769.99">
    <defs>
        <style>
            .cls-1{
                font-size:350px;
                font-family:Granger-Regular, Granger;
            }
        </style>
    </defs>
    <title>test</title>
    <text class="cls-1" x="50%" y ="50%" >
        <tspan  text-anchor="middle">Example</tspan>
        <tspan  text-anchor="middle" x="50%" y ="50%" dy="300">SVG</tspan>
    </text>
</svg>

这是我用来转换的代码，

var fs = require('fs')
  , gm = require('gm');

gm('./../src/images/test.svg')
    .write('./../src/images/test.png', function (err) {
        //console.log(err)
        if (!err) console.log('done');
    });

Svg看起来像这样，

但是，当我转换它看起来像这样，

那么我该如何解决呢？ :(

答案

那些日子我有类似的东西，其中svg包括阿拉伯语排版，这不仅是从右到左书写，而且还有很多连字。我开始使用imagemagick。为了使用正确的字体，需要在要进行转换的系统上安装字体，在我们的例子中，它是Web服务器，我们无法安装字体。但在当地环境中，我注意到imagemagick无法很好地处理文本方向和连字，因此我们需要找到另一种解决方案。最终的赢家是apache batik project，它是用java实现的。在这种情况下我们很幸运，因为shell_exec('java -jar …')可能来自php方面。如果您进入项目的示例/测试目录，您可以找到使用外部字体的图形，通过@fontface {}指令包含。当使用蜡染时，做得很好，请记住所有路径都需要相对于svg本身。