読者です 読者をやめる 読者になる 読者になる

シアトルコンサルティング サービス開発ブログ

シアトルコンサルティング株式会社Webサービス事業部の開発ブログです

【SVG】SVGライフを充実させるあれこれ

SVG

こんにちは iijmyaです。またまたSVGについてです。

=============================== 目 次 ===============================

1.SVGデータをDataURI化
2.SVGデータから描画アニメーションを作成
3.SVG対応ブラウザとSVG非対応ブラウザでの出し分け

====================================================================

1.SVGデータをDataURI化

SVGファイルをDataURI化するには、前回の記事でも紹介しました、SVGOを使用します。
SVGOのインストール方法については前回の記事を参考にしてください)

下記のコマンドを実行すると、DataURIが書かれたテキストファイルが生成されます。

svgo --datauri=base64 svgファイル名 任意の名前.txt

あとは表示したい場所に埋め込んであげるだけです。

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIiB2aWV3Qm94PSIwIDAgMjAwIDIwMCI+PHBhdGggZmlsbD0iIzFCOTdENSIgZD0iTS01MC00OS45OTloMzAwdjI5OS45OTloLTMwMHoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNNzUuMDggOTAuMjQxbC0xMC41NzktOS4yNDYgNDcuODE1LTQxLjUydjE4LjQyOWwtMzcuMjM2IDMyLjMzN3ptNzkuMDk3IDEwLjAwM3YtLjAwOWwtNTAuMzAxIDQzLjY4NC0xNy4zNDYtMTUuMDYzIDE1Ljk2Ny0xMy44NjYgNy43ODEtNi43NTggMi41LTIuMTcgMjUuNTUzLTIyLjE5My0xMC45MTctOC45NTEtMzUuNDkyIDMwLjgyNS0xNi4wMDIgMTMuODk3LTguOTA1LTcuNzMxLTM2Ljg2LTMyLjAxNHYxOC40MjhsMzYuODYxIDMyLjAxNyA4LjkwNSA3LjczMSAxMC42MS05LjIxNXYxOC40M2wtLjAxMS0uMDA5IDE3LjM1NyAxNS4wNzUgMjYuNDkzLTIzLjAxMSAzNy4yMzktMzIuMzMzdi0xOC40M2wtMTMuNDMyIDExLjY2NnoiLz48L3N2Zz4=">

svg/svgo · GitHub

2.SVGデータから描画アニメーションを作成

SVGファイルから、その画像を描いているような描画アニメーションを生成してくれる、
Lazy Line PainterというjQueryプラグインがありました。サイトかわいい。
f:id:seattleservice:20140325154547p:plain


まずはGitHubからLazy Line PainterのJSファイルをダウンロードし、読み込んでおきます。
Lazy Line PainterではjQueryとRaphaëlを使用しているので、これも併せて読み込んでおきます。

<script src="jquery-1.9.1.min.js"></script>
<script src="raphael-min.js"></script>
<script src="jquery.lazylinepainter-1.4.1.min.js"></script>


次に、サイト上にあるコンバータから、描画アニメーションを作成したいSVGファイルをアップします。
サイトにも載っていますが、4000*4000px 40KB以内のファイルに対応しているそうです。
f:id:seattleservice:20140325160855p:plain

アップすると、アニメーションのプレビューと共にJSコードが生成されます。
f:id:seattleservice:20140325160920p:plain
色合いや線の太さを調整し、プレビューで確認することが出来ましたが、
生成されたJSコードには反映されないようです^^;

あとは生成されたJSファイル内で指定しているID名を持つdiv要素を作成したり、
自分で線の色や太さ・種類などのオプションを追加・修正し、
JSファイルとして保存するか、任意の既存JSファイル内に移してあげます。

オプション例)

  • strokeWidth…線の太さ (例: 1, 2)
  • strokeColor…線の色 (例: "#f55", "rgba(255, 180, 200, 0.8)")
  • strokeDash…線の種類 (例: "", "-")


最後に、対象のページでアニメーションが再生されれば成功です。
線の数が多いイラストの方が見ていて面白いアニメーションになりそうですね。

Lazy Line Painter
camoconnell/lazy-line-painter · GitHub

3.SVG対応ブラウザとSVG非対応ブラウザでの出し分け

モダンブラウザではほとんどがSVGをサポートしていますが、
Internet Explorerは8以下が非対応になっています。

こういったSVG対応ブラウザと非対応ブラウザでの画像の出し分けは、いくつか方法があるようです。

