SVG画像の利用方法
こんにちは。アートトレーディングの野菜です。
今回は以前の記事でもご紹介したベクター画像の一つであるsvg画像の利用方法を2つご紹介していきたいと思います。
もちろん画像ファイルとして『img』タグで呼び出したりも可能なのですが、それ以外の読み込み方も知っておくと便利だと思います。
ベクター画像は拡大縮小に強く荒れないのでレスポンシブサイトでは是非活用していただきたいです！
svg画像の準備
ベクトルの画像は画像ソフトで作成していくことになるかと思います。
もちろんsvgのコードをゴリゴリ書く方向で作成しても問題ないのですが、丸とか四角程度の簡単なものでないと大変だと思うので、ベクター画像用の画像ソフトを利用してください。
ベクター画像で書き出すにあたっての注意事項としては、あまり複雑化させず、極力単純なパスの組み合わせにしておくという事です。
今回はAdobe Illustratorでの操作を例にさせていただきます。
この画像をsvg形式で保存していきます。
アートボードが画像の保存サイズになるようにします。
cssなどで変更する場合に計算しやすい数値で小数点もない方が良いでしょう。
グループ化やクリッピングマスクでの非表示などはコードが無駄に冗長になってしまうだけの場合が多いです。
可能であれば極力なくしてパスの形状を変更しておいてください。
基本的にはコードが短い方が軽くなります。
※グループ化に関してはcssやアニメーションなどで一括りとして変更をかけたいなど、残しておく方が良い場合もあります。
また変形させるようなアピアランスなどは分割しておいた方が良いですし、フォントもアウトライン化しておいた方が無難です。
保存の際に設定したり変更されたりもするのですが、思わぬ結果になることもあるので、確定した画像で保存に入るようにしてください。
※フォントは文字データとしてサイト上に反映させたいケースはフォントのまま埋め込んでも構いません。ただしcssの影響などで表示が微妙に変わる場合もあると思ってください。
線もアウトライン化しておいた方が良いと思います。
これはもしcssで編集する場合に、線も塗りも調整するよりは、すべて同じ塗情報に統一しておいた方が編集が簡単なためです。
また、Illustratorでは線をパスの内にするか外にするか選べますが、svgだと中央なのでこれも編集がややこしくなりやすいです。
また、ビットマップ画像を張り付けた状態であるとか、ビットマップの装飾（ドロップシャドウなど）も作成できますが、この部分だけ拡大縮小に弱くなるので、あまりお勧めではないです。
保存はメニュー『ファイル』→『書き出し』→『スクリーン用に書き出し』(これはAdobe CC 2017以降搭載のため、旧バージョンの場合は『別名で保存』を利用してsvgを選択してください)より行います。
書き出し先などを確認し『形式』を『SVG』にして『アートボードを書き出し』すれば良いです。
ただし、初回は保存設定を確認したうえで行ってください。
『フォーマット』の右端にある『歯車のアイコン』より設定が行えます。
どのように利用したいかによって変える場合もありますが、基本的にはこのような設定が良いかと思います。
『スタイル』は色などスタイル情報の記述方式で『プレゼーテーション属性』はcssをタグの属性して書くようにsvg用として書いていく、というようなイメージです。『インラインスタイル』だと完全にstyle属性で書くようになります。『内部 CSS』でcssをhead内に書くような別表記とすることもでき、こちらについては利用方法次第でケースバイケースになるかなと思います。
『フォント』と『画像』は前述した通りです。
アウトライン化したり別の手段に置き換えるなど入っていない状態での保存をお勧めします。
『オブジェクトID』はオブジェクトに割り振るIDをどうするかですが、『最小』にしておいて必要に応じて自分で変更する形が良いかなと思っています。
単純なパスの組み合わせの画像であればあまり意識しなくて大丈夫だと思います。
『小数点以下の桁数』はオブジェクトの座標などをどのくらい精密な情報で書き出すかの設定です。
桁数が大きいほど精密になりますが、ファイルサイズが大きくなりますのでやりすぎ注意。3辺りが適当かなと思います。
繊細な画像だと崩れが目立つ場合もありますので、保存して目視確認の上、必要にして加減してください。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 54 64">
<path d="M6.362,63l-.338,1H5.014l1.745-5h1.2L9.7,64H8.7L8.36,63Zm1-2.941-.7,2.055h1.4Z" fill="#191a1a"/>
<path d="M14.229,60.611a1.624,1.624,0,0,1-.288.966,1.465,1.465,0,0,1-.786.555L14.243,64H13.119L12.08,62.212h-.786V64h-.951V59h2.235a1.986,1.986,0,0,1,.7.115,1.407,1.407,0,0,1,.519.325,1.377,1.377,0,0,1,.321.508A1.87,1.87,0,0,1,14.229,60.611Zm-2.935-.728v1.456h1.277a.737.737,0,0,0,.519-.173.918.918,0,0,0,0-1.11.728.728,0,0,0-.519-.173Z" fill="#191a1a"/>
<path d="M17.163,59.883V64h-.952V59.883H14.87V59H18.5v.887Z" fill="#951e23"/>
<path d="M20.8,59.883V64h-.952V59.883H18.5V59h3.634v.887Z" fill="#191a1a"/>
<path d="M26.655,60.611a1.624,1.624,0,0,1-.288.966,1.465,1.465,0,0,1-.786.555L26.669,64H25.545l-1.039-1.788H23.72V64h-.951V59H25a1.986,1.986,0,0,1,.7.115,1.407,1.407,0,0,1,.519.325,1.377,1.377,0,0,1,.321.508A1.87,1.87,0,0,1,26.655,60.611Zm-2.935-.728v1.456H25a.737.737,0,0,0,.519-.173.918.918,0,0,0,0-1.11A.728.728,0,0,0,25,59.883Z" fill="#191a1a"/>
<path d="M28.649,63l-.339,1H27.3l1.745-5h1.2l1.745,5H30.981l-.339-1Zm.995-2.941-.7,2.055h1.4Z" fill="#191a1a"/>
<path d="M36.735,61.5a3.184,3.184,0,0,1-.159,1.038,2.229,2.229,0,0,1-.454.786,2.017,2.017,0,0,1-.714.5,2.371,2.371,0,0,1-.93.177H32.629V59h1.853a2.423,2.423,0,0,1,.937.173,1.909,1.909,0,0,1,.71.5,2.247,2.247,0,0,1,.451.79A3.191,3.191,0,0,1,36.735,61.5Zm-.952-.007a2.91,2.91,0,0,0-.054-.559,1.514,1.514,0,0,0-.2-.519,1.121,1.121,0,0,0-.4-.383,1.29,1.29,0,0,0-.656-.147h-.9v3.23h.9a1.15,1.15,0,0,0,1.078-.584A1.506,1.506,0,0,0,35.735,62a3.373,3.373,0,0,0,.048-.511Z" fill="#191a1a"/>
<path d="M38.6,64h-.952V59H38.6Z" fill="#191a1a"/>
<path d="M43.634,64H42.49l-2.035-3.562V64H39.5V59h1.146l2.033,3.561V59h.952Z" fill="#191a1a"/>
<path d="M49.06,63.913h-.88v-.54a1.68,1.68,0,0,1-.634.465A2.158,2.158,0,0,1,46.7,64a2.292,2.292,0,0,1-.955-.2,2.417,2.417,0,0,1-.772-.552,2.559,2.559,0,0,1-.515-.825,2.879,2.879,0,0,1,0-2.048,2.6,2.6,0,0,1,.515-.829,2.385,2.385,0,0,1,.772-.555,2.262,2.262,0,0,1,.955-.2,2.4,2.4,0,0,1,1.316.36,2.2,2.2,0,0,1,.847,1.01l-.945.238a1.383,1.383,0,0,0-.483-.527,1.3,1.3,0,0,0-.735-.216,1.233,1.233,0,0,0-.58.141,1.493,1.493,0,0,0-.469.378,1.847,1.847,0,0,0-.314.555,1.964,1.964,0,0,0-.115.671,1.9,1.9,0,0,0,.119.67,1.827,1.827,0,0,0,.324.556,1.55,1.55,0,0,0,.483.375,1.329,1.329,0,0,0,.6.137,1.442,1.442,0,0,0,.5-.087,1.515,1.515,0,0,0,.422-.238,1.677,1.677,0,0,0,.325-.353,1.471,1.471,0,0,0,.2-.44H46.829v-.887h2.228Z" fill="#191a1a"/>
<path d="M38.464,23.883c-.048.321-.119.635-.184.951a11.217,11.217,0,0,1,7.111,6.958h7.783a18.729,18.729,0,0,0-14.9-14.726,18.016,18.016,0,0,1,.191,6.817Z" fill="#191a1a"/>
<path d="M34.746,46.8a11.3,11.3,0,0,1-10.592-7.462c-.467.109-.94.2-1.42.276a17.452,17.452,0,0,1-6.363-.117,18.788,18.788,0,0,0,36.773-.257H45.388A11.281,11.281,0,0,1,34.746,46.8Z" fill="#191a1a"/>
<path d="M38.457,17.026A19.022,19.022,0,1,0,16.336,39.68a17.575,17.575,0,0,0,6.426.118c.485-.073.963-.168,1.435-.278A18.972,18.972,0,0,0,38.464,24.872c.065-.319.137-.636.186-.961a18.209,18.209,0,0,0-.193-6.885ZM24.3,31.561A11.4,11.4,0,1,1,17.994,9.8a11.455,11.455,0,0,1,12.6,7.389,11.254,11.254,0,0,1,.561,2.111A11.425,11.425,0,0,1,24.3,31.561Z" fill="#951e23"/>
<rect x="16.135" y="18.589" width="7.522" height="16.762" fill="#951e23"/>
<rect x="5.587" y="17.282" width="28.616" height="7.522" fill="#951e23"/>
</svg>保存したファイルをエディタなどで開くと、上記のようなコードが吐き出されています。(本来は改行ナシで出ますが、見やすいように改行しています）
アートボードサイズやパスの形状や座標などがコード化されていますが、例えば今回の装飾はすべて塗りなので『fill="カラーコード"』でスタイルが記述されています。
これも後々cssで色を変化させる場合はその部分の『fill』無しの方がよいでしょう。
塗りを『#000000』にしておくと『fill』無しで書き出されます。
https://helpx.adobe.com/jp/illustrator/using/svg.html
アイコンフォント
svg画像を元にフォントを作成して、アイコンなどとして利用する事が出来ます。
単色で表現できる、比較的単純な図形に限りますが、文字としての扱いになるので、HTMLの記述はかなり簡単になります。
合字（リガチャ）も設定可能なので、社名ロゴなどを合字にするような使い方もできます。
アイコンフォントの作成
オリジナルフォントの作成サービスは無料のものもいくつかありますので、そちらを使って作成すると良いと思います。
今回はIcoMoon(https://icomoon.io/app/#/select)というサービスを使って作成しています。
開くと画面下にタブのメニューがあり『Selection』が選択されているかと思います。
オリジナルフォントのセットを作りますので、左上のメニューボタンから『New Empty Set』を選択してください。
追加されたセットにフォント用に作成したsvgをドラッグします。
この際、複数色のsvgだと複数の文字を重ねて表現するような特殊なものになってしまいますので単色で作成してください。色情報無しで大丈夫です。
※セット名を変更したい場合は、セット右端のメニューの『Properties』から変更可能です。
下のタブを右の『Generate Font』に切り替えフォントの設定を行います。
『A』と入力してある部分が割り振り対象の文字の入力欄になります。
任意で設定頂いて大丈夫ですし、記号などでもOKです。
一つのフォントファイルに重複させることはできません。できるだけ関連する文字をユニークで設定してください。
設定後マウスをあわせるとでてくる『Get Code』からcssの記載例やHTML Entityが確認できるようになっています。
HTML EntityとはHTMLで利用できる特殊文字で各文字に割り振られたコードになります。特に記号を設定した場合、HTML Entityで記述した方が文字化けしにくいので良いです。
右下のタブに出てきた歯車アイコンよりフォントファイルの保存設定を行います。
フォント名になるので『Font Name』は任意の名称を半角英数で設定してください。
他の設定は初期値のままで大丈夫ですが、必要に応じで変更してください。
設定出来たら、歯車アイコン左の『Download』でファイルをダウンロードします。
zipファイルで保存されますので解凍して中身を確認してください。
『fonts』フォルダ内が作成されたフォントファイルになります。
今回は『A』の文字に割り振りましたので『ttf』ファイルを開くと、以下のように置き換わっています。
アイコンフォントの利用
『style.css』ファイルに今回のフォントを利用するためのcss見本が記載されています。
赤枠の部分がフォントファミリーを指定する記述です。
最低限実際に利用するcssにこの部分を記載すれば大丈夫かと思います。
この例では『font-family』の名称を『icon』とし、太さやスタイルは『normal』。
『font-display』はダウンロードされるフォントの表示タイミングなどの指定を行う属性です。
『block』はダウンロードを少し待って、その間は空白。少し待ってもダウンロードされない場合は代替フォントを使用し、ダウンロードされ次第差し替える、というような指定になります。
この辺りは必要に応じて変更していただいて大丈夫です。
他にRead Meやデモファイルなどもありますのでご確認ください。
あとは、実際にfontを指定したいセレクタに『font-family: 'icon';』を設定すれば反映されます。
疑似要素『::before』や『::after』に設置したい場合は『Get Code』の『css』部分に出てきた『content』を利用してください。
他文字色や文字サイズなどをお好みで設定して完了です。
svgスプライト
通信の効率化のために画像を1ファイルにまとめる画像スプライトという方法がありますが、svgも一ファイルにまとめてオブジェクトごとに呼び出す表示方法があります。
フォントと違い複数色の画像もOKですし、cssの調整にも対応しています。
スプライト用のsvgファイルはフォントと同じく『IcoMoon』で作成することも可能です。
スプライト用ファイルの作成
アイコンファイル同様『Selection』に『New Empty Set』を作ってsvgをドラッグし選択してください。
フォントの場合は下のタブをGenerate Fontに切り替えましたが今回は『Generate SVG & More』に変更します。
svgの名称と設定の『Class Prefix』はHTMLで読み込む際の識別名に関わるので半角英数で適切なものを設定してください。
設定出来たらダウンロードします。
『symbol-defs.svg』がスプライト用のファイルです。
以下のようなコードが生成されているかと思います。
基本的には以下のような構成になります。
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="任意の識別名" viewBox="svgファイルから貼り付け">
svgファイルのsvgタグの中身を張り付け
</symbol>
</defs>
</svg>『svg』タグの『style』はスプライト用の元画像が表示されないようにしているcssです。これは別途cssファイルに記述する形でも問題ありません。
『defs』タグは参照される描画オブジェクトを記述するためのタグなのでスプライトする各svgをこの中に記述していきます。
『symbol』タグでsvgのオブジェクトを定義します。『id』が識別名になり、このid名でHTMLに呼び出すことになります。
『viewBox』は描画エリアのサイズなどを指定し、『symbol』タグの中にsvg本体のコードを入れていきます。
『symbol』タグはまとめたいsvg画像分増えるイメージです。
viewBoxのサイズやsvg本体のコードは上記のような書き出したsvgファイルからコピーしたらよいので、慣れたら手動で作成しても良いと思います。
画像の準備の際にご紹介した通り『fill="カラーコード"』は塗りつぶしの色になります。『style』属性はそもそもcssの記述になりますので、どちらもナシにして外部cssなどでの記述も可能です。
外部cssの影響を受けたくない所だけ『fill』を設定しておく、というのもアリです。
また、文字色と同じになる値『currentColor』などを設定して文字色とあわせて編集するような記述も可能です。
調整する場合は手動でスプライトファイルを編集してください。
svgスプライトの利用
svgスプライトを利用する場合、あらかじめページ内にスプライトコードが読み込まれている必要があります。
方法はいくつかあり、単純なのはbody内に直接コピーして貼り付ける方法です。
ただ、複数ページで利用する場合、修正が複数回になってしまったりして不便なので自動で読み込ませるような利用方法が良いと思います。
例えばShopifyであれば、svgスプライトコードをスニペットファイルとして作成して読み込ませる、などが良いかと思います。
新規でスニペットファイルを作成して、svgスプライトのコード貼り付け、
『theme.liquid』で『body』タグの直下によみこみます。
{% render '作成したスニペットファイル名（.liquidは不要）' %}スニペットファイルの読み込みは上記のように『render』を利用します。
指定した箇所に読み込まれているかコードを確認しましょう。
その他JavaScriptで読み込むなど色々読み込み方法がありますので、適した方法で読み込ませるようにしてみてください！
<svg>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#『symbol』タグに付けた識別名"></use>
</svg>呼び出しの記述は上記のようなコードになります。
『symbol』タグに付けた識別名が一致しないと正常に読み込まれませんので注意してください。
表示サイズなどcssでの制御が可能ですので、必要に応じて『svg』タグにclass名などを付けて調整してください。
まとめ
いかがでしたでしょうか？
今回はsvgの利用方法を2種類ご紹介させて頂きました。
imgタグでの読み込みも含め、その時々に適した利用方法で活用してみてくださいね！