【Adobe XD】XDでSVGを書き出してCSS操作する【HTML/CSS】

背景

Webコーディング模写をしていて、ヘッダーのブランドロゴがsvgファイルでした。元ページ : name of love
一般的にsvgファイルを作成となるとPhotoshopかIllustratorをつかうようですが、今のところ気軽にさわれるのがXDだったので、XDでSVG書き出しできないかなー？と。

調べると、その後CSSからスタイルをいじれるようになるまで
けっこう時間がかかったのでまとめておきます。

手順

ロゴ作成
アウトライン化
SVG書き出し
SVGをエディタで開いて編集
HTML/CSSを記述

ロゴ作成

今回は文字のみの構成で作ってみました。テキスト挿入からすきなように作成、配置していきます。

アウトライン化

アウトライン化とは、Illustratorの機能の一つで｢文字データを線画に変換する｣機能です。文字を画像データとして扱えるようになります。
逆にこれをしないと、例えばCSSでwidthを変えたくても適用されず、フォント情報も入ってしまうのでPCによって表示が変わってしまう事なども考えられます。
そのため今回の目的にはこれが必須ですが、
XDに"アウトライン化"という機能はない、とのことです。
ただ、調べるとある機能をつかって"アウトライン化したような状態"にすることができるとのこと。
今回は、これを試してみました。

1. テキストレイヤ全体を覆う大きさの長方形を作成
2. 長方形の上にテキストレイヤを置く
長方形の上にテキストを置く 3. 長方形とテキストレイヤを選択
4. 右側メニューから"交差"を実行
右メニューから交差を選択
結果 : テキストレイヤをパス(図形)として得ることができました！
交差の結果

SVG書き出し

書き出しは対象レイヤを書き出し対象にしてから、右クリックすると書き出しメニューを出せます。
書き出しメニューを出すフォーマットに"SVG"を設定すると、以下のようになります。
SVG書き出しメニュー見ての通り、XDでのSVG書き出しには種類があるようです。
今回は、
スタイル : "プレゼンテーション属性"、
画像を保存 : "リンク"、
ファイルサイズを最適化(縮小)にチェックを入れて、
いざ"書き出し"！ .svgファイルが指定場所に書き出されます。　　詳細は以下の参考ページにて。
参考 :
Adobe XD から制作用素材を PNG、SVG、JPG および PDF ファイルとして書き出す方法を説明します。
Adobe XDで初めてのSVG書き出しやってみた。

SVGをエディタで開いて編集

エディタで開くと、以下のような感じです。
(筆者はVSCodeで開いてます)
SVGをエディタで開くうわぁお...
いつもの顔したSVGですね(ホッ)
しかし、CSSでいじるにはもう少し作業が必要です。
今回のようにCSSで色や大きさに変化をつけたい場合、
"width: XXpx"、"fill: XXX"などのSVGファイル側の該当スタイル指定部分を削除しておかないと、CSS側に記述をしても値が変更されません。

そこで、ここと
SVGファイル編集width ここ
SVGファイル編集fill は、削除して、保存。
これでCSSで操作する準備ができました！

HTML/CSSを記述

さて、実際に自作SVGファイルをCSSで操作していきましょう。
HTMLにSVGを記述する方法でやってみました。

HTML側の記述 :

...
<a href="./index.html" id="logo">
<!-- <svg xmlns= ...長い文字数字の列...></svg>
など、svgファイル中身をそのままコピペ-->
</a>
...

CSS側の記述 :

...
#header a#logo {
    ...
    width: 160px;
    ...
}
#header a#logo > svg {
    fill: currentColor;
    ...

結果

CSSスタイル適用後SVGロゴ XDで書き出した自作SVGを、CSSで操作できました！

ふーしゃのWeb制作ブログ

元SEアラサー女がWeb制作についての学習をシェアするブログです。