2010年3月23日火曜日

svg 画像を Blogger のコンテンツ内で表示する試み

  1. 画像としてアップロード
    サポートされない画像ファイル形式でアップロードできない
  2. 投稿編集画面の HTML の編集で直接 svg タグを埋め込む
    表示されない
  3. Picasa へアップロード
    サポートされない画像ファイル形式でアップロードできない
  4. Google Docs へ保存して画像へのリンクを作成して object data="..." で読み込み
    成功? 何とか google のサービス内で収められた
  5. Google Docs のリンクからリダイレクトされる URL を object data="..." で読み込み
    リダイレクト URL は固定ではないようで、次の日には変わっていた

下記は 4番目の方法

circle.svg
<svg width="40" height="40"
  xmlns:xlink="http://www.w3.org/1999/xlink" 
  xmlns="http://www.w3.org/2000/svg">
  <g>
    <title>Layer 1</title>
    <circle stroke="#000000" fill="#cccccc" id="svg_1" r="15" cy="20" cx="20"/>
  </g>
</svg>
html source
<object
  type="image/xml+svg" width="40" height="40"
  data="http://docs.google.com/uc?id=0ByvZ-
fKgUW8yZGIwNTAzMDctMGY1MS00MGExLThiMWYtMTRhNDk5NDE1OTQx">
</object>
result

IE は現時点(version 8) で SVG 未サポート

docs.google.com から googleusercontent.com へリダイレクトされるので firefox で RequestPolicy の場合は White List へ下記を設定

  • blogspot.com→google.com
  • google.com→googleusercontent.com