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.
- Create an image by a vector graphics editor (e.g. Illustrator(R), Inkscape).
- Save the created image. Specifies the SVG format (plain SVG fomat).
- Open CanvasChanger from SVG.
- Click "Choose a SVG file" button, then select a SVG file to convert.
- 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.