chocotakaの日記

日々技術的な事で学んだ小さな事をを自分なりに書いていきます

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 を設定する事によってサイズの変更も可能です。

ぜひ使ってみてください。