This example shows a way to create a zoomable SVG using d3.js‘s zoom behavior.
Orange shapes are added to a group that can be zoomed with the usual mouse or touch gestures. Purple shapes behave a little differently, keeping the same size regardless of the zoom (this is often referred to as semantic zoom). Finally, blue shapes are placed outside the zoomable group, and thus are never scaled or translated.