Illustratorの図形をSVGシンボルとして取得する

シンボル化する図形

以下のようなTwitterアイコンについて、SVGシンボルのコードを取得します。
後々、CSSで装飾しやすくなるよう、線なし＆単色塗りの図形としています。

図形をシンボルとして登録する

「メニュー＞ウィンドウ＞シンボル」よりシンボルのダイアログを表示します。
表示させたらシンボルにしたい図形を選択し、以下のように登録します。

SVGコードを取得

「メニュー＞ファイル＞書き出し＞書き出し形式」を起動します。

ファイル形式を「SVG」、
「アートボードごとに作成」のチェックを外し、書き出しをクリックします。

SVGオプションが表示されます。
以下の設定値を入力し、コード表示を実行します。「レスポンシブ」にチェックが入っていないとCSSでサイズ変更の融通が効かなくなるので、必ずチェックします。

• スタイル：　　　　内部CSS
• フォント：　　　　アウトラインに変換
• 画像：　　　　　　埋め込む
• オブジェクトID：　レイヤー名
• 小数点以下の桁数：３
• 縮小：　　　　　　チェック
• レスポンシブ：　　チェック（重要）

SVGのテキストが表示されるので、<symbol>〜</symbol>をドラッグ＆コピーします。
このとき、以下のことを確認します。

• ・symbolのidはシンボル登録時の名前となっているか
• ・viewBoxの開始位置は0から始まっているか（viewBox = “0 0 * *” であるか）

コピー取得したSVGシンボルの例

<symbol id="iconTwitter" data-name="iconTwitter" viewBox="0 0 40 32.54"><path d="M40,3.761A10.523,10.523,0,0,1,35.212,4.92L35.2,4.889a6.752,6.752,0,0,0,3.435-4.2,14.83,14.83,0,0,1-4.981,1.883A8.2,8.2,0,0,0,19.645,9.808c-5.779.333-10.572-1.761-17.252-8.44,0,0-3.419,5.811,2.393,10.94a10.331,10.331,0,0,1-3.418-.684s-.342,5.812,6.5,7.863a5.989,5.989,0,0,1-3.419.342s.684,4.786,7.522,5.47A16.461,16.461,0,0,1,0,29.06s15.726,10.256,30.085-4.445C35.2,19.279,35.975,12.5,35.892,8.407c0-.067,0-.134,0-.2s0-.144,0-.217A15.441,15.441,0,0,0,40,3.761Z"/></symbol>

SVGシンボルのコード取得については以上となります。
取得したコードの活用については、コチラの記事をご覧になってください。