チコデザ

- 一般カテゴリ -

- TシャツMENU -

- info -

チコデザ

デザインコラム

デザインコラム - svgとは?

レティナも怖くない!解像度に依存しないSVGとは?

 svg(スケーラブル・ベクター・グラフィックス)

解像度に依存しないsvg(スケーラブル・ベクター・グラフィックス)とは?レティナディスプレイに対応を考える人はいかがでしょうか?

  • チコデザへトップページへチコデザ   >   
  • デザインコラム   >   
  • レティナも怖くない!解像度に依存しないSVGとは?
  • 解像度に依存しないsvg画像を解説します。

    著者:ハル ハルさん
  • この記事の観覧数 642 Views
    更新日 2015年07月25日

svg画像とは?

パソコンとスマートフォンのディスプレイ

svg(スケーラブル・ベクター・グラフィックス)とは解像度に依存しないイラストレーター特有の画像形式で、小さい画像を大きく引き延ばしても画質が劣化しないという特性があります。

最近はパソコンもスマートフォンもretina(レティナ)ディスプレイというのが主流になりつつあり、通常の解像度の2倍、もしくは3倍!?必要になっており、解像度に依存しないsvgが最近注目されています。今回はhtml5での簡単なsvg画像の導入方法と使い方について解説します。

webデザインでsvgの3つの使い方・導入方法

svgの使い方は僕が知っている中で大きく分けて3つの使い方があります。

1imgタグで利用する

htmlで通常のimgを挿入する際に利用する方法でイラストレーターで作成したファイルを.svg形式で保存してsrcで指定方法です。

<img src="images/aaa.svg">

この方法はcssで指定する事も可能です。backgroundで背景に表示させたり、疑似要素の:before :afterでも可能で通常のjpg、pngなどと同じ様に指定方法です。

2object要素で利用する

オブジェクト要素の指定方法は色々ありますが、単純に下記の書方でも表示が可能です。

<object data="images/test.svg" type="image/svg+xml"></object>

object要素で指定すると対応ブラウザではない場合にobject要素の間に通常のimg要素を書くとsvgが読み込めない場合表示してくる様です。

3インラインsvgで読み込む

インラインは難しいですが、svgの特性を充分に生かせるので覚えておきたい書方です。
書方は色々あるのですが、とにかく表示させるという感じで簡単に解説します。もし表示ができたら、詳細を調べてアレンジしてみて下さい。

又、svgスプライトという方法覚えるとソースで複数の画像が管理でき、大変便利なので合わせて解説します。

1.svgコードを書く

以下ソースをbodyタグの直下にコピペします。意味が分からないかもしれませんが、取りあえず表示させるという事が目標なので詳細説明は省きます。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 32 32" style="display:none;">


</svg>

上記のsvg内にイラストレーターで作成したsvg画像をテキストエディタ、又は、イラストレーター側でソースを参照し、svgソースの間に挿入します。

詳細は下記の『イラストレーターでsvgを作成する方法』

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 32 32" style="display:none;">

<!-- ↓イラストレーターで作成したsvg画像のソース -->
<g id="test-id">
<path d="M4,12h56v12H4V12z M4,28h56v12H4V28z M4,44h56v12H4V44z"/>
</g>
<!-- ↑イラストレーターで作成したsvg画像のソース -->

</svg>
2.svgを表示させる

svgを表示させたい所で呼び出す事が可能です。以下のコードは表示させたい場所に記載します。

<svg viewBox="0 0 32 32"><use xlink:href="#test-id"/></svg>
3.複数の画像を表示させるsvgスプライト

上記のインラインsvgのメリットとして複数のsvg画像を一つのsvgで管理する事が可能です。例えば3つのアイコンを利用したければ下記の様な書方になります。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 32 32" style="display:none;">

<g id="icon-1">
<path d="M4,12h56v12H4V12z M4,28h56v12H4V28z M4,44h56v12H4V44z"/>
</g>

<g id="icon-2">
<path d="M4,12h56v12H4V12z M4,28h56v12H4V28z M4,44h56v12H4V44z"/>
</g>

<g id="icon-3">
<path d="M4,12h56v12H4V12z M4,28h56v12H4V28z M4,44h56v12H4V44z"/>
</g>

</svg>

表示させる場合も同じくIDを指定するのみです。

<svg viewBox="0 0 32 32"><use xlink:href="#icon-1"/></svg>