SVG画像とラスタ画像を用意しておき、Apacheで振り分ける方法
SVG導入のためのレガシーブラウザ振り分け -Blog //ヴォルフロッシュ

PHPと連動して、SVG画像をPNG画像に自動変換・置換してくれるjQueryプラグイン「SVGMagic」
SVGMagic - Great jQuery SVG fallback plugin

JSライブラリ「Modernizr」でSVG対応ブラウザかどうか判定して、自力で画像を差し替える
Modernizr: the feature detection library for HTML5/CSS3
Mastering SVG use for a retina web, fallbacks with PNG script

Retinaディスプレイなど多解像度に対応するためにも、SVGの導入をさらっと行いたいものですが、
まずは肝心のSVGファイルを作成するためにIllustratorの特訓をしなければ…

Wowza Media ServerをVagrant上で動かしてみた

satkakuです。
最近Ustreamやらなんやらを触ってたりしてたんですが、その延長で、ストリーミングサーバーのWowzaを使ってみようということになったので試してみました。環境はVagrant + Chefで構築して、そこにWowzaを入れています。相変わらず統一感の無いブログですね。

EngineManagerという管理画面から色々制御できるのですが、その辺の日本語情報があまり無かったので、インストールして、VOD(Video On Demand)で配信するまでを書いてみます。



(1) Vagrantを立ち上げる
今回はVagrantの記事ではないので、Vagrantの入れ方/使い方については省略します。

今回はCentOS 6.4 x86_64を使用しました。

Vagrantfile上で、割当メモリを適当に設定した後起動させます。

vb.customize ["modifyvm", :id, "--memory", "4096"]

