SVGアニメーション

オープンXMLベースの標準ベクター グラフィック形式である Scalable Vector Graphicsのアニメーションは、さまざまな方法で実現できます。

• スクリプト: ECMAScriptは、SVG 内でアニメーションやインタラクティブなユーザー インターフェイスを作成するための主な手段です。
• スタイリング: 2008 年以降、 WebKitの機能としてCSS アニメーションが開発されたことにより、ドキュメント オブジェクト モデル(DOM)内から SVG ファイルのスタイルシート駆動型の暗黙的なアニメーションが可能になりました。
• SMIL : 同期マルチメディア統合言語。SVGベースのハイパーメディアをアニメーション化する推奨手段^{[1] [2] [3] [4]}であり、Amaya (2003) ^[5] Opera (2006) ^[6] Mozilla Firefox (2011) ^[7] Google Chrome (2016) およびSafari (2017)のウェブブラウザー^{[8]および 2008 年の}Acid3ウェブ標準テスト (つまり、2011 年のテストの「簡素化」前)に合格することを目指すすべてのブラウザーでサポートされています。このテストでは、テスト 75 および 76 に SMIL サポートが必要です。

現在のSVG対応ブラウザにSMILサポートを提供するためのシムとしてライブラリも作成されています。 ^[9]この方法はSVG+Timeとしても知られています。^[要出典]

SVG は、 Portable Network Graphics (PNG) およびJPEGラスター イメージをサポートしているため、 APNGおよびMultiple-image Network Graphics (MNG)の代替として、このようなイメージをアニメーション化するために使用できます。

SVG アニメーション要素は、 Synchronized Multimedia Integration Language (SMIL)のいくつかのバージョンを公開したワーキング グループと共同で開発されました。SYMM ワーキング グループ (SVG ワーキング グループと共同) は、汎用XMLアニメーション機能セットを表す SMIL アニメーション仕様を開発しました。SVG は、SMIL アニメーション仕様で定義されたアニメーション機能を組み込んでおり、SVG 固有の拡張機能もいくつか提供しています。

1998年6月、ワールドワイドウェブコンソーシアム（「W3C」）内の「同期マルチメディアワーキンググループ」（「SYMM」^{[10]として知られる）は、「SMIL 1.0」として知られる仕様の最初の推奨バージョンを公開しました。 [11] [12] 1998年のSMIL 1.0の公開から間もなく、}マイクロソフトが率いる企業グループが「HTML用のタイムドインタラクティブマルチメディア拡張機能（HTML+TIME）; SMILをWebブラウザに拡張」を公開しました。^[13]その後2年間、HTML+TIMEの主執筆者（パトリック・シュミッツ）はSYMMワーキンググループと協力しながら、SVGワーキンググループでも作業しました。 SMIL 2.0の公開から間もなく、シュミッツと共著者のアーロン・コーエン（インテル社）は2001年9月4日にSMILアニメーションを公開した。 ^{[14] [15]} SVG 1.0も2001年9月4日にW3C勧告となった。

2000 年代には、 Amayaなど一部のWeb ブラウザーがSVG アニメーションのサポートを追加しましたが、SVG アニメーションは 2010 年代に入ってから広く使用されているブラウザーでのみサポートされ、特にFirefox 4 (2011) でサポートされました。Internet Explorer はECMAScript アニメーションをサポートしており、その後継であるMicrosoft Edge はバージョン 42.17134 以降で ECMAScript と CSS アニメーションをサポートしています。

次のコード スニペットは、互換性のあるブラウザーでアニメーション SVG 画像を作成する 3 つの手法を示しています。関連する部分は黄色で強調表示されています。画像のサムネイルをクリックすると、アニメーション バージョンが表示されます。

<?xml バージョン="1.0" エンコーディング="UTF-8" スタンドアロン="はい"?>
<svgバージョン = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"   
 幅= "100%"高さ= "100%"ビューボックス= "-4 -4 8 8" >  
 <title> SMILを使用したSVG アニメーション</title>  
 <円cx= "0" cy= "1" r= "2"ストローク= "赤"塗りつぶし= "なし" >     
  <アニメーション変換
   attributeName = "変換"
   属性タイプ = "XML"
   タイプ = "回転"
   から= "0​​"
   に = "360"
   持続時間 = "1秒"
   repeatCount= "無期限" />
 </circle>
</svg>

