canvasTweetはじめに昨今のクライアントサイドでは、動的な画像のレンダリング、アニメーション、拡張・縮小を求められることが多々あります。そのような際にSVGは利用しやすい形式です。一方で、画像として内容を保存したくなることもあります。そのような場合に使える、SVG画像をPNG画像に変換する方法を簡単に述べます。Graphics)は画像形式の1つです。XMLをベースにした二次元ベクターデータで画像を描きます。ベクターデータとは「画像を、点の座標とそれを結ぶ線(ベクター、ベクトル)などの数値データをもとにして演算によって再現する方式」です。その大きな特徴は「拡大・縮小しても画質が損なわれない」ことです。Illastratorなどでも作れますが、JavaScriptで簡単に作れます。実際にSVGを業務などでがっつりと利用するのであれば、d3jsがお勧めです。扱いやすくできています。実際の変換処理やり方は非常に簡単で、以下の3ステップで可能です。SVG画像を作成するXMLSerializerを使ってSVG画像のデータを取り出すCanvasを使ってPNG形式に変換するXMLSerializerは最新のブラウザであればほぼ使用可能です(詳細はこちら)。コード実際のコードは次のようになります。svg2jpeg関数にSVG要素(DOM)を渡すことで、PNG画像に変換します。変換処理では、SVG要素と同じサイズのCanvasを使い、Imageオブジェクトを利用してSVGデータをCanvasに貼り付けます。その後、CanvasのtoDataURL()メソッドを使用してPNG画像データを取り出します。})HTMLサンプル実際に試すには、以下のコードをHTMLファイルに保存してブラウザで開いて見てください。「変換する」ボタンを押すことで、SVGをPNG画像に変換し、表示します。Chrome、Firefox、Safariでは動作確認済みです。}());</script></body></html>実際にブラウザで表示すると次のように表示されます。変換ボタンをクリックすると、右側の領域にPNG画像が表示されます。開発ツールなどで確認してください。変換後おわりに画像や何らかのグラフ表示などの課題に直面した際には、SVGとCanvasを使えればほぼ解決可能です。画像化の方法を組み合わせることで、サーバへ保存できるようにもなり、なお便利になります。〜PNG,GIF追記〜こんにちは。