(2) Chefる
今回はChefの記事ではないので(以下略

Java環境が必要なので、Javaのサードパーティクックブックだけ入れて、Vagrantに適用しておきます。JDKは7を入れときます。

とりあえずsshVagrantに入り、確認

$ java -version
java version "1.7.0_51"
Java(TM) SE Runtime Environment (build 1.7.0_51-b13)
Java HotSpot(TM) 64-Bit Server VM (build 24.51-b03, mixed mode)


(3) Wowzaの開発者版を落としてくる
ここで登録するとライセンスキーが書かれたメールが送られてきます。

ここLinuxインストーラをダウンロードします。


(4) インストール
sftpかなんかでVagrant上に上記のインストーラを置いた後、sshVagrantに入り、以下を実行します。

$ sudo chmod +x WowzaStreamingEngine-4.0.0.rpm.bin
$ sudo ./WowzaStreamingEngine-4.0.0.rpm.bin

利用規約とかを読んだ後、管理画面で使用するユーザーID、パスワードを求められます。それを入力すると最後にライセンスキーを求められるので、先ほどメールで送られてきたライセンスキーを入力します。


(5) 確認
http://localhost:8088/enginemanager にアクセスすると、管理画面が表示されます。

f:id:seattleservice:20140213142142p:plain

とりあえず画面指示に従ってNextを押して行くと、サインインを求められるので、先ほどのユーザーID、パスワードを入力します。


(6) Javaのヒープサイズ変更
なんか管理画面上で、貧弱すぎると警告が出るので、EngineManager上で1024MBに上げておきます。


(7) VODを試してみる
Applications => Add Application => Video On Demand => Single Server or Origin

アプリケーション名を求められるので、vodsampleとかつけておきます。
その後、サイドバーに追加されたvodsampleを選択すると、右上らへんに「Test Players」とか出るので、クリックすると様々な形式でのサンプル動画を見れます。

f:id:seattleservice:20140213144111p:plain

(8) iOSシミュレータでも見てみる
Wowzaは、HLS(HTTP Live Streaming)にも対応しているので、iOS環境でも見てみます。
とりあえずさくっとHTMLを書きます。

<video width="1280" height="720" src="http://127.0.0.1:1935/vodsample/mp4:sample.mp4/playlist.m3u8" preload="none" onclick="this.play()" controls />

srcのところはTest Players内のMobileタブの中に書かれています。
Apacheで上のHTMLを公開しつつ、iOSシミュレータで確認。

f:id:seattleservice:20140213143749p:plain


良かった良かった。
ライブストリーミングも試してみたいところなので、試したらまたブログ書きます。

Gruntでjadeコンパイルするときのあれこれ

grunt

こんにちは iijmyaです。

Gruntプラグイン'grunt-contrib-jade'でjadeファイルをコンパイルする際に、
jadeファイルで使いたい値をGruntfileから渡したり、あるディレクトリ以外のjadeファイルをコンパイルしたかったりしたので、自分なりにGruntfile.coffeeに書いてみました。

f:id:seattleservice:20140206161614p:plain


1.jadeファイルで使いたいオブジェクトをGruntfileから渡す

外部から変数を定義するときは dataオプションを使用します。

data: function(dest, src)
	return {
		from: src,
		to: dest
	}

この関数は宛先(dest)と送信元(src)を引数として持ち、データオブジェクトを返します。


例えばjadeファイル内で、ページによって異なるクラス名を付けたいシチュエーションがありました。
変数bodyに、コンパイルするjadeファイルの直近のディレクトリ名を渡したい…

body(class="#{body}")

今回コンパイルするのは以下のファイルで、publicディレクトリの下に配置されます。

  • src/jade/exam/index.jade -> public/exam/index.html

今回の実現したい事に対して、dataオプションは以下のように書いてみました。

data: (filepath)->
	dir = filepath.replace('public/', '').replace(/[^\/]+\.[^\/]+/, "");
	dir = dir.split("/").join("");

	return {body: dir}

宛先のパスを引数として受け取り、余分な文字をreplaceメソッドで削って、最終的にキーがbodyで値がディレクトリ名のオブジェクトデータを返しています。


実際にGruntでwatchをしつつ、src/jade/exam/index.jadeを更新して生成したhtmlを見てみると。。

<body class="exam">

ちゃんと値が入っていました!
dataオプションには、このように関数を定義してデータオブジェクトを渡す他にも、直接データオブジェクトを渡したり、JSONファイルを読み込む事も出来るようなので、詳しくは以下のサイトを見てみてください。
gruntjs/grunt-contrib-jade · GitHub


2.あるディレクトリ以外のjadeファイルをコンパイルする

このディレクトリに入ってるjadeファイル以外をコンパイルしたい…
だからといってコンパイルしたくないファイル以外をいっこずつ指定するのは面倒ですよね。
そんなときはglobパターンを用います。

  * : 0字以上の任意の文字列にマッチする
  ? : 1字の任意の文字列にマッチする
  ** : パスの一部を含む0字以上の任意の文字列にマッチする
  ! : 指定したパターンでない文字列にマッチする
  {,} : カンマ区切りのor条件として、いずれかの文字列を含むかどうかをチェック出来る


例えば以下のようなファイルがあるとします。

  • src/jade/index.jade
  • src/jade/exam/index.jade
  • src/jade/study/index.jade
  • src/jade/parts/layout.jade
  • src/jade/parts/header.jade
  • src/jade/parts/footer.jade

この場合、partsディレクトリ内のjadeファイルを指定するには以下のようになります。

	src: 'src/jade/parts/*.jade'

または

	cwd: 'src/jade/parts/'
	src: '*.jade'


今回実現したかった、「あるディレクトリ以外のファイルをコンパイルしたい」ですが、
partsディレクトリ内のjadeファイルはhtml単体では意味をなさないため、
partsディレクトリ以外のjadeファイルをコンパイル対象に指定します。

src: [
	'src/jade/**/*.jade'
	'src/jade/!parts/*.jade'
]


cwd: 'src/jade/'
src: [
	'**/*.jade'
	'!parts/*.jade'
]

この設定でコンパイルを行ったところ、

$ grunt
Running "watch" task
Waiting...OK
>> File "src/jade/parts/layout.jade" changed.

Running "jade:compile" (jade) task
File "public/exam/index.html" created.
File "public/index.html" created.
File "public/study/index.html" created.

Done, without errors.

partsディレクトリ内のファイルを更新してみても、
ちゃんとpartsディレクトリ以外のファイルがコンパイルされました!


Gruntfileの大まかな書き方さえわかってしまえば、
Gruntはプラグインも豊富なのでいろいろと便利になりそうですね。


今回のjadeタスクの全体像は以下になります。

# Gruntfile.coffee
jade: 
	compile:
		options:
			pretty: true   # インデント有効化
			data: (filepath)->
				dir = filepath.replace('public/', '').replace(/[^\/]+\.[^\/]+/, "");
				dir = dir.split("/").join("");

				return {body: dir}

		files: [
			expand: true
			cwd: 'src/jade/'
			src: [
				'**/*.jade'
				'!parts/*.jade'
			]
			dest: 'public/'
			ext: '.html'
		]

【SVG実践】SVG画像を使ってみる

SVG

こんにちは iijmyaです。

今回は先日お話ししましたSVGの実践編として、
SVGで画像を作成して実際にHTMLページに載せてみたいと思います。

=============================== 目 次 ===============================

1.SVGファイルの作成
2.HTMLのページにSVGファイルを載せる
3.SVGライフを充実させるために

====================================================================


前回お話ししたように、SVGファイルはAdobeIllustratorオープンソースソフトのInkscapeなどの
画像編集ソフトを利用することによって作成することが出来ます。

今回はIllustratorを使ってSVGファイルを作成し、HTMLのページに載せてみます。

1.SVGファイルの作成

アイコンを描く

まずはIllustratorでアイコンを描きましょう。
(今回はIllustrator CCを使用しています)

f:id:seattleservice:20140130115351p:plain


SVG形式で書き出す

作成したアイコンを、SVGファイルとして書き出します。
[ファイル > 保存]を開き、[ファイル形式]の部分で「SVG(svg)」または「SVG 圧縮(svgz)」を選択し、[保存]をクリックします。
今回は「SVG(svg)」形式で保存しました。

f:id:seattleservice:20140130120945p:plain


[保存]をクリックするとSVGオプションダイアログが表示され、色々設定をいじることが出来ますが、
今回はそのまま[OK]をクリックします。

f:id:seattleservice:20140130121025p:plain

これでSVGファイルは作成され保存出来たので、あとは実際にHTMLに載せてあげます。


2.HTMLのページにSVGファイルを載せる

今回は、前回紹介した方法の一つである、objectタグを用いてSVG画像を読み込みたいと思います。
比較用にPNG画像のアイコンも載せておきます。

HTMLの記述
<body>
  <header>
    <!-- 省略 -->
  </header>

  <div class="main">
    <div class="left_pane top">
      <object type="image/svg+xml" data="icon.svgz"></object>
    </div>
    <div class="right_pane top">
      <!-- 省略 -->
    </div>

    <div class="left_pane bottom">
      <!-- 省略 -->
    </div>
    <div class="right_pane bottom">
      <img src="icon.svgz">
    </div>
  </div>

  <footer>
    <!-- 省略 -->
  </footer>
</body>


ブラウザで表示を確認してみる

ブラウザ(今回はGoogle Chrome)で確認してみると、以下のように表示されました。

f:id:seattleservice:20140130132915p:plain

左上のアイコンがSVG画像で、右下のアイコンがPNG画像です。

このページの表示を300%にしてみると以下のようになりました。
f:id:seattleservice:20140130135123p:plainf:id:seattleservice:20140130135117p:plain

SVG画像の方はくっきり鮮明なままですが、PNG画像の方はぼやけてしまっていますね。

これをiOSシミュレーターを使ってRetina環境を再現して確認したところ、
シンプルなアイコンにしたためあまり大きな差はありませんでしたが、
それでもやはりPNG画像の方は若干がたついていました。

3.SVGライフを充実させるために

SVG画像は何も考え無しに作ってしまったり、複雑な構成や多色の図を作ろうとすると、
PNG画像やJPG画像などのラスタ画像と比べてファイル容量が大きくなってしまう場合があります。

例えば、今回作成したアイコンだとSVGファイルの方が半分も軽いですが、
f:id:seattleservice:20140130181436p:plain

以下の画像を見てみると、SVGファイルの方が倍以上容量が大きくなっています。
f:id:seattleservice:20140131145058p:plain

そのため、SVG画像の軽量化が必要になる場合が出て来ると思いますが、以下のような方法があります。


1) SVGZ形式で保存する

