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.