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

シアトルコンサルティング株式会社プロダクトソリューション事業部の開発ブログです

【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の特訓をしなければ…