Is there an easy way to clear an SVG element's contents?

If you're using jQuery, you can just do

$("#svgid").empty();

This deletes all child elements of the svg while leaving its other attributes like width and height intact.

You already gave one answer: you can always just loop over all children and remove them. If you think that you have too many child nodes then maybe you want to replace the svg node by an empty one. If your svg node has some attributes you may use a tag where you place all the child nodes and then just replace the node with an empty one.

Use d3.js. This will remove all contents nodes from svg.

svg.selectAll("*").remove();