アセットの書き出しが切れてしまいます

[虎さん]

添付動画のように作成した花のオブジェクトを右クリックし、選択範囲の書き出しをすると、2ページ目のように、花の黒の境界線が切れてしまいます。
対処法はございますか？

[虎さん]

見えづらいため、再度写真で失礼致します。
書き出し後の花の先端が切れて書き出されてしまいます。

もう少し余白を取って書き出すことはできないのでしょうか？

書き出し前書き出し後

[ajabon grinsmith]

アセットを書き出すと黒の線が領域内におさまらない、という意味合いでしょうか。

画像を判断した上ではおさまっているようにも見えますが…

先端（花弁）5こありますが、どれが切れていますか？

書き出し前にお花全体を選択したとき、幅と高さは整数ピクセルになっていますか？

整数に整えた場合、改善されますか？

[mayanori · Accepted solution]

こんにちは。

画像を見ると書き出しの形式は、svgですね。

svgは、xmlの形式で書かれたテキストデータです。

svgの描画範囲は、viewBoxの指定によります。

 オブジェクトに余白をもたせるには、viewBoxを広げる必要があります。

サイトのコーディングをされていて、viewBoxを理解されているのであれば。

エディターでviewBoxの座標を直接書き換えてしまうのが簡単です。

経験ないよという方、コーディングはしていても座標はよく解らないという方は。

オブジェクトに対して余白を持たせたアートボードにして、

選択範囲からアートボードで書き出します。

なんらかの事情で、アートボードを動かしたくないときは。

オブジェクトを囲んでちょうどいい大きさの四角形を描き、

四角形の線・塗を無しにします。

その空の四角形ごと選択範囲でアセットの書き出しをします。

この場合、svgのテキスト上には、空の四角形が書かれています。

あっても問題ありませんが、気になるときは。

 

エディターでsvgを開き、下の方にある <rect　　 /> の部分を消去します。

viewBoxはそのままなので余白は保たれます。

一番面倒がないのは、アートボードで描き出す方法だと思います。

[ajabon grinsmith]

mayanoriさん>

あーsvgだ…見落としてました…

viewBoxまわりのこと、先日ちょうどもがいていたので（横から勝手に）勉強になりました！

[mayanori]

viewBoxって把握しにくいですよね〜。

私も最初、解説読んだりして、結局どういうこと？！ってなりました。😅

[虎さん]

お世話になっております。
いつも教えていただきありがとうございます！

[虎さん]

確認遅くなってしまい申し訳ございません。

とてもわかりやすく教えていただきありがとうございます！
SVGだとやり方を工夫しないといけないんですね、とても助かりました！