マーカーネット株式会社

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

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

関連記事

オンライン上でPDFファイルをWordファイルに変換する

オンライン上でPDFファイルをWordファイルに変換する

WEBディレクターとして働いていますと、PSDやPNGなどのデザインデータ以外にもパワーポイントやエクセル、PDFなどのファイルなどクライアント様からさまざまな素材をいただいたり、こちらが資料を作成し …

【Illustrator】幾何学模様の作り方

【Illustrator】幾何学模様の作り方

みなさまこんにちは、新人Aです。 三角形で作る幾何学模様の作り方をご紹介します。 これはパターンにするよりもランダムに色を置いていったほうが幾何学模様の雰囲気がぐっと増すと思うので、 少し面倒ですがパ …

【超便利】作業効率化ができるタブ表示拡張機能

突然ですが皆様、画面がごちゃごちゃになったこと、ありませんか?   Macをお使いの方は、“タブでまとめればいいじゃん!”と思うかもしれませんが、 windowsユーザーはそうはいきませんよ …

ホームページに掲載するメールアドレスはエンティティ化で迷惑メール排除

なんかホームページ公開したら急に迷惑メール増えたなぁ。 という方、ホームページにそのままメールアドレスを掲載していませんか? ホームページは全世界に公開されているもので、当然テキスト情報も全て公開され …

phpでオーディオファイルの情報を取得する方法

phpでオーディオファイルの情報を取得する方法

PHPで利用しまして、オーディオファイルの情報(再生時間、タイトルやアーティスト名など)を取得するには、getID3というライブラリを利用します。 以下このライブラリを利用した音楽ファイルの情報の取得 …