「SVG形式で保存してください」と言われた見習いwebデザイナーの話【SVGとは】
「すみません、この画像…SVG形式でもらえますか？」
本業ので見習いwebデザイナーをしております、マコトです。
先日上司が持ってきてくれた案件で、先方からからこの様に言われてフリーズしました。
SVG…あれか…形式指定で書き出しするときにみたことあるぞ
といっても、SVGという形式で保存できると言う事以外何もわかりません。
本日は備忘録も兼ねて、SVG形式で納品するべく奮闘した出来事を書いてみます。
フォトショ もイラレも我流でやってきたので、間違いもあるかと思います…！
お気づきの方はぜひ教えてくださいませ。よろしくお願いします。
１、SVG形式とはなにか
今回は某システムの解説用に使うイラストを作成するお仕事でした。
（肩書きはwebデザイナーですが、弊社はやりたいことをなんでもやらせてもらえます）
ペンタブデビュー期からフォトショ 勢の私は依頼画像６枚を全てフォトショのブラシツールで手描き作成。
納品が済んだと一安心したところに「SVG形式でいただけますか？」と依頼されたのです。
とりあえず作成した画像をそのままSVGに書き出せば大丈夫かな
ささっと済ませ送ったところ、
？？？だったので、ちょっと調べてみることに。
SVGとはScalable Vector Graphics（スケーラブル・ベクター・グラフィックス)の略で、一種の画像フォーマットになります。
JPEGやPNGと言ったようなwebでよく見かけられる画像との違いは、PEGやPNGがビットマップデータなのに対し、SSVGはXMLをベースにした二次元ベクターデータであることです。 引用元：
なるほど… ん？ベクターデータだと？？
ここで感じた悪い予感は現実に。さらに先方から連絡が。
レンダリングされた結果を単にSVGにしただけのようです。
できればベクターのままのSVGがいただきたいのですが
私は事態が最悪であることを理解しました。おそらく、今まで自己流でやってきた見解からするとこういうことです。
PhotoshopでSVG形式にするには、各パーツがシェイプレイヤ（レンダリングしていない）である必要があり、なおかつシェイプレイヤにするには、各オブジェクトをパスで描画しておく（ベクターデータである）必要があります。
ですが今回、６枚の「画像」を作成してほしいという話だったため、先ほども書いたように全てフォトショのブラシツールで手描きしていました。
つまり、各パーツにはパスが存在していません。
幸い、データはまだpsdでレイヤー別に分けてあります。
これにパスを与え→シェイプ化→SVGに変換の流れができないか試みたのですが、手書きしたものにパスを後から与えると、パスがガビガビになってしまい、パス化が困難なようです。
最初に送ったのは「四角い一枚の画像のSVG」
先方が欲しいのは「各パーツがしっかり独立して保存されたSVG」だと理解
…ではどうすれば？答えは１つです。
全部のイラストを再度パスを使って描き直す必要がある。
システム関連の案件だったため、今後（主に相手がエンジニアだった場合）はSVGで納品できるようにベクターデータで画像を作成しておくべきでしょう。１つ大きなことを学べました。
やるしかないのですが
「先に言え！！！！！」
とも思いました。ちょっと泣きそうでした。
２、SNG形式で保存してみよう
気を取り直して、兎にも角にも正しいSVG形式で納品せねばなりません。
専門時代の影響があってか「パスといえばイラレ」という印象があったので、まずは６枚の画像を全てイラレでパスツールを使って描き直しました。（長かった…）
ファイル→書き出し→書き出し形式を選択し、SVGを指定します。
これでOK！かと思いきや、作成されたSVGをテキストエディタでみると…
…何が何やらといった感じですが、エンジニア曰く、「構造化されていない」「xml形式になっていない」とのこと。
詳しいことはさっぱりですが、
ベクターデータという「数値データをもとにして演算された画像」なのでCSSやJavaScriptのアニメーションととても相性が良く、動きやぼかしなどのエフェクトを加える事も可能で、web上のアニメーション表現に幅広い選択肢をあたえてくれます。 引用：
SVGはCSSとしてエンジニアがいじることができることが利点なため、その点しっかりとした構造ができていないとダメみたいです。
さっきの画像だと文字が無秩序に羅列していて、とてもいじれそうに無いことは私にもわかりました。
３、構造化されたSVGデータを作る
原因はなんだったんだろうか…？
パーツはレイヤーごとに分かれているので、保存前に「アートボードごとに作成」にチェックを入れていなかったことが原因のようです。
これを行ったあとにテキストエディタでデータを見ると…
うんうん…！さっきと違って、何やらしっかりとした情報たちでデータが組まれてる感！！（ど素人）
さらにレイヤー名を全てアルファベット表記に直すのも忘れずに。こんな感じです。
紆余曲折ありましたが無事６枚全て納品完了！！！
長かったな！！！！
４、畑が違うもの同士、コミュニケーションのズレ
今回は結局何が原因だったかと言うと、
- 私と先方の認識、コミュニケーションにズレがあったこと
- 双方の思い込み
- そもそもコミュニケーション不足
私は普段coconaraでイラスト制作、納品させていただく際はJPEGもしくはPNG形式です。万が一データ修正があった場合、対応できるようにpsdデータもとってあります。
私の依頼を利用してくださるほとんどの方は、画像をそのまま動画作成に当て込まれるため、CSS編集はされません。私にとってのこれが普通でした。
一方エンジニアさんは、全てをCSS等のデータで管理、編集できることが普通（若干の偏見）。お互い自分にとっての普通が違ったため、いざ上がってきたものを見て「あれ？？」となったんですね。
まあ私が対エンジニアへの納品セオリーを知らなかったことも原因ですが…
「普通は」こうくるだろう、という思い込みは、どちらもよくなかったですね。私は先方に確認し、先方は私に伝えてから作業を始めるべきでした。
当たり前のことですが、一番大事なことを改めて痛感した出来事でした。
それでは、今回は以上になります。書き出すことで改めて勉強になりました。
都度恐縮ですが初心者なため、間違いなどありましたらご指摘、ご指導いただけますと嬉しいです。
>>関連記事はこちら
makoto0804-illustration.hatenablog.com
↓ 
Twitter開設しました！＞＞
