【初心者向け】CSSでsvgファイルを使う方法

「CSSでsvgファイルを使ってみたいけど、やり方がわからない」

こう思う方も多いのではないでしょうか。

本記事をお読みいただくと以下が分かります。

HTMLやCSSに少し慣れてくると、よりユーザにとって見やすいサイト設計を進めていく段階だと思います。是非本記事をお読みいただき理解を深めてください。

＼プログラミングスクールを比較／

	DMM WEBCAMP	COACHTECH	RUNTEQ
目指せる姿	WEBエンジニアへの転職	フリーランスエンジニア	WEBエンジニアへの転職
分割払い	○	○	○
補助金	○	×	○
転職保証	○	×	×
受講期間	3ヶ月〜	3ヶ月〜	5ヶ月〜
特徴	【IT業界の転職を一番に考えたい方向け】 大手DMMが運営のプログラミングスクール 転職成功率98.8% 豊富なキャンペーンや補助金制度あり	【フリーランスを目指したい方向け】 フリーランスのエンジニアを最短で目指す エンジニアと共に実際の案件開発を担当	【とことん勉強してから転職したい方向け】 1,000時間（約9カ月）のカリキュラムでしっかり勉強 企業の求める即戦力のWEBエンジニアを目指す
料金	329,350円〜 ※給付金適用後	42万9,000円~	55万円
	公式HP	公式HP	公式HP

SVGファイルとは

SVG（Scalable Vector Graphics）ファイルとは、ベクター形式の画像を記述するマークアップ言語のことを指します。

一般的によく使われている JPEG や PNG のようなラスタイメージとは異なりベクタ形式なので、拡大縮小しても綺麗に表示できるのが嬉しいポイントです。

ラスターとは、はデジカメで撮った写真のように１つ１つのピクセルの組み合わせで構成された画像のことを指します。そのため、ラスターは拡大縮小すると画像が粗くなるケースもあります。

一方でベクター形式は描画命令を組み合わせた表現方法のことを指します。描画命令で構成されているので、どのような大きさでもきれいに画像を描画することができるのが特徴です。

ちなみに、SVGは写真などの表現には不向きです。装飾された文字やアイコンの表現に適していて、Webサイトでも広く使われています。

また、SVGは個別にファイルを用意するやり方の他にHTMLファイル内に直接記述するやり方や、外部cssファイルに直接埋め込むこともできます。

SVG形式にファイルを変換する方法

画像ファイル等をSVG形式に変換することができます。画像編集ソフト（PhotoshopやInkscape等）でも変換は可能で、簡単に使うことができるオンラインサービスも存在するのでチェックしてみるといいでしょう。

本記事では具体例として、PhotoshopとIllustratorでSVG形式のファイルに書き出しする方法を紹介します。

PhotoshopでSVG形式の書き出しをする

以下の操作は、当然ですがPhotoshopを立ち上げた状態で始めてください。

前準備

変換するオブジェクトにフォントが含まれている場合、フォントによってはテキストが切り取られてしまい、正しく文字を形成することができない場合があります。

ですので、まずはシェイプレイヤーに変換する必要があります。

そのため、オブジェクトを選択した状態で、上部のツールバー＞「書式」＞「シェイプに変換」を選択します。

SVGのソースコードの準備

SVGはソースコードを利用することによって、インラインで直接書き込むことができます。アニメーションをつけたい場合には、CSS等を使ってインラインで直接書き込む方法をとります。

オブジェクトをシェイプレイヤーに変換したら、画面右のレイヤー＞オブジェクトを右クリックして「SVGをコピー」を選択します。

ここまでの操作でクリップボードにSVGのソースコードがコピーされたので、Webサイトで利用したい場合はHTMLファイルにこのソースコードを貼り付けます。

SVG画像の生成

オブジェクトを選択した状態で、上部のツールバーの「書式」＞「シェイプに変換」を選択します。

そして、画面右側のレイヤーからオブジェクトの名前を”sample.svg”のようにファイル名と拡張子（.svg）に設定します。これで準備は完了です。

このオブジェクトを選択した状態で、上部ツールバーの「ファイル」＞「生成」＞「画像アセット」を選択します。

ここまでの操作でSVG画像の生成ができました。

IllustratorでSVG形式の書き出しをする

SVG形式の書き出し

オブジェクトを選択した状態で、上部ツールバーの「書式」＞「アウトラインを作成」を選択します。

そしてオブジェクトを選択した状態で、上部ツールバーの「編集」＞「コピー」を選択します。ここまでの操作でSVGのソースコードがクリップボードに保存されました。

最後に、このソースコードをHTMLファイルに貼り付けます。

SVG画像の書き出し

オブジェクトを選択した状態で、上部ツールバーの「ウィンドウ」＞「アセットの書き出し」を選択します。

※補足ですが、アセットの書き出しツールは右側の表示オプションでも利用することができます。

続いて、オブジェクトをアセット書き出しツールに挿入します。名前はデフォルトで「アセット1」のように設定されています。

最後に、書き出し設定で「SVG」を選択し「書き出し」ボタンをクリックします。最後に保存先を選択してSVG画像の書き出し完了です。

SVGファイルをcssに埋め込む方法

最後に、SVGファイルをcssに埋め込む方法の紹介です。SVGはイメージの代わりにcssに埋め込むことが可能です。

例えば背景イメージとするには以下のように記述することができます。

background-image: url("sample.svg");

またHTMLタグに指定することもでき、img要素に対して指定するには以下のように記述することができます。

<img src="sample.svg">

HTMLに直接書き込む書き方で、もう少し長いスクリプトも確認しておきましょう。

<svg id="sample1" data-name="sample 1" xmlns="http://www.xxx/xxxxx/svg" viewBox="0 0 100 100"> 
  <defs> 
    <style>.cls-1{fill:#ccc;}</style>
  </defs> 
  <title>none-1</title> 
  <circle class="cls-1" cx="50" cy="50" r="50"/> 
</svg>

まとめ

いかがでしたでしょうか。SVGは少し分かりづらいので躓きやすいですが、使えるようになると非常に便利です。是非本記事をきっかけに、ユーザにとって読みやすいサイト設計を進めてください。