Adobe XDをもっと使いこなすヒント！ 第46回 SVGを書き出す
Adobe XDをもっと使いこなすヒント！
この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、SVGの書き出しに関連する3つのツイートを紹介します。
Tip 1. アセットをSVGとして書き出す
#AdobeXD #ProTip Export to SVG if you’re looking for small, quickly scalable icons and graphics for the web. @AdobeXD pic.twitter.com/HyfXZGKH0K
— Elaine Chao (@elainecchao) January 2, 2020
Web用にスケーラブルなグラフィックを書き出したいときには、形式に「SVG」を選択することができます。
スタイルのオプションはデフォルトでは「プレゼンテーション属性」に設定されています。これは他のツールとの互換性の高い形式です。「内部CSS」に変更すると、ファイルサイズを小さく抑えられます。
ファイルサイズを最適化するためのオプションも提供されています。
Tip 2. ビットマップをSVGに埋め込んで書き出す
#AdobeXD #ProTip You can also embed your bitmap directly into your SVG by selecting “embed” when you export. @AdobeXD pic.twitter.com/yLUmkXJfj9
— Elaine Chao (@elainecchao) January 6, 2020
アセットにビットマップ画像が含まれている場合、SVGにビットマップを埋め込んで書き出すことができます。その場合は、画像を保存のオプションに「埋め込み」を指定します。
Tip 3. ビットマップにリンクするSVGを書き出す
#AdobeXD #ProTip Exporting to SVG gives you two options – one of them is to link any embedded graphics, which will create a reference inside the SVG to the bitmap you’ve used. @AdobeXD pic.twitter.com/6LGYNH4Ahr
— Elaine Chao (@elainecchao) January 3, 2020
アセットに含まれるビットマップは、外部参照する形式で書き出すこともできます。その場合は、画像を保存のオプションに「リンク」を指定します。
いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？
次回をお楽しみに！