SVG and Canvas

Adopt from





SVG's retained mode graphic display system allows you to create all the map details in HTML-like tags in the body and modify them in script by changing shape attributes. [2] By using a "retained mode" approach, client calls do not directly cause actual rendering, but instead update an internal model (typically a list of objects) which is maintained within the library's data space. This allows the library to optimize when actual rendering takes place along with the processing of related objects. [3] It is supported since IE9.

Canvas requires more code to accomplish the same task, because the shapes must be drawn in script and the body only contains the basic Canvas tag. [2] It is supported by most of the browsers.

SVG is strong and robust with built-in shape handling, while Canvas is fast and efficient for pixel manipulation. [1]

Both standards allow accessing their data through JavaScript, but there are no shared interfaces to utilize co-operation. SVG gives its data as (serialized) XML, while Canvas as base64-coded PNG. [1]

Combining two techniques [1]

Canvas to SVG

  1. Including Canvas as foreignObject into SVG
  2. Import Canvas bitmap data as image element into SVG using Canvas.toDataURL

SVG to Canvas

  1. Implement full SVG parsing (e.g. CakeJS)
  2. Render in Canvas or do SVG conversion to bitmap server-side (e.g. ImageMagick, Batik or Inkscape)
本篇發表於 HTML5 並標籤為 , , 。將永久鏈結加入書籤。


發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *