何世紀もの間、JSなしでブラウザでアニメーションを表示する唯一のクロスブラウザ方法は、アニメーションGIFでした。 JPEGベースのアナログがあり、インターネットが完全に異なっていたかもしれないとしたら... APNGなどの最新の代替品はどこでも機能せず、わずかな圧縮で動作し、待望の<video>タグは特許に苦しんでいます。



ビデオをSVG形式に変換するための小さな学術実験の結果を共有したい（幸運なことに、<img src = "">で簡単に表示できます）。



アカデミック-ブラウザー間の互換性の問題は解決にはほど遠いため、現在の形式ではどこにもほとんど適用できません。

SVGはベクターグラフィックスだけでなく、3メートルまたは4メートルの高品質ビデオでもあります...

最初の結果

Firefoxの幸せな所有者は、興行を離れることなくすぐにビデオを見ることができましたが、Chrome-結果のsvg画像を<img src = "">で埋め込むと、記事から削除する必要があったため落ちます。



ただし、別のウィンドウでSVGを開くことができます 。 IEでは新しいウィンドウで開き、組み込みのSVG JSを使用する必要があります（別のウィンドウのこのオプションは3つのブラウザーすべてで機能しますが、組み込みの<img src = ""> ...では機能しません）。



サイズ ：SVG形式のこのビデオには、WebサーバーによるGZIP圧縮後の2.3 MBが必要です-1.56 MB（エンコード前にbase64がファイルサイズに圧縮されます）。 GIF形式では、同じビデオは24.1Mbかかります。 したがって、15倍のゲインで品質が大幅に向上します。

実装アプローチ

foreignObject

SVGを使用すると、foreignObjectを介して自分の内部に任意のHTML（だけでなく）コードを埋め込むことができます。 これを使用すると、SVG内にビデオ/フラッシュプレーヤータグを挿入できますが、ブラウザによって動作が完全に異なります。 たとえばFFでは、ビデオは機能しますが、フラッシュは何も表示しませんが、サウンドを再生します。 反対に、Chromeではフラッシュは機能しますが、ビデオは機能しません。



何も起こらないようです...



base64 jpeg経由でビルトイン

かなり長い間、彼らはcssおよびsvgファイル内にbase64でエンコードされた画像を含めることを使用してきました。

<image id="frame0" width="480" height="201" xlink:href="data:image/jpeg;base64,/9j//gAPTGF2YzU0Lj[...]"></image>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

使ってみよう。 写真を順番に表示する方法を見つけることだけが残っています...



SVG SMIL

SMIL（同期マルチメディア統合言語）を使用すると、SVGに組み込まれた多くのフレームの目的のアニメーションを実装できます。

 <svg version="1.1" baseProfile="tiny" id="svg-root" width="100%" height="100%" viewBox="0 0 480 360" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image id='frame0' width="320" height="240" xlink:href="data:image/jpeg;base64,/9j//gAPTGF2YzU0Lj[...]" display='inline'> <set id="show1" attributeName="display" to="inline" begin="0s;show4.end" dur="1s" fill="freeze"/> <set id="hide1" attributeName="display" to="none" begin="show1.end" dur="0.01s" fill="freeze"/> </image> <image id='frame1' width="320" height="240" xlink:href="data:image/jpeg;base64,/9j//gAPTGF2YzU0Lj[...]" display='none'> <set id="show2" attributeName="display" to="inline" begin="show1.end" dur="1s" fill="freeze"/> <set id="hide2" attributeName="display" to="none" begin="show2.end" dur="0.01s" fill="freeze"/> </image> <image id='frame2' width="320" height="240" xlink:href="data:image/jpeg;base64,/9j//gAPTGF2YzU0Lj[...]" display='none'> <set id="show3" attributeName="display" to="inline" begin="show2.end" dur="1s" fill="freeze"/> <set id="hide3" attributeName="display" to="none" begin="show3.end" dur="0.01s" fill="freeze"/> </image> <image id='frame3' width="320" height="240" xlink:href="data:image/jpeg;base64,/9j//gAPTGF2YzU0Lj[...]" display='none'> <set id="show4" attributeName="display" to="inline" begin="show3.end" dur="1s" fill="freeze"/> <set id="hide4" attributeName="display" to="none" begin="show4.end" dur="0.01s" fill="freeze"/> </image> </svg>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

明らかに、これはIEでは機能しません（9と10のどちらでもない）-なぜなら SMILはサポートしていません 。 Firefox / Chromeでは、これは既に別のウィンドウで動作し、FireFoxでは-imgタグを介して埋め込む場合でも動作します。



IE用のSVG JavaScriptを内蔵

JavaScriptを画像内に埋め込むことのできる能力は、やや気になりました。

それにもかかわらず、そのような機会があります：

 <svg> [....] <script type="text/ecmascript"><![CDATA[ var svgDoc; var desiredFramesPerSecond=12; var msPerFrame = 1000/desiredFramesPerSecond; var numFrames = 4; var frameCt=0; svgDoc = document.getElementsByTagName("svg")[0]; setTimeout("AnimateEm()",msPerFrame); function AnimateEm(){ if (frameCt==0) startTime = new Date(); setTimeout("AnimateEm()",msPerFrame); svgDoc.getElementById('frame'+frameCt.toString()).style.display='none'; frameCt=(frameCt+1)%numFrames; svgDoc.getElementById('frame'+frameCt.toString()).style.display='inline'; } ]]></script> </svg>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

別のウィンドウでsvgを開くと、これは3つのブラウザーすべてで機能しますが、埋め込み時には-なしで機能します。 たぶんJSの専門家がそれを修正することができます...



SVGビデオを生成する

1. aviファイルを画像に分解します。

 ffmpeg -i "atari.avi" -r 12 -y -qscale 5 -vf scale=480:-1 -f image2 atari%%03d.jpg
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

2. svgを生成する

 php -q convert.php >convert.svg
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 <svg version="1.1" baseProfile="tiny" id="svg-root" width="100%" height="100%" viewBox="0 0 480 201" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <? $numFrames = 217; $FPS = 12; for($i=0;$i<=$numFrames-1;$i++) { ?> <image id="frame<?=$i?>" width="480" height="201" xlink:href="data:image/jpeg;base64,<?=base64_encode(file_get_contents("atari".str_pad(($i+1),3,"0",STR_PAD_LEFT).".jpg"))?>" display="<?=($i==0)?"inline":"none"?>"> <set id="show<?=$i?>" attributeName="display" to="inline" begin="<?=($i==0?"0s;":"")?>show<?=($i+$numFrames-1)%$numFrames?>.end" dur="<?=1/$FPS?>s" fill="freeze"/> <set id="hide<?=$i?>" attributeName="display" to="none" begin="show<?=$i?>.end" dur="0.01s" fill="freeze"/> </image> <? } ?> </svg>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ここからテストイメージと生成スクリプトをダウンロードできます。



Habrの軽い頭脳がsvg-videoのブラウザ間の互換性を改善し、90年代の悪夢としてメガバイトのアニメーションGIFを忘れることができることを願っています...