<svg viewBox="0 0 32 32"><use xlink:href="#icon-2"/></svg>

<svg viewBox="0 0 32 32"><use xlink:href="#icon-3"/></svg>

svgの書方としてIDを指定してすれば呼び出す事が可能です。<g>で要素を囲うのはグループ化する為です。他には<symbolg>要素もあります。<symbolg>を使用する場合は個別でviewBoxと言ってsvgが見える範囲を指定する必要があります。

イラストレーターでsvgを作成する方法

イラストレーターでsvg要素作成する方法です。インラインと通常のsvg画像の作成方法を解説

1img・object要素で使用する場合

32×32のアイコンを作成するとして、アートボードも同じサイズにしてアイコンを作成します。
作成後shift+Ctrl(Macはcommand)+Sを押し、保存先の任意のフォルダを開きます。

保存するフォーマットをsvgを選択し、保存をすると、svgのオプションウィンドウが開きます。そのままokを押して保存します。

インライン要素svgスプライトで使用する場合

svgオプションウィンドウ

上記の通りsvgで保存を選択し、svgオプションウィンドウを開きます。svg1.1を選択し、svgコードを表示ボタンをクリックします。

するとテキストエディタかブラウザが立ち上がり以下の長いコードが表示されるはずです。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 15.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="レイヤー_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
	 y="0px" width="32px" height="32px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">

<circle cx="21.583" cy="11.083" r="9.75"/>
<circle cx="11.583" cy="20.084" r="11"/>

</svg>

使用するコードは一部のコードのみで、<circle>の部分です。今回はアイコンのみを抽出したいのでそれ以外は削除します。

除外して残ったコード

<circle cx="21.583" cy="11.083" r="9.75"/>
<circle cx="11.583" cy="20.084" r="11"/>

イラストレーターで編集した記録はsvgに残ります。例えばCtrl(Macはcommand)+Gでグループ化した場合オブジェクトが消えても<g></g>などが残ります。
これらは必要ないので削除してソースを軽くします。

上記のコードを<g></g>で囲みグループ化します。更に呼び出しの為にIDを指定します。

<g id="icon-1">
<circle cx="21.583" cy="11.083" r="9.75"/>
<circle cx="11.583" cy="20.084" r="11"/></g>

そしてbody直下に入れたインラインsvgに上記のソースを入れます。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 32 32" style="display:none;">

<g id="icon-1">
<circle cx="21.583" cy="11.083" r="9.75"/>
<circle cx="11.583" cy="20.084" r="11"/>
</g>

</svg>

これでいつでもこのID(icon-1)を記述したxlink:hrefというsvgの指定方法で指定するだけで何処でも呼び出せます。呼び出す記述は以下の通りです。

<svg viewBox="0 0 32 32"><use xlink:href="#icon-1"/></svg>
cssの指定する

cssを指定する場合も#icon-1を指定していつもの通り指定できます。又、classを追加して指定する事も可能です。通常のhtmlの指定方法も可能ですが、svg特殊の指定法もあるみたいで、オブジェクトの色を変更する場合はfillなどプロパティを利用します。

#icon-1{
fill:#ffffff;
width:32px;
height:32px;
}

ちなみにwidthやheightを指定しないと一部のブラウザでレイアウトが崩れるなどの現象に遭遇しました。auto等の指定は効果が無い様です。
今回はg要素全体にidを指定しましたが、circleにも指定が可能です。と、言う事は図形のパスの一部などにも細かくcssでデザインする事が可能という事です。

jsやsvgのアニメーションも可能

上記で説明したインラインsvgの場合はjavascriptなどを利用して様々な事が可能です。svg自体にもアニメーションや様々なプロパティが用意されているのでブラウザの実装状況を確認して使用してみるのも面白そうです。

svgの対応範囲は?

ieは8以下はsvg要素を全て無視します。対応させる事も可能ですが、シェア数の様子を見て判断すると良いでしょう。 他にもブラウザ間で使用できない要素もあるので、注意が必要です。

スポンサーリンク
スポンサーリンク

この記事を書いた人

ハルさん

プログラマー
最初は「見れればよいでしょ?」とかなり強気でしたが、実際にレティナディスプレイで見てボロボロだったサイトを見てからちょっと考える様にしました。ディスプレイ解像度が上昇しつつある現在では、svg画像は役に立ちそうです。実を言うとこのサイトもsvgスプライトを使っていたりして。

ハルさんの記事をシェア★

この記事に関連する記事