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

SVGは簡単に書き出せるけれど

PhotoshopCCの画像アセット機能を使って、レイヤー名の末尾を「.svg」としておけばSVG形式のファイルとして書き出しができるわけですが見落としがあったので備忘録。

ベクトルスマートオブジェクトじゃなくてシェイプレイヤーで書き出す

Illustratorからコピペしたパスのデータを、いつもはベクトルスマートオブジェクトとして貼付けして使っているのですがこのままではSVG書出しした時にパスになりません。
貼り付けのオプションで「シェイプレイヤー」にしておかないと、図形のSVGとして書きだされません。ベクトルスマートオブジェクトをSVGとして書き出すとアートボードは寸法があるがパスがないというファイルが書き出されます。

ss_pastedialog-20160226

「シェイプレイヤー」を選択

ベクトルスマートオブジェクトで貼っちゃってる場合

右クリックメニューを見てもシェイプには変換できないようなので、一旦ダブルクリックで編集してイラレから貼り付け直すのが良さそうです。

未検証項目

文字レイヤーはそのままSVGとして書きだした場合文字の情報を保持したままSVGになるようですがページヘ貼り付けるとどうなるのかは未検証です。

[webメモ]IE11がSVGのwidthとれない?問題

imgタグでSVG形式の画像を呼び出して、その要素にfloatをかけた時は、imgタグ内にきちんとwidthとheightを記述しないと横幅を理解できなくて表示が崩れる。IEきらい。

[Tips][Illustrator]シール用紙などの印刷に最適!効率的な面付け方法

宛名シールなどを作るような事務作業で同じ内容のシートを何枚も紙の上に複製して作る時に役立つTipsです。

シールひとつひとつコピーをして配置した場合に文字の修正が発生したら一個ずつ全部直さないといけませんが、それをやらないで良いデータの作り方です。

操作の流れ

1. まず複製したいオブジェクトを枠ごとグループ化
ss20150627-a

2.「効果」→「パスの変形」→「変形…」を選択します
ss20150627-b

3.複製したいオブジェクトの大きさ分、水平軸の値を入力、欲しい分だけ「コピー」の欄に数字を入力します。
ss20150627-c

4.アピアランスパネルから効果を複製
ss20150627-d

5.水平軸の値は0にして、垂直軸の値を設定して完了です。
ss20150627-e

こうしておくことで元のオブジェクトを修正すると全部一気に変更できるようになります。