【Adobe XD】SVG書き出しの設定方法・Q&Aまとめ

Adobe XD

今回はAdobe XDのSVG書き出しについてまとめます。

  1. 「プレゼンテーション属性」と「内部CSS」の違い
  2. 「埋め込み」と「リンク」の違い
  3. ファイルサイズを最適化 (縮小) で変わること

SVGの書き出し方と仕組み

ファイル > 書き出し より 書き出す対象を選びます。ショートカットは「バッチを書き出し」と「選択した項目を書き出し」それぞれの場合で異なります。

macOSWindows
バッチを書き出し⇧⌘ECtrl + Shift + E
選択した項目を書き出し⌘ECtrl + E

この際SVG形式を選択すると、スタイルに「プレゼンテーション属性」「内部CSS」、画像の保存に「埋め込み」「リンク」をそれぞれ設定することができます。

アートワークをSVG形式で書き出すときの設定パネル

またXDでSVGを書き出すとき、吐き出されるソースコードのidは書き出し元のアートワークのレイヤー名やグループ名が使われます。

SVGで書き出されるとid="icon"となる

「プレゼンテーション属性」と「内部CSS」の違い

「プレゼンテーション属性」「内部CSS」は大きく次のような違いがあります。

プレゼンテーション属性CSSの情報がpathタグ内で完結している
内部CSSCSSの情報がpathのクラスに指定されている

では詳しく見ていきましょう。

プレゼンテーション属性

<svg xmlns="http://www.w3.org/2000/svg" width="xxx" height="xxx" viewBox="xxx xxx xxx xxx">
  <path id="icon" d="xxx(省略)" transform="translate(xxx xxx)" fill="#de5dca"></path>
</svg>

プレゼンテーション属性で書き出したSVGのソースコードを見てみましょう。

<svg>タグの中に定められているのは<path>のみで、アートワークの色などの情報はXML属性として fill="#de5dca" のように書き出されています。とてもシンプルな形です。

内部CSS

<svg xmlns="http://www.w3.org/2000/svg" width="xxx" height="xxx" viewBox="xxx xxx xxx xxx">
  <defs>
    <style>
      .cls-1 {
        fill: #de5dca;
      }
    </style>
  </defs>
  <path id="icon" class="cls-1" d="xxx(省略)" transform="translate(xxx xxx)"/>
</svg>

一方内部CSSでは<path>に専用のクラス cls-1 を振り、<style>タグを使ってCSSの形で fill: #de5dca; とパスの色を指定しています。

では実際に書き出す際にはプレゼンテーション属性と内部CSS、どちらがより最適なのでしょうか。

これは書き出したSVGの使い方にもよりますが、おおよそ次のように使い分けると後々のソースコードの編集を少なくすることができます。

プレゼンテーション属性
  • illustratorなどその他のデザインツールの素材として書き出すとき
  • ソースコードでSVGに直接クラスを振らず、SVGを内包するタグのクラスを適用する予定の時
  • useタグでSVGを登録して使う予定の時
内部CSS
  • SVGに直接クラスを振ってスタイルを指定する予定がある時
  • HTMLにstyle要素でCSSを記述する予定がある時

「埋め込み」と「リンク」の違い

「画像を保存」は書き出すアートワークの中にビットマップ画像が含まれていた時のみ有効になります。したがって、ベクターデータのみを書き出すときは特に気にしなくて大丈夫です。

埋め込みビットマップ画像が膨大な座標ベースのデータに変換されて埋め込まれる
リンクビットマップ画像をリンクとして指定する

埋め込み

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512" height="448" viewBox="0 0 512 448"><image width="512" height="448" xlink:href="data:image/png;base64,---(果てしなく長い文字列)"></image></svg>

埋め込みを選択すると、ビットマップ画像が SVGの形式に変換され、タグのなかに埋め込まれます。xlinkとして表記される png;base64 という文字が、画像をBase64でエンコードしている印です。

この時、通常ピクセルベースの画像に対して座標ベースで数字を定めていくので、その分ファイル量は膨大になります。

リンク

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="xxx" height="xxx" viewBox="xxx xxx xxx xxx"><image width="xxx" height="xxx" xlink:href="icon.png"></image></svg>

一方リンクした場合は、ビットマップ画像は<svg>タグとは別に<img>タグとして保存されます。HTMLで画像を配置するときと同じ形です。

もし画像入りのSVGを書き出すときは、特別な理由がない限りこちらを選んでおく方が間違いないでしょう。

ファイルサイズを最適化 (縮小) で変わること

最後にファイルを最適化(縮小)について。ここにチェックを打つと次のようなコードで書き出されます。

<svg xmlns="http://www.w3.org/2000/svg" width="xxx" height="xxx" viewBox="xxx xxx xxx xxx"><path d="xxx(省略)" transform="translate(xxx xxx)" fill="#de5dca"></path></svg>

ちなみに通常のファイルサイズで書き出したものが以下です。

<svg xmlns="http://www.w3.org/2000/svg" width="xxx" height="xxx" viewBox="xxx xxx xxx xxx">
  <path id="icon" d="xxx(省略)" transform="translate(xxx xxx)" fill="#de5dca"></path>
</svg>

見比べてみると、

  1. ファイルサイズを縮小したものは改行が消えている
  2. ファイルサイズを縮小したものは<path>のidが消えている

という点で違いがあることがわかります。

前述したように、XDでSVGを書き出すとき通常idは書き出し元のレイヤー名やグループ名が使われます。

そのため「ファイルサイズを最適化(縮小)」は事前に振っていたidが全て無視されることにもなるので、必ずしも「使いやすさの最適化」にはならない点に注意しましょう。