SVGZは、先ほどIllustratorでアイコンを作成し、保存するときに出てきましたね。
SVGZはSVGを圧縮したファイル形式になるため、軽量化が期待出来ます。

例えば、先ほど例に出したSVG画像をSVGZ形式で保存してみると、かなり軽量化することが出来ました。
f:id:seattleservice:20140131154157p:plain


2) 軽量化ツールの使用

軽量化ツールのひとつに「SVGO」があります。
SVGOはターミナル上で以下のコマンドを打つだけでインストール可能です。

sudo npm install -g svgo


使い方は簡単で、軽量化したい対象SVGファイルのあるディレクトリまで移動し、以下のようなコマンドを打つだけです。

svgo ファイル名

例えば今回作成したtest.svgに対して軽量化を行ったところ、以下のようになりました。

$svgo test.svg

Done in 171 ms!
169.186 KiB - 16.5% = 141.276 KiB


SVGファイルをSVGZファイルに変換することも出来るようなので試してみたところ、

$svgo test.svg -o - | gzip -cfq9 > test2.svgz
$du -a -h

12K	./test2.svgz

先ほど1) でIllustratorで保存したSVGZファイルより、5KB軽い結果になりました。

他にも指定ディレクトリ内にある全てのSVGファイルの軽量化や、
SVGZファイルからSVGファイルへの変換など、色々なことが出来るようなので、
詳しくは以下のリンク先で確認してみてください。

