Make easily HTML5 Canvas from SVG!

CanvasChanger from SVG

Download

English Ver.

Japanese Ver.

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 software, it's necessary to install Microsoft .NET Framework 2.0.50727 or newer.

Conversion Procedures

  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. Start "CanvasChanger.exe".
  4. Click "Select a SVG file and execute." button, then select a SVG file to convert.
  5. It is converted to Canvas.

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

See Also

CanvasChanger from SVG was introduced.

copyright © 2017 Project 0884 all right reserved.