マーカーネット株式会社

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

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

関連記事

イラスト素材サイトのご紹介

イラスト素材サイトのご紹介

こんばんは、新人Aです。 今日は、イラスト素材のサイトさんをご紹介しようかと思います!       【いらすとや】 http://www.irasutoya.com/ フ …

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

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

【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その1~

【これから始めるWEB制作】adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その2~

あけましておめでとうございます。 ひよっこWEB制作者のMです。 9連休、上京してから史上最長の帰省でしたが 実家にあたらしくやってきた家族(ワンちゃん、0歳)に ちゃんと覚えてもらえたことが嬉しかっ …

CSS3のみで吹き出しを作成してみました!上下左右どこでも大丈夫!

凝ったデザインなどには吹き出しなどを作成したりします。 ですが、内容を画像ではなくテキストにしたい場合があると思います。 吹出し画像を文字数に合わせて調節したり、分割して組み立てたりするのは大変ですよ …

デザイナーの常識!? いいデザインと悪いデザインの見分け方 その(2)

こんにちは、デザイナーのAです! 前回、いいデザインと悪いデザインの見分け方・・・マージンの取り方についてご紹介しました。 デザイナーの常識!? いいデザインと悪いデザインの見分け方 その(1) 今回 …