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

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

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

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

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

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

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

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

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

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

以上、メモメモ。

コメントを残す

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

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