mieki256's diary



2020/05/26(火) [n年前の日記]

#1 [krita][synfig][svg] Kritaでsvgをエクスポート

svg についてググってたら、無料で利用できるペイントソフト Krita も、4.0以降は svg をエクスポートできると知り、試してみたり。環境は Windows10 x64 1909 + Krita 4.2.9 x64。

ベクターレイヤーを作成後、ベジェ曲線ツール等で何かしらを描いて、メニューの、レイヤー → インポート/エクスポート → ベクターレイヤーをsvgとして保存、を選べば svg でエクスポートできるらしい。

レイヤー単位でしかエクスポートできないらしいけど、本来はビットマップ編集ソフトなのに svg を作れてしまうのはスゴイなと。

Synfig Studio にインポートしてみた。 :

Krita からエクスポートした svg を、Synfig Studio 1.3.14 にインポートしてみたけれど、結構問題があるようで。
  • 位置情報が全て消滅する。全部のパスが、同じ位置に配置されてしまう。
  • 線(Outline ?)が全て消滅する。塗り(Fill)のパス情報しか残らない。
  • サイズは小さい状態になる。
位置と線が消滅するのは痛い…。

ちなみに、Krita からエクスポートした svg を Inkscape で開いてみたら、そちらでは見た目がちゃんと再現された。

つまり、Synfig Studio に渡すつもりの svg を Krita で作るのは難しい、ということになるのかな…。

#2 [synfig][enve2d][cg_tools] Synfig Studioでsvgインポートを実験中

Synfig Studio 1.3.14 でsvgインポートについて実験中。環境は Windows10 x64 1909。

svg を直接インポートするとサイズが小さくなるあたりが気になってたけど、Inkscape上でドキュメントのプロパティを開いた際に、拡大縮小という項目があることに気が付いた。

synfig_svg_import_ss01.png

Inkscape上では、キャンバスサイズを 1280x720 px にして作業してたけど…。拡大縮小の項目で、0.26458 という謎数値が入っていたり、Viewbox の幅が 338.66666 x 190.50001 になってるあたりが気になるわけで…。どうやら、Display units を px にした際に、この拡大縮小値が自動で入る模様。

試しに、拡大縮小値を 1.0 にしてみた。Viewbox の値が 1280x720 になり、キャンバス上の各図形が小さく表示される状態になった。

synfig_svg_import_ss02.png

この、Inkscape上で小さく表示されてしまった状態が、Synfig Studio で svg をインポートした際のサイズによく似ているなと思えてきたわけで。もしかして、このあたりが関係してる…?

試しに、拡大縮小値が1.0の状態で、キャンバス全体に図形が表示されるよう、キャンバス上の図形の側を拡大して配置してみた。その状態で保存した svg を Synfig Studio にインポートしてみたところ、Synfig Studio のキャンバス全体に表示されるサイズになった。

となると…。どうやら、Synfig Studio は、この拡大縮小だか Viewbox だかの値を無視して svg をインポートしてしまって、そのせいで図形サイズが小さくなってしまうのかもしれないなと。

また、Inkscape に同梱されてる sif出力スクリプトは、この拡大縮小だか Viewbox だかの値をちゃんと反映させた内容を出力していて、だから sif を Synfig Studio でインポートすると真っ当なサイズで表示されるのかもしれない。

それにしても、Synfig Studio はベクターデータを svg を使って読み込むことしかできないのに、その svg インポート処理が腐ってる(?)あたりが…。いやまあ、おそらく svg 関係の処理はとにかく面倒臭いのだろうけど…。

enve 5_18_20 でsvgをインポート。 :

ふと気になって enve 5_18_20 でも svg をインポートしてみたけれど。
  • Synfig Studio と同様に、小さいサイズでインポートされてしまう。
  • 四角や丸も表示される。

enve よ、お前もか。

enve も、Synfig Studio も、サイズが同じようになってしまうということは…。もしかして Inkscape がおかしいのか…?

Webブラウザで svg を開いてみた。 :

Synfig Studio や enve 上では小さく表示されてしまう svg を、以下のWebブラウザで開いてみた。
  • Microsoft Edge 83.0.478.37 x64
  • Google Chrome 81.0.4044.138 x64
  • Firefox 76.0.1
  • Waterfox 2020.05

どれも、本来のキャンバスサイズ ―― こちらで設定した 1280x720 px で表示された。

となると、やっぱり Synfig Studio や enve がおかしいのではないかなあ…。

何にせよ、Synfig Studio や enve で svg をインポートして、妙にサイズが小さくなる時は、読み込む svg の拡大縮小値が1.0ではない ―― キャンバスの width, height と、viewBox の値が一致してない、ということなのだろうなと。

#3 [svg] svgのviewBox値が違うとパスの座標値も違ってくるのかを確認

Inkscape上で viewBox の値が違うドキュメントを作ると、パスの座標値も違ってくるのかが気になったので試したり。

とりあえず、Inkscape 上でキャンバスサイズを 1280x720 px にして、1280x720 px の青い四角をパスで作ってみたり。それをプレーンsvgとして保存。

_scale026458_1280x720px.svg (拡大縮小値が 0.26458)
_scale1_1280x720px.svg (拡大縮小値が 1.0)


関係ありそうなところを抜き出すと…。

   viewBox="0 0 338.6624 190.4976"
   height="720"
   width="1280"
   viewBox="0 0 1280 720"
   height="720"
   width="1280"

  <g
     style="stroke-width:1.05832;stroke-miterlimit:4;stroke-dasharray:none"
     id="layer1">
    <path
       style="fill:#2196f3;stroke:#000000;stroke-width:1.05832;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none"
       d="M 0,0 H 338.6624 V 190.4976 H 0 Z"
       id="path835" />
  </g>
  <g
     style="stroke-width:4;stroke-miterlimit:4;stroke-dasharray:none"
     id="layer1">
    <path
       style="fill:#2196f3;stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:bevel;stroke-miterlimit:4;stroke-dasharray:none"
       d="M 0,0 H 1280 V 720 H 0 Z"
       id="path1416" />
  </g>

パスの座標値(この場合は幅や高さ)が違ってるな…。線の太さ(stroke-width)も違ってる。

仮に、width, height と viewBox の値を一致させるようなスクリプトの類を書こうとするなら、各パスの座標値や線の太さも変更するような処理をしないとダメ、ということなのだろうなと。面倒臭いな…。

以上、1 日分です。

過去ログ表示

Prev - 2020/05 - Next
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

カテゴリで表示

検索機能は Namazu for hns で提供されています。(詳細指定/ヘルプ


注意: 現在使用の日記自動生成システムは Version 2.19.6 です。
公開されている日記自動生成システムは Version 2.19.5 です。

Powered by hns-2.19.6, HyperNikkiSystem Project