[xHTML]SVGを埋め込んでみる

SVG
ず〜っと前からあった規格ですが
最近急浮上しているので
復習しておかないと

こちらのページを参考にしています。[LINK]

AdobeのSVGビューアーは開発終了していますが
主要なブラウザはサポートしていますから
『埋め込み』式が主流で
『プラグイン』式は表示出来ない事が多いようです。

 
↓このイラストレーターファイルを
↓HTMLに埋め込んでみます

↑のファイルをSVGに書き出します。

オプションも確認しましょう

とりあえず今回は文字等全てアウトラインにします。
詳細設定があります。

これで
SVGファイルが書き出されました

SVGファイルを
JeditXで開きます

↑の赤く書いた部分はグラフィック部分になります。
そのままでは使えないので
タグを置き換えます。

置き換え終わったら
↓こんな感じ

になっていますので
『 サンプルXHTMLにペーストします。

サンプルはこちら

 
↓xHTML形式
「sample01.xhtml」をダウンロード
↓テキスト形式
「sample01.xhtml.txt」をダウンロード

ダウンロードした
テンプレートの
↓赤矢印部分に

↓ここから

↓ここまで

を
コピーペーストします。

 
できあがったのが

このようになります。
↓xHTML形式
「sample03.xhtml」をダウンロード
↓テキスト形式
「sample03.xhtml.txt」をダウンロード

後はjavaScriptで制御するも良し
普通にリンクするも良しですね。

普通にリンクするなら

こんな感じで
SVGオブジェクト全体に対して
リンクを付けるのが簡単かな？

 
↓xHTML形式
「sample02.xhtml」をダウンロード
↓テキスト形式
「sample02.xhtml.txt」をダウンロード

このグラフッィックで３３kと極小ですから
可能性は色々ありますね
地図とか良いな？

CMYKカラーのサポートって無いんだろうか？