前回のコーディング会でSVGを扱った際に、(時間もないし)描きたい絵をいきなりやってみて表示されないと困るので、ひとまずSVGのいろんなパターンを個別に検証してみた結果です。
結論からいって、イラレ(CC)の線の設定で、線種:基本、筆圧:均等、線色:あり、塗色:なしのものが描画されないことがわかりました。
SVG的にはline
要素やpath
要素のstyle="fill:none;"
となっているものがだめなようです。
下記、一通りの検証内容です。
shapeで指定するサイズ(外枠)はイラレでいうと何なのか
svgdata = loadShape("test_graphic_outline.svg");
// draw
shape(svgdata, 0, 0, 500, 500);//width/heightと同じ大きさで描画
これはイラレのアートボードが外枠になっていました。
なので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");
されました。グループに対する透明度もちゃんと反映されていました。
線はどこまでちゃんと描画されるのか
svgdata = loadShape("test_graphic_line.svg");
パスとブラシのうちブラシしか表示されません。
svgdata = loadShape("test_graphic_lines.svg");
svgdata = loadShape("test_graphics_nofilled-lines.svg");
塗りをナシにすると、直線、閉じたベジェ曲線、開いたベジェ曲線、ブラシツールの線を含めたSVGを描画してみましたが、ブラシツールの線しか描画されません。
svgdata = loadShape("test_graphics_styled-lines.svg");
ブラシのように線種などをいろいろ指定すると、線種:基本、筆圧:なしのものが描画されないようです。
ブラシのタッチの表現が可能
ついでにびっくりしたのが、ブラシのタッチがちゃんと再現されていることです。
SVGファイルをみるとベクタで形状として書きだされていて線ではなく塗りで着色されているため、ブラシ関係は表示されている、ということのようです。
それをふまえて、イラレでイラストを書いて使う場合、線をアウトライン化するなど工夫が必要かもしれません。あんまりなさそうですが。
現場からは以上です。