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

2021.10.25

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

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

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

  • CSSでsvgファイルを使う方法方法がわかる

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

SVGファイルとは

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

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

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

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

ちなみに、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に埋め込むことが可能です。

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

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

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

html
<img src="sample.svg">

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

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

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2021 WEBCAMP MEDIA Powered by AFFINGER5