SVGO - GitHub



今後どんどんSVGに対応するブラウザやサイトが増えていくと良いですね。

【SVG入門】SVGでベクターグラフィックス【その2】

SVG

こんにちは iijmyaです。

今回も引き続きSVGについてです。

前回、SVGが扱うベクターグラフィックスやビットマップグラフィックスについてお話ししましたが、
(【SVG入門】SVGでベクターグラフィックス【その1】 - シアトルコンサルティング サービス開発ブログ)
今回は実際にSVGを使ってみます。


=============================== 目 次 ===============================

1.ベクターグラフィックスとビットマップグラフィックス(前回)
2.SVGの使用シーン(前回)
3.SVGを使ってみる

====================================================================

3.SVGを使ってみる

SVGは、既にFirefox,Safari,Chromeなどのブラウザがサポートしており、
IEに関してもフィルタやアニメーション,フォント以外ではあるものの、IE9以上がサポートをしています。

SVGをブラウザで表示する場合、外部SVGファイルを読み込む方法と、直接SVGをHTMLに埋め込む方法があります。

(1) 外部SVGファイルを読み込む方法

SVGファイルはAdobeIllustratorMicrosoftのOffice VisioオープンソースソフトのInkscapeなどの画像編集ソフトを利用することによって出力することが出来ます。
ブラウザ上でペイントのように描画してSVGを出力できる「SVG-edit」というのもありました。

objectタグを使用する

HTML内にobjectタグを挿入し、type属性に"image/svg+xml"を、data属性に表示したいSVGファイルのURLを指定します。
この方法はSVGをサポートしているブラウザとの互換性も良く、JavaScriptによる制御も可能です。

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


imgタグを使用する

通常の画像と同じくimgタグのsrc属性でSVGファイルを指定することで表示することが出来ます。
ただし、この方法だと最新ブラウザのみでしか動作せず、かつ、JavaScriptによる制御が出来ないデメリットもあります。

<img src="sample.svg">


(2) 直接SVGをHTMLに埋め込む方法
svgタグを使用する

HTML5をサポートした最新ブラウザであれば、直接HTMLにSVGを埋め込むことが出来ます。

<svg>
  <!-- 円 -->
  <circle cx="100" cy="100" r="50" fill="#f65" />
  <!-- 四角 -->
  <rect x="120" y="120" width="100" height="100" fill="#56f" />
</svg>

上記コードのように、svgタグの中にcircleタグやrectタグを指定することで、図形を描画することが出来ます。
f:id:seattleservice:20140117121116p:plain

(3) 応用: JavaScriptを使用してSVGを制御する

これは応用になりますが、SVGに対してJavaScriptを用いて制御を行うことも出来ます。
以下は、図をクリックすると色が変わるサンプルです。

<svg>
  <circle id="circle" cx="100" cy="100" r="50" fill="#f65" />
</svg>

<!-- jQuery使用 -->
<script type="text/javascript">
  !function() {
    $("#circle").on("click", function() {
      $(this).attr("fill", "#56f");
    });
  }();
</script>

f:id:seattleservice:20140117155818p:plain



いかがでしたでしょうか。
今回は実際にブラウザでSVGを表示する方法について紹介しました。

devtools-snippetsでブラウザ上での作業をハッピーに

JavaScript

satkakuです。
Webサイト見てて、ちょっとしたデータの集計とかをブラウザ上のコンソールからさくっと取りたい、でもjQueryとか入っていないサイトだとめんどい、みたいな際にちゃちゃっとjQueryを差し込みたい、そんな状況が1年に12回くらい訪れます。

Chromeだと、*.users.js作ってUserScript差し込むのもそこまでめんどくは無いのですが(拡張機能画面につっこむだけ)、それすらもめんどかったので、Snippetを使うことにしました。

