ＩＣＴＭＡＬＬ

　ＳＶＧタグを使った画像　　このファイルを編集すれば変更できる。

　ＩＭＧタグのsrcにＳＶＧファイルを指定した画像　　変更するにはサーバのファイルを編集する必要がある。

ＳＶＧの画像データをＸＭＬシリアライザでデータ化しbase64エンコードしたもの

　それを手で張り付けたもの　　手作業での変更は無理
　それをダイナミックに設定した画像　　javascriptが必要

ＳＶＧをＵＲＬエンコードしたもの

　それを手で張り付けたもの　　簡単な変更なら手作業でできる
　それをダイナミックに設定した画像　　javascriptが必要

リスト表示での実験　　liの画像にsvgファイルを指定。変更にはサーバのファイルを変更するか、別のファイルを指定する必要がある。

一段目
- ２段目
  - ３段目

リスト表示での実験　　liの画像にダイナミックに設定。

一段目
- ２段目
  - ３段目

リスト表示での実験　　liの背景にsvgファイルを指定。変更にはサーバのファイルを変更するか、別のファイルを指定する必要がある。

一段目
- ２段目
  - ３段目

リスト表示での実験　　liの背景にurlencodeしたデータを張り付け。

一段目
- ２段目
  - ３段目

リスト表示での実験　　liの背景にurlencodeしたデータを動的に張り付け。簡単に変更できるがjavascriptが必要

一段目
- ２段目
  - ３段目

bodyの背景をダイナミックに作成　　（このページの背景を参照）

課題
- ＳＶＧをアイコンに使う方法を調べてまとめる。
ＴＯＤＯ
- 画像を使うところをリストアップする。
  - ロゴマーク
  - メニューのボタン
  - 文字列メニューの前
  - 操作ボタン
  - リストのマーク
  - 文書の状態を表すマーク
  - 背景画像
  - ※継続して追加
- 必要そうな場所を選択する。
  - どれも使うが、今はリストのマーク、文書の状態を表すマークが急務。
- ＳＶＧを色々な方法で使ってみる。
  - 使う場所
    - imgタグに使う
    - liタグの list-style-type に使う
    - liタグの background-image に使う
  - 使い方の種類
    - svgのタグのままで使う。別ファイルとしてサーバに置く必要がある
    - 予めsvgからdata:image/svg+xmlに使う文字列を作って使う。htmlファイルに書ける。
    - 動的にsvgからdata:image/svg+xmlに使う文字列を作って使う。編集が楽。
- 使えそうな方法をまとめる。
  - svgファイルを指定する方法が一番正統派のやり方と思われる。自動生成することも問題ない。
  - 但し、オンラインで試行錯誤する場合や関連ファイルを極力減らしたい場合は、動的にurlエンコードして設定する方法が適している
結果
- 当面、ツール作成にはダイナミック生成を採用していくこととする。
- ※styleやjavascriptの詳細はこのページのソースを参照
状態
- 終了