svg を使った画像の反転テスト

svg を 使った画像の反転のためのテストページです．

css3 の transform をサポートしないが、svg をサポートするモダンブラウザに対して svg による反転画像機能を付与することを目指します．

この画像は元画像になります．

firefox3.6 の svg サポートに関する注意

3.5 から svg のサポートを開始した firefox ですが、3.6 までは javascript からの操作でしか svg を描画することができません．

そのため html文書中に svg タグを発見すると、それを読み込んで svg エレメントを生成し直すことで svg を描画する fix ライブラリも存在します．

img の src に flip.svg を指定

このようなかたちで別ファイルを用意することは、サーバ側でファイルデータを用意することになってしまうため早計です．

続いて、この .svg を データスキーム化することが本テストの狙いです．

source

<img src="flip.svg">

flip.svg の 内容

<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
  <image x="0" y="0" width="200" height="200" xlink:href="1.gif" transform="scale(-1,1) translate(-200,0)" />
</svg>

img の src に flip.svg を data スキーム化したものを指定

source

<img src="data:image/svg+xml;charset=utf-8,%3c%3fxml%20version%3d%221.0%22%3f%3e%3c!DOCTYPE%20svg%20PUBLIC%20%22-%2f%2fW3C%2f%2fDTD%20SVG%201.1%2f%2fEN%22%20%22http%3a%2f%2fwww.w3.org%2fGraphics%2fSVG%2f1.1%2fDTD%2fsvg11.dtd%22%3e%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20version%3d%221.1%22%20xmlns%3axlink%3d%22http%3a%2f%2fwww.w3.org%2f1999%2fxlink%22%20width%3d%22200%22%20height%3d%22200%22%3e%3cimage%20x%3d%220%22%20y%3d%220%22%20width%3d%22200%22%20height%3d%22200%22%20xlink%3ahref%3d%22http%3a%2f%2fstatic.sourceforge.jp%2fthumb%2fg%2f2%2f930%2f640x640_0.png%22%20transform%3d%22scale(-1%2c1)%20translate(-200%2c0)%22%20%2f%3e%3c%2fsvg%3e">

js で data スキームを作成し img にセット

Opera9.6, 10.1, 10.5, 11.1, 11.5 で動作が確認できました．

画像の url は絶対指定にする必要があります．またローカルにファイル一式を置いた場合に、画像を表示させることができませんでした．

iframe 内に flip.svg を表示

Opera9.6 で動作．firefox3.6でも表示されています．

source

<iframe src="flip.svg" width="200" height="200">

iframe の src に flip.svg を data スキーム化したものを指定

さて、どうなるでしょう？？

source

<iframe width="200" height="200" src="data:image/svg+xml;charset=utf-8,%3c%3fxml%20version%3d%221.0%22%3f%3e%3c!DOCTYPE%20svg%20PUBLIC%20%22-%2f%2fW3C%2f%2fDTD%20SVG%201.1%2f%2fEN%22%20%22http%3a%2f%2fwww.w3.org%2fGraphics%2fSVG%2f1.1%2fDTD%2fsvg11.dtd%22%3e%3csvg%20xmlns%3d%22http%3a%2f%2fwww.w3.org%2f2000%2fsvg%22%20version%3d%221.1%22%20xmlns%3axlink%3d%22http%3a%2f%2fwww.w3.org%2f1999%2fxlink%22%20width%3d%22200%22%20height%3d%22200%22%3e%3cimage%20x%3d%220%22%20y%3d%220%22%20width%3d%22200%22%20height%3d%22200%22%20xlink%3ahref%3d%22http%3a%2f%2fstatic.sourceforge.jp%2fthumb%2fg%2f2%2f930%2f640x640_0.png%22%20transform%3d%22scale(-1%2c1)%20translate(-200%2c0)%22%20%2f%3e%3c%2fsvg%3e">

インラインSVG

インライン SVG をサポートするブラウザに対しては SVG な xml文書 を html 中に直接記述することができます．

仮にブラウザが css3 transform をサポートしていなくてもインラインSVG をサポートしていれば、とてもシンプルな記述で画像の反転は可能です．

しかし、インライン SVG は外部 SVG に比べてサポートが遅れたため、インライン SVG をサポートするブラウザの多くは css3 transform のサポートを済ませています．

source

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200">
  <image x="0" y="0" width="200" height="200" xlink:href="1.gif" transform="scale(-1,1) translate(-200,0)" />
</svg>