CanvasChanger from SVG

How to use

About CanvasChanger from SVG

CanvasChanger from SVG is a converter which changes an image made from a vector graphics editor (e.g. Illustrator(R), Inkscape) into the Canvas of HTML5. Even if you suppose a script of the Canvas is difficult, it can be simplified using this tool.

*A convertible image is only a SVG format.
*In order to run this tool, it's necessary to install the Silverlight.
*Use the browser which supported Canvas.

Conversion Procedures

[Download sample SVG file]
Use for a test of conversion.

  1. Create an image by a vector graphics editor (e.g. Illustrator(R), Inkscape).
  2. Save the created image. Specifies the SVG format (plain SVG fomat).
  3. Open CanvasChanger from SVG.
  4. Click "Choose a SVG file" button, then select a SVG file to convert.
  5. Click "Change to Canvas" button, conversion is executed.

Conversion Example

Mapping

SVG Canvas Note
rect moveTo(), lineTo()
circle arc()
ellipse moveTo(), lineTo()
rect moveTo(), lineTo()
polygon moveTo(), lineTo()
polyline moveTo(), lineTo()
path
(Convertable Commands)
M, m, Z, z, L, l, H, h, V, v, C, c, S, s
moveTo(), lineTo(), bezierCurveTo()
(Attributes)
fill fillStyle
stroke strokeStyle
stroke-width lineWidth
linearGradient createLinearGradient() Depending on how to write of SVG, you can not convert.
Converted gradient colors may be slightly different.
radialGradient createRadialGradient() Depending on how to write of SVG, you can not convert.
Converted gradient colors may be slightly different.

Attention

  • Any use of this tool is at your own risk.

See Also