svgを使ったアイコンの表示設定
ロゴだったり、ツイッター・フェイスブックのアイコンを表示する時に、svgを使うと便利です。
<svg> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="filePath#svgId"></use> </svg>
filePath
のところに参照するsvgファイルををセット。(例:sample.svg)
svgファイルのサンプル
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <symbol id="svgId" fill-rule="evenodd" viewBox="0 0 20 20"> <title> filePath </title> <path d="M22 23.99c0-1.099.898-1.99 1.99-1.99h16.02c1.099 0 1.99.898 1.99 1.99v16.02c0 1.099-.898 1.99-1.99 1.99H23.99c-1.099 0-1.99-.898-1.99-1.99V23.99zm13.937 17.991v-8.765h2.39l.316-2.882h-2.706l.005-1.442c0-.75.074-1.153 1.192-1.153h1.492v-2.882h-2.389c-2.867 0-3.878 1.398-3.878 3.748v1.73h-1.788v2.88h1.788v8.766h3.578z" transform="translate(-22 -22)"/> </symbol> <use xlink:href="#svgId"/> </svg>
title
のところに入る文字はsvgファイル名と同じ名前にするとよいです。
例えば facebook.svg
だとすると <title>facebook</title>
とします。
これで表示の設定は完了です。
あとはcssで色を変えたり、width
height
を設定する事によってサイズの変更も可能です。
ぜひ使ってみてください。