imagick phpでsvg rawデータを使用してSVGイメージを生成

Question

私はファブリックjsから取得しているsvg rawデータを使用してsvgイメージを作成しようとしています。私は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フォント形式にフォントを変換し、ファイルにインラインで埋め込む（大きなファイルを作成する）
• すべての変換しますグリフからパスへ（テキストは編集できなくなりました）

私はあなたが2番目の変種を目指すべきだと思います。基本的には文字列内の<text>要素を<path>要素と交換し、それ以外の場合は埋め込み画像データを含むSVGファイルを書き出します。

How to convert text to SVG paths?は、この問題の古い見方です。

EasySVG for PHPは、グリフからパスへの変換についての質問から得られたライブラリですが、フォントはすでにSVG形式であることが条件です。 ttfのような典型的なデスクトップフォントフォーマットの場合、最初にFontForgeのようなフォント変換ツールを見なければならないかもしれません。

Cairoで直接データ変換を行うことができますが、それは唯一の愚かさであり、私はそれを扱っていません。

最後に、回避策として、タスク全体をInkscapeに委任することができます。それは、私はあなたがphantomjsを使用したい画素を生成することができます言及したいの@ ccprogの素晴らしい答え、 に加えて

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

Answer 2

としてGUIを起動せずに、ただでphantomjsを養うコマンドラインで呼び出すことができますあなたの入力htmlファイルとpngとして出力します。

Answer 3

未処理のsvgにフォントを格納してしまい、imagickを使用する代わりにfopenを使用して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> 

をiが以下の使用してSVGファイルを作成した後：

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