在imagick php中使用svg原始数据生成SVG图像 [英] Generate SVG Image using svg raw data in imagick php

问题描述

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

I am trying to create svg image using svg raw data which i am getting from fabric js. I have used below code to generate the svg using svg raw data but its not working properly.

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;
}

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

Now the issue is background image is kind of Look like below:

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

So what should i do to fix that?

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

It should look like below (ignore the square and round), the issue is whole background looks like black instead of bg image.:

所以问题是背景图片没有加载，所以我必须添加额外的库这样做或其他什么事情？

So the issue is background image is not loading, so do i have to add additional library to do that or any thing else?

Imagick版本：6.7.7

Imagick Version: 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)

推荐答案

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

I have ended up by storing fonts in raw svg and after that created svg file using fopen instead of using imagick.

所以我的svg如下所示：

So my svg is look like below:

<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文件：

After that i have created svg file using below:

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

这篇关于在imagick php中使用svg原始数据生成SVG图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！