Creating and Exporting SVG Graphics with JSON and D3
Recently, I have been playing around with SVG or Scalable Vector Graphics. SVG is a XML-style language for describing two-dimensional vector graphics supported by modern browsers. One of the main advantages of using vector instead of bitmap to serve graphics is that you can be resolution independent (larger scale does not lose quality) but there are other advantages, like smaller size and no HTTP requests (SVG is embedded into html), styling through CSS, animating with JavaScript, and editing. I am not going to get into the basics of SVG as these tutorials have already done a great job explaining SVG in detail:
- SVG Tutorial from Mozilla – Explains the internals of SVG
- What is SVG? – Guide to SVG
- SVG Drawing Basics – Drawing Basics with Scalable Vector Graphics
- A Look Into: Scalable Vector Graphics – Excellent SVG Tutorial
- Why Aren’t You Using SVG? – SVG tutorial from NetTuts
- Getting Down with SVG – Get started using SVG inside your HTML
- SVG Paths – Understanding SVG Paths