最近はフォトショからアセット書き出しで
svgファイル書き出すことが増えましたがその際の注意点について。
余白を付けたいときはその分の四角いオブジェクトを置く
グループにマスク、ではだめ
PNGやJPEGならいけるけど、SVGは余白つかない。
これはPhotoshop内の仕様らしい
###余白用オブジェクトのぬり・線はなしで。
線に太さがあるとその分だけ領域が広がってしまうので注意
「ダミーデータなのでオブジェクトの領域を罫線で表現」とかしてると領域が太って
htmlに埋め込んだ時に、サイズがおかしい〜ってえらいことになる（カモ）
塗り：フィル, ストローク, マーカシンボル – SVG 1.1 （第２版）
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に書き出しする際の注意点｜株式会社ゼロワンアース
https://01earth.jp/web-create/photoshop/svg-shapelayer/
[2019.3.27 addここまで]
コメントを残す