SVG画像でSNSのボタンを作成する方法

2015.10.17
Tips

SNSのボタンによく使用されるSVG画像の設定方法などを備忘録としてまとめておきたいと思います。

SVG画像の準備

IllustratorでもSVG画像を作成することができますが、SNSのアイコンなどはフリー素材が多種配布されているので、今回はそちらをダウンロードして使用します。

「Twitter」と検索してアイコンを保存します。SVG画像の準備ができました。

SVG画像の表示

png画像などと同じように<img>タグで表示することもできますが、今回は画像の色などをcssで変更するため、フィルターが使える形で画像を表示します。

まずは表示するsvg画像を記入するsvg-defs.svgファイルを作成します。

<svg class="defs">
    <symbol id="icon-twitter" viewBox="0 0 49.652 49.652">
      <path d="M24.826･･･（省略）"></path>
    </symbol>

    <symbol id="icon-facebook" viewBox="0 0 49.652 49.652">
      <path d="M24.826･･･（省略）"></path>
    </symbol>
</svg>

pathにはSVG画像を表示するためのidと、SVG画像ファイルのviewBoxを設定します。

pathにはSVGコードを記入します。viewBoxの値とSVGコードは、Illustratorで「SVGコードを表示する」を選択するか、テキストエディタでSVG画像ファイルを開くことで表示できます。数値ごとの間が,（カンマ）で区切られている場合は、うまく画像を表示できないので半角スペースに変更します。画像が複数ある場合は、symbolを追加していきます。

bodyの直下に作成したsvg-defs.svgファイルを読み込みます。

<body>
<?php include_once("svg-defs.svg"); ?>

読み込んだsvg-defs.svgファイルはテキストとして表示されませんが、変わりに空白が挿入されてしまいます。そのため、外部ファイルのsvgをcssで非表示にする必要があります。cssに下記を追加します。

.defs{
  display: none;
}

svg-defs.svgファイルを読み込んだので、次はいよいよページ内にSVG画像を表示します。SVG画像を表示したいところに下記を記入します。

<svg>
  <use xlink:href="#icon-twitter"></use>
</svg>

hrefには、svg-defs.svgファイルのsymbolで設定したidを記入します。これでSVG画像が表示できました。

cssの設定

表示したsvg画像にcssのフィルターで色をつけます。

.icon {
  fill: #55acee;
}

色はcolorではなく、fillを使用します。width、heightでサイズも指定できます。

リンクの設定

SVG画像を表示することができましたが、このままではリンクが設定されていません。リンクは通常の画像と同様に、<a>タグで設定します。

<a href="http://www.twitter.com/" target="_blank">
<svg>
  <use xlink:href="#icon-twitter"></use>
</svg>
</a>

これでSVG画像のSNSボタンが完成しました。

SVG画像を使えば、同じ形のアイコンなら色や大きさを別々に設定できるので、画像を何枚も用意する必要がなくなります。

アニメーションなども設定できるので活用する場面が増えそうです。