Question

我正在尝试使用svg原始数据创建svg图像，这是我从fabric js获得的。我使用下面的代码来使用svg原始数据生成svg，但它无法正常工作。

public function generate_svg($raw_svg='',$prefix='',$folder_name='card_image')
{
    $file_name = '';       
    if($raw_svg!='')
    {
        try{           
            $file_name = uniqid($prefix).".svg";
            $image = new \Imagick();
            $image->readImageBlob($raw_svg);
            $image->setImageFormat("svg");
            $image->writeImage($folder_name.$file_name);
        } catch (ImagickException $ex) {
            echo $ex->getMessage();
        }
    }
     return $file_name;
}

现在问题是背景图片有点像下面这样：

那我该怎么做才能解决这个问题？

它应该如下所示（忽略方形和圆形），问题是整个背景看起来像黑色而不是bg图像。：

所以问题是背景图片没有加载，所以我必须添加额外的库才能做到这一点或其他任何事情吗？

Imagick版本：6.7.7

    convert -list delegate | grep svg  

    cdr =>          "uniconvertor' '%i' '%o.svg'; /bin/mv '%o.svg' '%o"
    cgm =>          "uniconvertor' '%i' '%o.svg'; /bin/mv '%o.svg' '%o"
    dot =>          "dot' -Tsvg '%i' -o '%o"
    dxf =>          "uniconvertor' '%i' '%o.svg'; /bin/mv '%o.svg' '%o"
    fig =>          "uniconvertor' '%i' '%o.svg'; /bin/mv '%o.svg' '%o"
    svg =>          "rsvg-convert' -o '%o' '%i"

 convert -list format | grep SVG

 MSVG  rw+   ImageMagick's own SVG internal renderer
  SVG  rw+   Scalable Vector Graphics (XML 2.9.1)
 SVGZ  rw+   Compressed Scalable Vector Graphics (XML 2.9.1)

Answer 1

我认为你走错了路。 Image Magick基本上是一个面向像素的库。虽然渲染背景图像可能是一个配置问题，但您的图片显示您想要实现的字体“嵌入”没有发生。这就是真正的问题。

您想要实现的是表示SVG文件中的字体信息。有两种方法可以做到这一点，对于两者而言，IM中绝对没有支持：

将字体转换为SVG字体格式并将其嵌入文件中（生成大文件）
将所有字形转换为路径（文本不再可编辑）

根据您的描述，我认为您应该针对第二种变体。您基本上会用<text>元素交换字符串中的<path>元素，否则会在收到包含图像数据时写出SVG文件。

EasySVG for PHP是对这个问题的较旧看法。

FontForge是由字形到路径转换的问题产生的库，但只提供了SVG格式的字体。对于像ttf这样的典型桌面字体格式，您可能首先要查看Cairo等字体转换工具。

您可以通过{{3}}获得直接的svg数据转换工作，但这只是预感，我没有使用它。

最后，作为一种解决方法，您可以将整个任务委派给Inkscape。它可以在命令行上调用而无需启动GUI

inkscape in.svg --export-text-to-path --export-plain-svg=out.svg

Answer 2

我最后通过在原始svg中存储字体，然后使用fopen而不是使用imagick创建了svg文件。

所以我的svg如下所示：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="600" height="400" viewBox="0 0 600 400" xml:space="preserve">
<desc>Created with Fabric.js 2.0.0-beta7</desc>
<defs>
<style>
    //... base64 data of font
    @font-face {
        font-family: "Elsie";
        src: url("data:application/font-truetype;charset=utf-8;base64,...")
    }
</style>
</defs>

之后我使用下面创建了svg文件：

$file_name = uniqid($prefix).".svg";
$file_handle = fopen("$folder_name/".$file_name, 'w');
fwrite($file_handle, $raw_svg);
fclose($file_handle);

Answer 3

除了@ ccprog的精彩答案，我想提一下你可以使用phantomjs生成你想要的像素，只需用输入的html文件输入phantomjs并输出为png。

在imagick php

3 个答案: