宮野 比伊呂
Adobe XDでコピーしたSVGを実装しやすく整理した話
SVGアイコンを実装するとき、デザインツールから書き出したデータをそのまま使っていませんか。
私も最初はそのまま使っていたのですが、あとからCSSで調整しようとしたときに「なんだか扱いづらい」と感じることがありました。
コードを見てみると、transformや<g>タグが多く、思っていたより構造が複雑になっていました。
この記事では、Adobe XDからコピーしたSVGを実装用に整理していく中で、最終的にIllustratorで一度整えてから使うようになった流れをまとめています。
目次
SVGを'symbol'として使う
まず整理したかったのが、SVGアイコンの管理方法です。
SVGは画像として個別に配置するだけでなく、部品として定義して使い回すことができます。
<svg style="display:none;">
<defs>
<symbol id="icon-arrow" viewBox="0 0 30 30">
<path d="..." />
</symbol>
</defs>
</svg>
表示するときは次のように呼び出します。
<svg class="icon">
<use xlink:href="#icon-arrow"></use>
</svg>
この方法にしてから、アイコン管理がかなり楽になりました。
Adobe XDからコピーしたSVGで気になったこと
XDではオブジェクトをコピーしてSVGコードを取得できますが、そのまま使うといくつか気になる点がありました。
サイズが微妙な数値になる
本来30pxのはずのアイコンが、次のようになることがあります。
width="30"
height="29.998"
見た目ではほぼ分かりませんが、実装していると「なぜこの数値？」と毎回気になってしまいます。
レイアウト調整や中央揃えの際にも、わずかなズレの原因になることがありました。
transformや<g>が多い
XDの座標情報がそのまま含まれるため、次のような構造になることがあります。
<g transform="translate(...)">
<path transform="translate(...)" />
</g>
表示には問題ありませんが、CSSで動きを付けたりサイズ調整をしたりするときに少し扱いづらく感じました。
SVGOMGだけでは解決しきれなかった
SVGOMG（SVGをブラウザ上で軽量化・最適化できるツール）で最適化を試すとコードは軽くなりますが、
- groupが完全に解除されない場合がある
- XD由来の属性が残ることがある
- 29.998のような数値は整理されない
といった点があり、根本的な解決にはなりませんでした。
そこで、座標自体を整理する必要があると感じました。
SVGOMG：https://jakearchibald.github.io/svgomg/
IllustratorでSVGを整える方法
最終的に落ち着いたのが、「Illustratorで一度開いて整える」という方法です。
特別な作業はほとんどなく、手順もシンプルでした。
① SVGをIllustratorで開く
XDから取得したSVGファイルをそのままIllustratorで開きます。
② アートボードをオブジェクトに合わせる
メニューから：
オブジェクト ＞ アートボード ＞ アートワークに合わせる
（またはアートボードツールでフィット）
これだけで余分な座標ズレが整理されることがあります。
③ 不要なグループを解除
オブジェクトを選択して：
オブジェクト ＞ グループ解除
を数回実行します。
XD由来の入れ子構造がここでかなり解消されます。
④ 位置をリセット
全体を選択（Ctrl/Cmd + A）したあと、整列パネルを開き「水平方向中央に整列」「垂直方向中央に整列」をクリックしてアートボードの中央へ配置します。
もし位置がずれている場合は、上部のプロパティバーに表示されるX座標・Y座標の数値を確認し、0またはできるだけ小さい値になるよう手動で調整します。
この作業を行うことで、オブジェクトの位置情報が整理され、不要なtransformが書き出されにくくなります。
⑤ SVGコードを取得
Illustrator上で整えたオブジェクトを選択し、SVGコードをコピーして取得します。
オブジェクトを選択 ＞ コピー
そのままコードエディタやHTMLへ貼り付けることでSVGコードとして使用できます。
この段階でコードを確認すると、
- transformが減っている
- <g>構造がシンプル
- サイズが整数値に近づく
状態になります。
Illustratorを挟むようになって感じたこと
最初は「ブラウザ上だけで完結させたい」と思っていましたが、実際にはIllustratorを一度通したほうが結果的に早く感じました。
特に、
- サイズ数値がきれいになる
- 座標が整理される
- SVG構造が読みやすくなる
この3点の効果が大きかったです。
実際のSVG整理フロー
現在は次の流れで作業しています。
- Adobe XDからSVGコピーまたは書き出し
- Illustratorで開く
- アートボード調整＋グループ解除
- SVGコード取得（または書き出し）
- symbolとして登録
- <use>で呼び出し
この手順にしてから、SVG周りで悩むことがかなり減りました。
まとめ
Adobe XDから取得したSVGはそのままでも表示できますが、実装目線では少し扱いづらいことがあります。
SVGOMGで軽量化する方法もありますが、座標やサイズの整理という意味ではIllustratorを一度通すのがいちばん安定していました。
SVGは画像データというより、調整可能なコードに近い存在です。
ほんの少し整える工程を入れるだけで、その後の実装がぐっと楽になると感じています。
MIYANO SATOMI Front-end Engineer / 宮野 聡美
Our Signature Products, Born from Insight.
提案から生まれた、
MARBLEの代表プロダクト
お客様の課題を起点に、MARBLEが自ら構想し、
仕組みからデザイン、開発、運用まで一貫してつくり上げたプロダクト群です。
業務改善、運営効率化、新たな顧客体験の創出など、
企業の事業成長に直結する“実装された解決策”を形にしています。
-
01 入退場システム
Entry System
全国15店舗、会員数50万人以上のこども向けパークで稼働する入退場・決済・顧客管理システム。
受付の効率化と回転率の向上を実現し、運営データの一元管理を可能にしています。 -
02 自動配送システム
Delivery Routing
50台のトラック、年間350日の配送を最適化する自動ルート生成システム。
紙のFAXで届く約500件の配送情報をデジタル化し、最適ルートを自動で算出することで、大幅な業務効率化を実現しました。 -
03 会話型コマース連携
Auto Routing
ライブチャットでの接客からEC購入までを一つの導線でつなぐ会話型コマースシステム。
リアルタイムの対話で顧客の購買意欲を高め、高いコンバージョン率につながる仕組みを構築しています。