CanvasChanger from SVG

使い方

CanvasChanger from SVG について

CanvasChanger from SVG は Illustrator(R) や Inkscape などの画像処理ソフトで作成した画像を、HTML5のCanvasに変換するツールです。 Canvasを描くためのスクリプトに敷居の高さを感じている方も、このツールを使用することで簡単に画像をCanvasで描くことができます。

※変換可能な画像はSVG形式のみです。
※CanvasChanger from SVG を使用するにはSilverlightがインストール済である必要があります。
※Canvasに対応したブラウザを使用してください。

変換の手順

[サンプルSVGファイルをダウンロード]
変換のテストにお使いください。

  1. Illustrator(R) や Inkscape などの画像処理ソフトで画像を作成する。
  2. 作成した画像をSVG（プレーンSVG）で保存する。
  3. CanvasChanger from SVG を開く。
  4. 「Choose a SVG file」ボタンをクリックして、変換するSVGファイルを選択する。
  5. 「Change to Canvas」ボタンをクリック、変換を実行する。

変換の例

マッピング

SVG Canvas Note
矩形 rect moveTo(), lineTo()
円 circle arc()
楕円 ellipse moveTo(), lineTo()
直線 rect moveTo(), lineTo()
多角形 polygon moveTo(), lineTo()
折れ線 polyline moveTo(), lineTo()
パス path
（変換可能なコマンド）
M, m, Z, z, L, l, H, h, V, v, C, c, S, s		 moveTo(), lineTo(), bezierCurveTo()
（属性）
面の色 fill fillStyle
線の色 stroke strokeStyle
線の太さ stroke-width lineWidth
線形グラデーション linearGradient createLinearGradient() SVGの書き方によっては変換できない場合があります。
変換後の色合いが多少異なる場合があります。
円形グラデーション radialGradient createRadialGradient() SVGの書き方によっては変換できない場合があります。
変換後の色合いが多少異なる場合があります。

Canvasに変換可能なIllustratorの機能

以下のツールで描かれたものをCanvasに変換することができます。

  • 長方形ツール
  • 角丸長方形ツール
  • 楕円形ツール
  • 多角形ツール
  • スターツール
  • ペンツール
  • 直線ツール
  • 円弧ツール
  • 鉛筆ツール
  • スパイラルツール
  • 長方形グリッドツール
  • 同心円グリッドツール
  • グラデーションツール ※SVGでの表示と差が出る場合があります

Canvasに変換可能なInkscapeの機能

以下のツールで描かれたものをCanvasに変換することができます。

  • 矩形ツール
  • 星形ツール
  • らせんツール
  • 鉛筆ツール
  • ペンツール
  • カリグラフィツール

※グラデーションは現在未対応です

免責事項

  • 本サイトの利用の結果生じた、いかなる損害にも一切責任を負わないものとします。
  • 本サイトの内容の変更、一時停止、終了等によって生じた、いかなる損害にも一切責任を負わないものとします。

See Also