1. ベクター画像をビットマップ画像に変換すると、後から変更しにくい
図形を描くときは、Inkscape を使う。作成した図をブログに載せるには、ベクター画像 を ビットマップ画像 である png や jpeg に変換する。
この方法は、後で図形を変更したい場合、
- 変換前のベクター画像を修正
- ビットマップ画像へ変換
という手順を踏む必要がある。そのため、後から気軽に図形を編集できない。
2. SVG を img タグまたは object タグで表示する
Inkscape でファイルを保存すると、拡張子は .svg となる。
SVG とは、Scalable Vector Graphics - Wikipedia
Scalable Vector Graphics （スケーラブル・ベクター・グラフィックス、SVG）とは、XML によって記述されたベクターイメージ言語のこと、あるいは SVG で記述された画像形式の事。W3C でオープン標準として勧告されている。
ブラウザの対応
SVG ファイルは、ブラウザにそのまま画像として読み込むことができる。ブラウザの対応状況は、
スタートアップ SVG：第1回 SVGの基礎知識｜gihyo.jp … 技術評論社（2010年7月7日）によると、
Firefox，Safari，Google Chrome，Operaなどのブラウザが既にサポートしており，Internet Explorerもそのバージョン9，具体的にはInternet Explorer 9: Platform Demosで公開されているPlatform Preview版でSVGをサポートします。
object タグと img タグ
SVG を表示するには、object タグ、または、img タグを用いる。
最も手軽にsvgを表示する方法です。次のように，objectタグにtype="image/svg+xml"を指定し，data属性にsvgファイルのパスを指定します。…
img要素のsrc属性，CSSのbackground-imageなど，データスキームで画像を表示できる場合，そのデータとしてSVGを流しこむことができます。…
(同上より）
SVGファイルを外部ファイルにできるのか - html5j.org | Google グループ
SVGも画像フォーマットですから <img src="graph.svg"> と書けますよ。（最近のブラウザなら）
ただし、他のブラウザでは試していないので知らないですが、Firefoxだとスクリプトによる操作は出来なくなります。後述のSMILアニメーションなら可能ですが。
HTML5
HTML5 では、SVG をインラインで表示できる。
ASCII.jp：HTML5で注目！インラインSVGの使い方｜古籏一浩のJavaScriptラボ によると、
HTML5ではビットマップ画像を手軽に扱える「Canvas」が話題ですが、「SVG」も画像関連で注目したい新技術です。HTML5ではInline SVG（インラインSVG）がサポートされ、HTML内にSVGを直接記述できるようになるのです。
3. Dropbox へ画像を配置する
ベクター画像を Dropbox で公開し、画像として読みこめば、後から画像だけ独立して更新できる。
- SVG ファイルを Dropbox の Public フォルダ以下に保存。
- SVG ファイルを右クリック > パブリックリンクのコピーを選択。
- HTML で以下を挿入。
<img src="パブリックリンク" />
これにより、SVG ファイルを変更すると、公開済みの画像も変更される。
0コメント:
コメントを投稿