SVGでパーツを書き出す時の注意点

最近はフォトショからアセット書き出しで
svgファイル書き出すことが増えましたがその際の注意点について。

余白を付けたいときはその分の四角いオブジェクトを置く

グループにマスク、ではだめ

PNGやJPEGならいけるけど、SVGは余白つかない。
これはPhotoshop内の仕様らしい

###余白用オブジェクトのぬり・線はなしで。
線に太さがあるとその分だけ領域が広がってしまうので注意
「ダミーデータなのでオブジェクトの領域を罫線で表現」とかしてると領域が太って
htmlに埋め込んだ時に、サイズがおかしい〜ってえらいことになる(カモ)

塗り:フィル, ストローク, マーカシンボル – SVG 1.1 (第2版)
http://www.hcn.zaq.ne.jp/___/SVG11-2nd/painting.html

パスデータ以外をふくませない

パスデータだから拡大しても綺麗→パスデータ以外をふくませない。

単純に画像を配置してsvg書き出しするとimgとしてデータエンコード?されたタグが入るのでNO!

以上、メモメモ。

[2019.3.27 add]
SVGの書き出しかた + IllustratorからPhotoshopにシェイプをコピー – 東京のホームページ制作 / WEB制作会社 BRISK
https://b-risk.jp/blog/2017/06/make-svg/

[Photoshop]画像アセット機能からSVGを書き出す時に忘れがちなこと | ヨネコウェブ

[Photoshop]画像アセット機能からSVGを書き出す時に忘れがちなこと

盲点だった!PhotoshopでSVGに書き出しする際の注意点|株式会社ゼロワンアース
https://01earth.jp/web-create/photoshop/svg-shapelayer/

[2019.3.27 addここまで]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください