Illustrator(R)などの画像処理ソフトで作成したSVG画像をHTML5のCanvasに一発変換

CanvasChanger from SVG

ダウンロード

日本語版

英語版

CanvasChanger from SVG について

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

※変換可能な画像はSVG形式のみです。
※動作には Microsoft .NET Framework 2.0.50727 以上がインストールされている必要があります。

変換の手順

  1. Illustrator(R) や Inkscape などの画像処理ソフトで画像を作成する。
  2. 作成した画像をSVG(プレーンSVG)で保存する。
  3. CanvasChanger from SVG を起動する。
  4. 変換するSVGファイルを選択、変換を実行する。

変換の例

マッピング

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に変換することができます。

Canvasに変換可能なInkscapeの機能

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

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

免責事項

See Also

CanvasChanger from SVGを紹介していただきました。ありがとうございます。

copyright © 2017 Project 0884 all right reserved.