7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

ProcessingでSVGの線が特定の条件で描画されない件

Posted at

前回のコーディング会でSVGを扱った際に、(時間もないし)描きたい絵をいきなりやってみて表示されないと困るので、ひとまずSVGのいろんなパターンを個別に検証してみた結果です。

結論からいって、イラレ(CC)の線の設定で、線種:基本、筆圧:均等、線色:あり、塗色:なしのものが描画されないことがわかりました。
SVG的にはline要素やpath要素のstyle="fill:none;"となっているものがだめなようです。

9716e896fb6f0ca3731bf09e2bb841d1.png

下記、一通りの検証内容です。

shapeで指定するサイズ(外枠)はイラレでいうと何なのか

svgdata = loadShape("test_graphic_outline.svg");
// draw
shape(svgdata, 0, 0, 500, 500);//width/heightと同じ大きさで描画

7784b07da2536f4a8efaef077466403c.png

これはイラレのアートボードが外枠になっていました。
なので200px四方のアードボードであれば、600pxで描画すれば3倍となります。

アートボードをマイナス方向にはみ出すと描画されるのか

svgdata = loadShape("test_graphic_negative-position.svg");

されました。
shape(svgdata, 100, 100, 600, 600)というふうにプラス方向にずらして描画すると、ちゃんと描画されてました。

透明度やグループはちゃんと描画されるのか

svgdata = loadShape("test_graphic_alpha.svg");
svgdata = loadShape("test_graphic_group.svg");
svgdata = loadShape("test_graphic_group+alpha.svg");

fe4b053ee261aba82fbcc9b15b2f55cf.png

されました。グループに対する透明度もちゃんと反映されていました。

線はどこまでちゃんと描画されるのか

svgdata = loadShape("test_graphic_line.svg");

a8069f436192e5f2d04b417c5068d4fa.png

パスとブラシのうちブラシしか表示されません。

svgdata = loadShape("test_graphic_lines.svg");

試しに塗りを設定してみたら問題なくすべて表示されました。
07c86bca4e113bfa4d1ad1023b8a09bc.png

svgdata = loadShape("test_graphics_nofilled-lines.svg");

塗りをナシにすると、直線、閉じたベジェ曲線、開いたベジェ曲線、ブラシツールの線を含めたSVGを描画してみましたが、ブラシツールの線しか描画されません。

svgdata = loadShape("test_graphics_styled-lines.svg");

51647ba20d3e43aba051d0d37fb7446e.png

ブラシのように線種などをいろいろ指定すると、線種:基本、筆圧:なしのものが描画されないようです。

ブラシのタッチの表現が可能

ついでにびっくりしたのが、ブラシのタッチがちゃんと再現されていることです。
SVGファイルをみるとベクタで形状として書きだされていて線ではなく塗りで着色されているため、ブラシ関係は表示されている、ということのようです。

それをふまえて、イラレでイラストを書いて使う場合、線をアウトライン化するなど工夫が必要かもしれません。あんまりなさそうですが。

現場からは以上です。

宣伝

ワンパクでは検証すらも楽しくてしょうがない元気なフロントエンドな人を募集しています!!!

7
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
5

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?