前置き
Adobe XdでSVG素材を書き出す時、こんなこと思ったことありませんか
実は見た目に違いは全くないんですが、これらの素材を使って開発する際の取り扱い方が若干変わってくるんです。開発とデザインでうまいこと連携取れるようにこの辺の知識はあった方が（たぶん）良さそうなのでぜひ見てみてください。
本編
具体的に両者にどのようなところで差が出てくるのか見ていきましょう。
まずはこういう矢印素材をXdで作成します。
この素材をプレゼンテーション属性、内部CSSの形式でそれぞれ書き出したsvg画像をティストエディタで開いてみます。
まずはプレゼンテーション属性
<svg xmlns="http://www.w3.org/2000/svg" width="80.477" height="77.648" viewBox="0 0 80.477 77.648">
<g id="グループ_1" data-name="グループ 1" transform="translate(-1049.834 1170.25)">
<path id="パス_1" data-name="パス 1" d="M1052.662-1167.422l36,36-36,36" fill="none" stroke="#707070" stroke-width="8"/>
<path id="パス_2" data-name="パス 2" d="M1052.662-1167.422l36,36-36,36" transform="translate(35.996)" fill="none" stroke="#707070" stroke-width="8"/>
</g>
</svg>
続いて内部CSS
<svg xmlns="http://www.w3.org/2000/svg" width="80.477" height="77.648" viewBox="0 0 80.477 77.648">
<defs>
<style>
.cls-1 {
fill: none;
stroke: #707070;
stroke-width: 8px;
}
</style>
</defs>
<g id="グループ_1" data-name="グループ 1" transform="translate(-1049.834 1170.25)">
<path id="パス_1" data-name="パス 1" class="cls-1" d="M1052.662-1167.422l36,36-36,36"/>
<path id="パス_2" data-name="パス 2" class="cls-1" d="M1052.662-1167.422l36,36-36,36" transform="translate(35.996)"/>
</g>
</svg>「タグにスタイルを直接書いているか、クラスを用意してスタイルを書いているか」の違いがあることが分かりますね。
また、ファイルサイズはプレゼンテーション属性の方が(本当に少しだけ)小さくなるみたいですね。
まとめ
- 基本的に指定がなければ、内部CSSで書き出しておけばいいかなと私は思います
- ファイルサイズにそこまで差が出ない
- jsから見た目をいじるときに、どんなcssプロパティが当たっているか見つけやすい
参考
- https://helpx.adobe.com/jp/illustrator/using/svg.html
- https://www.baycross.jp/column/production/xd_img_export
おまけ
この辺の話って、素材の形が単純化するほど差があまり出なくなっていくんだなと途中で改めて気づきました。ただの四角形の素材を書き出して同じような比較をしてみました。↓
まずはプレゼンテーション属性
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<rect id="長方形_1" data-name="長方形 1" width="200" height="200" fill="#00bf50"/>
</svg>続いて内部CSS
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
<rect id="長方形_1" data-name="長方形 1" width="200" height="200" fill="#00bf50"/>
</svg>そしてファイルサイズの比較
まあそれはそうって話なんですが、改めて見ると面白いですね