D3JS & the SVG Web Advantage

svgdrawSVG is gaining in popularity and therefore broader usage. And why not? Scalable Vector Graphics have a number of factors working for them: 1)As vector graphics, SVGs zoom, scale and generally transform with greater fidelity than bitmaps, even high quality PNG and TIF bitmap file formats; 2)SVG file formats generally are smaller in size to their bitmap equivalents including JPG and GIF bitmap file formats; 3)SVG is available  in HTML5 and most of the latest browsers support the new <SVG> inline tag; 4)SVG syntax is XML-format so it supports CSS stylings including the many new CSS3 transform, transition, and animation stylings; 5)SVG software is rich with commercial stalwarts like Corel Draw and Adobe Ilustrator but also great free Open Source programs like Inkscape and Libre Office which deliver outstanding SVG drawings; 6)SVG has been a major output option in mapping, industrial design and architectural rendering for a long time; 7)There is great support for SVG in two Web languages with JavaScript frameworks like D3.js and Python in general. In sum both Web Designers and Developer have to take a second look at SVG SVG Trade-offs For many potential users, SVG’s strength, it’s XML base, is also its weakness. The drawing XML can become quite complex quite quickly. Yet, unlike bitmap formats such as  JPG or PNG which are closed black boxes, Designers do want to get “inside” an SVG rendering to utilize JavaScript control commands and/or CSS+DOM stylings. So there can be a more formidable learning curve to master SVG. Also those complex SVG drawings can, depending on the browser and the SVG functions used,  take longer to display than similar-sized bitmap images. But the biggest SVG disadvantge is that a world of of smartphone, digital still cameras and videocams are delivering multi-billions of bitmap not vector graphic images every day. So why use SVG if the prepoderance of images are bitmap? The SVG Web Advantage. On the Web the move to flat, minimal and elegant Web Design puts a greater premium on original drawings and logos done in tools like Corel Draw, Xara Desiger Pro, and Adobe Illustrator. Even Microsoft with the Metro interface for Windows 8 and Windows Phone has rejected rich, rococo like the “old’ Aero” UI for flat and simple. So this means not just logos, banner ads and avatars but also posters, massive backgrounds, and other creative illustrations are going to be vector graphics based. And for simpler vector drawings there will likely be a size and speed advantage for SVG. But perhaps the major advanatge is SVG programmability. This means SVG fits very well into responsive, mobile friendly Web Designs. But it also opens up animations and outstanding information graphics to SVG use. And one of the key enablers here is the D3.js JavaScript Library D3.js is to vector graphics as jQuery has been to bitmap images. Both JS libraries have strong DOM selector capabilities so users can choose the exact HTML elements they want to manipulate and transform using direct JavaScript code and/or CSS stylings. Both libraries  have the ability to change HTML, CSS attributes, form values and states. jQuery has a richer set of events and basic data settings that it can manipulate while D3.js has much richer set of functions and operators for manipulation of SVG directly along with 3D and animations; but see the links provided for the trade-offs among a host of competing Web graphic routines for gaming and 3D animations. The following code gives examples of how D3.js helps create and animate vector graphics:

See the Pen D3 Rectangles Genned Responsively by Jacques Surveyer (@jbsurveyer) on CodePen.

Note that this demo has been deliberately set up to replace inline SVG tag code with D3.js generated SVG. Thus if you click on the HTML tab it is quite simple. All the SVG action takes place using D3.js to generate the rectangles with stylings and responsive coding. They are responsive because the D3.js adapts the SVG size to the individual elements and overall scene settings. Using media queries the page can be made totally responsive. One of the generated attributes is the class=’box’. This class is assigned to each SVG rectangle. Then the CSS tab shows each of the rectangles can be animated with hovering over a rectangle triggering a stroke around being drawn. If you click and hold the mouse down on any rectangle it will gradually disappear. Release the mouse button and the box reappears. Summary The above CodePen is just a sampling of what can be done with SVG through D3.js. The D3.js code like jQuery is open source and there are some great tutorials for using D3.js and SVG here and here. And W3schools has a solid overview of SVG here. In sum, if drawings, animations, and infographics are important to you on the Web then so are SVG+D3.js .

Pin It on Pinterest