2. Testing SVG

D3.js is built on the top of many DHTML technolgies, including SVG. Before diving into D3.js features, let's review some basic SVG examples.
SVG (Scalar Vector Graphics) allows to dynamically draw and render geometric shapes and texts. It also operates many different geometrical transformation.
Drawing elements with SVG is based on X-Y coordinates, where point 0,0 is placed in the top-left corner, like in the HTML5 canvas approach.
Pictures are drawn writing specific SVG XML code, which can be included as an external file or embedded directly into the HTML page.

SVG markup elements can be customised using styles and attributes in a way similar to the CSS approach,
but such feature is not actual CSS, since it relies an a different syntax specification.

Of course, if you are already familiar with SVG, please consider jumping directly to the next tutorial page.

Remark: here we assuming that your browser supports HTML5, i.e.: it's able to render SVG without any thirdy part plugin, library or whatever.

Show code