[Adobe XD] Illustrator使いさんに捧げるSVG書き出しのコツ

6 min readDec 4, 2016

こちらは、Adobe XD Advent Calendar 2016の4日目の記事です

Adobe Experience Design(以下 Adobe XD)で書き出したSVGをIllustratorに読み込んだとき、次のような体験をしたことはありませんか？

何もなかった！→Illustrator CC 2017で修正されています
表示されないモノがあるんだけど？

全てを解決する手段はないのですが、今回はなにが起こっているか・どういう対処ができるのかをまとめます。

最初に、Illustrator SVG読み込み問題について確認しましょう。

オブジェクトが書き出されてないとかそういうものでなく、リピートグリッドのエリアに合わせて作られるクリッピングマスクで隠されているだけなのですが、場合によっては気が付かないですよね？

ずっとIllustrator上でマスクを解除したりと対策をしてきたのですが、Adobe XDの11月リリースで割とわかりやすい対策が取れるようになったので紹介します。

Illustrator 向けの書き出しSVGを攻略

この3枚の色違いに見えるデータですが、右のものだけはSVGで書き出すとIllustratorで開いたときの表示がおかしくなります。中央と左のものは対策を取ったものです。

レイヤーパネルで並び順に注意する

リピートグリッドより上にくるレイヤーに、リピートグリッドの領域外に来る画像を置かない。

実はこれだけで効果があるのですが、こういうふうに並べられないケースもあるので別の方法も紹介します。

リピートグリッドを影響最小限でグループ化

最初からこれをやってしまえばいいとも言えるのですが編集中はあまりやりたくない方も多いのではないでしょうか。

もっとも、Adobe XDが全てをSVGとして書き出すかというとそうでもなくて、ぼかし(背景・オブジェクト)は書き出されません。シャドウはCSSで指定されています。Adobe XDが書き出したSVGの指定は次のものです。

filter: url(#shadow);

そのため、ブラウザでは表示されますが、Illustrator上では再現されません。こちらはシャドウの互換性の問題もあると思います。

まとめ

Illustratorに持ち込む予定のある場合には、3つのことに気をつけるとストレスなく活用できます！

XD上で最低限リピートグリッドをグループ化しておく
グループ内でのレイヤーの並び順に気をつける
Adobe XDがSVGに書き出せないものを理解して後工程でフォローする

Adobe XDを作ったものを他のデザインアプリに持っていって使う機能は、「ワイヤーフレーム・モックアップ・プロトタイピングが一つのアプリでできる」がウリのAdobe XDにはありません。とはいえ、現在実務で使うときにはまだPhotoshopやIllustratorでちょっと仕上げをしたいような事があるので、書いてみました。

各種アプリへの書き出しは一杯上がってますので、長い目で見てvoteしてみるのも良いと思います！UserVoiceで気になっているものをリストしたので興味があれば。

おまけ：Adobe Animate CC にAdobe XDで書き出したSVGを読み込む

Adobe Animate CC 2017(以降の最新版)をお使いください。

バグ報告したら意外と早く直ってびっくりしました…Adobe Animate CC 2015.2 までは SVGの読み込みには対応していますが、SVGのViewBoxが0,0起点でないものには対応しておらず、何も読み込みません。理由があって古いバージョンのAdobe Animate CCを使っている場合には、一度Adobe Illustratorなどで、ViewBoxが0,0起点のSVGになおしてから持ち込むと良いです。

おまけ2：2017年にはExtractに似た機能が来る予定

プロトタイピング後の作業、エンジニアにデザインデータを渡す機能も弱かったAdobe XDですが、CSSへのフォローが実装予定です。デザインスタイルガイドのほうが目立ってますが、プロトタイプ共有機能に追加される機能で、名前はSpec。チームでWebサイトやアプリケーションを使う倍には大切な機能で、楽しみです！

番外：Illusratorの方の事情を考えてみる

IllustratorはCC 2016までSVGのviewBoxを考慮していませんでした。ViewBoxの値で表示するものの位置をアートボードに合わせない特性があるようです。Adobe XDの書き出すSVGは、ドキュメントキャンバスの0,0を基準に書き出したオブジェクトをViewBoxで切り取ってみせるための記述になっているので仕様の差が、SVGを開いたときにオブジェクトがない！となる原因になっていました。もっとも、Cmd+A→中央揃えで使えるようになるので気にせずつかっていましたが。Illustrator CC 2017からはViewPortを配慮したSVG表示となっているので問題なく使えます。

SVGファイルを開いたときに、Illustratorのレイヤー構造と互換性を持たせるための配慮がありますが、SVGのマスクはそれでクリッピングマスクに変換されます。そして、マスク領域のオブジェクトより上にある同階層のオブジェクトはすべてマスクの対象になるという仕様です。

リピートグリッドが入ったアートボードやオブジェクトのSVG書き出しはまだまだ注意が必要ですね。