調べてみるとこんなのが!

DevTools Snippets
GitHub


今回欲しかったやつなんかもあります。
jquerify.js

使い方としては
(1) 「Sources」タブから「Snippets」を開く
(2) 右クリックで「New」
(3) ソース貼付ける
(4) Snippets名を右クリックして「Run」、または「▶」ボタンを押す

f:id:seattleservice:20140117114429p:plain

Snippetsに登録しておけば、いつでも呼び出すことが出来ます。こいつは便利ですね。


他にもこんなのがあります。

console-save.js
consoleにsaveメソッドを追加してくれます。
console.save(data, [filename])で、dataをJSON形式にしてくれた上でダウンロードできます。
filenameはオプションで、デフォルトはconsole.json

dataurl.js
html上のimgとcanvasを全部DataURIに変換してくれます。

log-globals.js
グローバル変数を全部出してくれます。グローバル変数犯人探し。


devtools-snippetsには他にも色々とSnippetsがあるので、もうちょい眺めてみようと思います。

【SVG入門】SVGでベクターグラフィックス【その1】

SVG

こんにちは iijmyaです。
明けましておめでとうございます。

2ヶ月ぶりの更新となってしまいましたが、
今回はベクターグラフィックスを扱う、SVGについて書きたいと思います。


=============================== 目 次 ===============================

1.ベクターグラフィックスとビットマップグラフィックス
2.SVGの使用シーン
3.SVGを使ってみる(次回)

====================================================================

1.ベクターグラフィックスとビットマップグラフィックス

SVG(Scalable Vector Graphics)とは、ベクターグラフィックスを扱うための技術です。

ベクターグラフィックス(ベクター画像)は、一つ一つの点の座標(アンカー)やそれを結ぶ線などの図形情報を記憶しておき、
その図形情報を元に計算を行って図を描画するため、拡大や縮小をしてもそれに合わせて図を再描画するため、図が荒くなるのを防ぐことが出来ます。

ベクターグラフィックスと対の関係にあたるビットマップグラフィックス(ラスタ画像)は、
色の付いたドット(ピクセル)の羅列で図を描画します。
f:id:seattleservice:20140114222034p:plain

ビットマップグラフィックスは拡大・縮小に弱く、画像が荒くなってしまいますが、
ベクターグラフィックスは位置情報を元に図を描画するため、拡大・縮小に強い図形になります。

f:id:seattleservice:20140115165537j:plain


2.SVGの使用シーン

上記のようなベクターグラフィックスを扱うSVGですが、
どのようなときにビットマップグラフィックスではなく
ベクターグラフィックスを使うと、ハッピーになれるのかいくつかシーンを考えてみます。

オリジナルのフォントをSVGで作りたい!

→ ハッピー

ビットマップグラフィックスの場合、フォントサイズ(文字の大きさ)毎にフォントデータを用意する必要がありますが、
ベクターグラフィックスは拡大・縮小に強いため、1つのフォントデータのみで対応することが出来ます。

この間撮った写真をSVGで表現したい!

→ アンハッピー

ベクターグラフィックスは、図形情報を元に描画するため、写真のような複雑な構成や色使いをする図には向いていません。
写真の細かい色の違いや複雑な構成を表現するためにも、点単位で微妙な調整が効くビットマップグラフィックスの方が描画に向いています。

サイト内に載せるこのアイコンを複数デバイスに対応させたい!

→ ハッピー

一つの画像を複数デバイスで対応させる場合、ビットマップグラフィックスだと
解像度が異なる問題で、その分のビットマップデータを用意しなければならなくなってしまいます。

だったら高解像度で大きいサイズのビットマップデータを一つ作ってしまえば、
ある程度縮小しても平気だし、複数デバイスで使いまわせるんじゃないの?と思うかもしれません。
しかしそれだと、そんなに大きいサイズでなくても良い解像度のデバイスでもわざわざその画像を読み込まなくてはならないので、
大きいサイズの画像だと、その分ファイルの容量も大きくなってしまい、不必要にネットワーク負荷がかかってしまいます。
そのため、アイコンのように単純な図であれば、解像度を気にしなくて良いベクターグラフィックスの方が向いています。



いかがでしょうか?
ベクターグラフィックスとビットマップグラフィックスを使い分けられれば、いろいろと便利になると思います。

長くなってしまったので、今回はここまでにしておきます。
次回は実際にSVGを使ってみます。