マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

CSS WEBデザイン WEB制作

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

投稿日:2014年8月6日 更新日:

00

「SVG」というイメージフォーマットをご存知でしょうか?
SVG(Scalable Vector Graphics)とはIllustratorで制作されるような、ベクターデータをWEB上で表示することのできるフォーマットです。
存在自体はあったものの、利用されるケースが少なかったのですが、IE9などのブラウザにも対応するようになり、じわじわと普及率が上がっています。

01

作り方は簡単、Illustratorで作成した画像データの保存形式を「svg」にするだけです。
そしてこちらを普通にimgタグで貼り付ければ表示可能です。
今回はこのSVGの3つのポイントを紹介したいと思います。

ポイントその1
ベクターデータだから拡大縮小しても荒れない!

02

htmlやcss上で元の画像サイズより拡大させると、どうしても画像が荒くなってしまいますよね。
そんな時SVGデータなら!
ベクター画像なので、拡大してもキレイなままです。
可変レイアウトにもばっちり対応できる点が非常に便利ですね。

ポイントその2
フィルタとcssで自由に装飾できる!

03

上記のimgタグの他に、コードを使用して表示させる方法があります。
SVGデータを保存する時に「SVGコードを表示」をクリックして発行されるコードを、直接ソースに貼り付けるだけでOKです。
そしてこのコードの~内に特定のコードを挿入し、cssで指定をすることで様々な装飾をすることができます。

ぼかしフィルタ

04
▼html追加文
<filter id=”pictureFilter” >
<feGaussianBlur stdDeviation=”3″ />

</filter>
▼css
#filter {
filter: url(#pictureFilter);
}

セピアフィルタ

05

▼html追加文
<filter id=”pictureFilter2″>
<feColorMatrix type=”matrix” values=”.343 .669 .119 0 0 .249 .626 .130 0 0 .172 .334 .111 0 0 .000 .000 .000 1 0″ />
<filter />
▼css
#filter {
filter: url(#pictureFilter);
}

ぐにゃぐにゃフィルタ

06

▼html追加文
<filter id=”pictureFilter3″>
<feTurbulence type=”fractalNoise” baseFrequency=”0.015″ numOctaves=”2″ result=”turbulence_3″ data-filterId=”3″ />
<feDisplacementMap xChannelSelector=”R” yChannelSelector=”G” in=”SourceGraphic” in2=”turbulence_3″ scale=”30″ />
<filter />
▼css
#filter {
filter: url(#pictureFilter);
}
もちろん、他にも装飾は可能です!

Hands On: SVG Filter Effects
http://ie.microsoft.com/testdrive/graphics/hands-on-css3/hands-on_svg-filter-effects.htm

こちらのページではデモと合わせて様々なコードが紹介されています。
是非ご覧になってみてください。

ポイントその3
ほとんどのモダンブラウザで対応可能!

なんとこのSVGファイル、主要なブラウザで表示させることができます。
しかもIE9.0~、Firefox24.0~、Chrome29.0~、Safari5.1~、iOS3.2~、Android3.0~と、なかなか幅広い。
特に可変対応が必要とされるスマートフォンにも対応している点が嬉しいですね。

いかがでしたでしょうか?
それからどんどん需要が増えていきそうなSVGファイル、是非試してみてください。

-CSS, WEBデザイン, WEB制作

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

サイトの設計図とも言えるワイヤーフレームを作成することは、ウェブ制作において大事なステップです。 ワイヤーフレームとはサイトの大まかなレイアウト、必要な要素、コンテンツの優先順位を示したもので、ワイヤ …

CSS3の便利機能紹介。

CSS3の便利機能紹介。 http://www.markernet.co.jp/blog/2015/09/03/post-6063/ Facebook

事前に調べよう!2015年ウェブデザイントレンド!

こんばんわ!新人のKです!今回は今後、ウェブデザインのトレンドについて少し説明させていただきと思います。 01.背景イメージORムービー入れ(Large, Beautiful Background I …

【Illustrator】多角形を使った簡単な花形の作り方

【Illustrator】多角形を使った簡単な花形の作り方

みなさまこんばんは、新人Aです。 今日は、多角形を使って一瞬でお花の形にする方法をお話しようと思います! 数値をずらすだけで形が簡単に変わるので、とってもおすすめです。     【 …

【デザイナーをお助け!】○○に特化したフリー素材サイト5選

【デザイナーをお助け!】○○に特化したフリー素材サイト5選

なるべく早く作ってほしい!! 今週末までに提出お願い!! ・・・・・・ヤバイ、時間がない。 こんな急ぎの依頼が来たときに、デザイナーさんの手助けをしてくれる素材サイト。 今回は、特定のジャンルに特化し …