Database Reference
In-Depth Information
Although this example is low level, it shows how easy it is to render simple
charts using the canvas elements. This has just been a taste of the canvas
element; there are many more drawing tools that can be used to make
visualizations generated with the element more attractive.
Using Inline SVG
Unlikethecanvaselement,ScalableVectorGraphics(SVG)usesaDOMvery
similar to HTML to define the image to be rendered. As a standard, SVG
is relatively ancient, having been around since 1999. Nearly every browser
supports it; Internet Explorer's support lags (Microsoft had submitted a
competing standard called Vector Markup Language (VML) to the W3C),
but it has provided at least some level of support since version 9.
Unlike canvas, which is resolution dependent, SVG is a
resolution-independent standard that provides crisp rendering at every
resolution. This is particularly useful on mobile devices where it is common
for users to zoom in and out of sections of an interface to provide larger
touch targets.
Because it is included as part of the DOM, inline SVG is also usually more
convenientthancanvasimagesbecauseitcanbestyledusingcascadingstyle
sheets (CSS) in the same way as other elements. This makes it easier to
achieve a consistent style in the interface or to collaborate with designers.
The document model itself is reflective of its origins, which were heavily
influenced by the PostScript drawing model and to some extent the VML
introduced by Microsoft as an alternative. There is a small set of primitive
objects:
<circle>
,
<rect>
,
<polygon>
, and
<path>
elements that are