<?xml バージョン="1.0" エンコーディング="UTF-8" スタンドアロン="はい"?>
<svgバージョン = "1.1" xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink"   
 幅= "100%"高さ= "100%"ビューボックス= "-4 -4 8 8" >  
 <title> CSSを使用したSVG アニメーション</title>  
 <スタイル>
  @キーフレーム rot_kf  {
     { 変換:  rotate(0deg);  }
から    に   {  transform:  rotate(360deg);  }
  }
  .rot  { アニメーション:  rot_kf  1s 線形 無限;  }
 </スタイル>
 <circleクラス = "rot"  
  cx= "0" cy= "1" r= "2"ストローク= "青"塗りつぶし= "なし" />    
</svg>

<?xml バージョン="1.0" エンコーディング="UTF-8" スタンドアロン="はい"?>
<svg version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" width= "100%" height= "100%" viewBox= "-4 -4 8 8" onload= "rotate(evt)" >       
 <title> ECMAScriptを使用したSVG アニメーション</title>  
 <スクリプト>
  関数 rotate(evt)  {
   const オブジェクト =  evt.target.ownerDocument.getElementById('rot');
   間隔を設定する(()  =>  {
     const  now           = 新しい Date();
     定数 ミリ秒 =  now.getTime()  %  1000;
     const  degrees       =  milliseconds  *  0.36;  // 1000ミリ秒
で 360 度        object.setAttribute('transform',  `rotate(${degrees})`);
    },  20);
  }
 </スクリプト>
 <circle id= "腐敗"  
  cx= "0" cy= "1" r= "2"ストローク= "緑"塗りつぶし= "なし" />    
</svg>

上記の例は機能しますが、最適な実装ではありません。アニメーションは 50 フレーム/秒 (FPS) に制限されます。を使用するとrequestAnimationFrameパフォーマンスが向上し、60 FPS に到達できます。

<?xml バージョン="1.0" エンコーディング="UTF-8" スタンドアロン="はい"?>
<svg version= "1.1" xmlns= "http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink" width= "100%" height= "100%" viewBox= "-4 -4 8 8" onload= "init()" >       
  <title> requestAnimationFrame()を使用したSVG アニメーション</title>  
  <スクリプト>
    オブジェクトにします 。
   
    関数 init()  {
      オブジェクト =  document.getElementById('rot');     
      window.requestAnimationFrame(回転);
    }
   
    関数 rotate(timestamp)  {
      const ミリ秒 = タイムスタンプ %  1000;
      const  degrees       =  milliseconds  *  0.36;  // 1000ミリ秒
で 360 度         object.setAttribute('transform',  `rotate(${degrees})`);
      window.requestAnimationFrame(回転);
    }
  </スクリプト>
  <circle id= "rot" cx= "0" cy= "1" r= "2"ストローク= "green"塗りつぶし= "none" />      
</svg>

以下は、時間の経過とともに値が変化する特定のターゲット要素のターゲット属性を識別するアニメーション属性です。 attributeName = "<attributeName>"ターゲット属性の名前を指定します。属性のXML名前空間を示すために XMLNS プレフィックスを使用できます。プレフィックスは、現在のアニメーション要素のスコープ内で解釈されます。

attributeType = "CSS | XML | auto"ターゲット属性とそれに関連付けられた値が定義されている名前空間を指定します。CSS'attributeName' の値が、この仕様でアニメーション可能として定義されている CSS プロパティの名前であることを指定します。 XML'attributeName' の値が、ターゲット要素のデフォルトの XML 名前空間で定義されている XML 属性の名前であることを指定します。 属性は、この仕様でアニメーション可能として定義されている必要があります。auto デフォルト値は 'auto' です。 実装では、'attribute Name' をターゲット要素の属性と一致させる必要があります。 実装では、まず CSS プロパティの一覧で一致するプロパティ名を検索し、見つからない場合は、要素のデフォルトの XML 名前空間を検索する必要があります。

• 変換（スケール）と CSS 属性（不透明度とダッシュ オフセット）の変化を示す SMIL アニメーション
• パスに沿った動きと3Dのシミュレーションを示すSMILアニメーション
• 形状（パス）のモーフィングを示す SMIL アニメーション
• 3D の変換 (回転、拡大縮小、移動) とシミュレーションの変化を示す CSS3 アニメーション

MediaWiki wiki ソフトウェアは、 SVG 画像の静的でアニメーション化されていないサムネイルを自動的に生成します。それぞれの説明ページから実際の .svg 画像を表示すると、互換性のあるブラウザーでアニメーションが表示されます。

SVGアニメーションを操作するためのJavaScriptライブラリがいくつかあります。このようなライブラリを使用する利点は、これらのライブラリが抽象化によってブラウザの非互換性の問題を解決することが多いことです。ライブラリの例には、RaphaëlやVelocity.jsなどがあります。

ウィキメディア・コモンズには、アニメーション SVG ファイルに関連するメディアがあります。

• CSSアニメーション
• D3.js
• フラッシュアニメーション
• GIFアニメーション