Feature of
SVG and Canvas.

Self-introduction

kanako Kobayashi
twitter&GitHub : mustacheyork

Today's agenda

  1. SVGについて

    The Markup of SVG(記述方法)

  2. Canvasについて

    The Markup of Canvas(記述方法)

  3. パフォーマンス比較

  4. それぞれの使い分けを整理

SVGについて

正式名称:Scalable Vector Graphics(スケーラブル・ベクター・グラフィックス)

The Markup of SVG

ベクターデータ(数式データ)による画面表示では拡大縮小をしても描写の劣化が起こらない。

      
      <svg id="circleElement" width="700" height="300">
        <circle cx="550" cy="120" r="30" fill="orange">
            <animate attributeName="r" from="40" to="120" dur="4s" begin="1s" repeatCount="indefinite"/>
        </circle>
      </svg>
      
      
Click Me!

パスに沿ったアニメーション

        
        <svg width="1100px" style="margin-left:15%">
            <path d="M 10,40
                     c 0,-100 700,100 700,0 s -700,100 -700,0"
                  id="s17" fill="none" stroke="black" stroke-width="3" />
            <circle cx="0" cy="0" r="15" fill="orange">
              <animateMotion
                 dur="6s" repeatCount="indefinite">
                <mpath xlink:href="#s17" />
              </animateMotion>
            </circle>
        
        
        

Canvasについて

JavaScriptを使って動的に図を描くために策定された仕様

The Markup of Canvas

アニメーションを実現したい場合は、JSで一コマずつ、図を描画する処理を実装する

      
      function draw() {
          var canvas = document.getElementById('mycanvas');
          if (!canvas || !canvas.getContext) return false;
          var ctx = canvas.getContext('2d');
       
          var r = 0;
          
          (function loop() {
              ctx.clearRect(0,0,300,300);
              ctx.arc(400, 100, r, 0, Math.PI*2, false);
              if (r > canvas.height) r = -50;
              r++;
              ctx.fill();
              setTimeout(loop, 20);
          })();
      } 
      
      

Center Click!

パフォーマンス比較

performance of svg and canvase

引用元:MSDN
http://msdn.microsoft.com/ja-jp/library/gg193983(v=vs.85).aspx

SVGが得意なこと


Canvasが得意なこと

SVG向けJsプラグイン


Canvas向けJsプラグイン

まとめ

どちらが良いかではなくそれぞれに特長があります。

Canvas と SVG の、その特徴を理解して、

それぞれに特長を活かした実装をしよう!

Thank you!!

/