I've done some work with SVGs as section separators.
The idea was to place a SVG above the section that it should "clip" and use negative margins (or the top
property) to lower the separator onto the section. The section can have a bg image to achieve this effect.
In this demo, I was using 100% width separators: http://jsfiddle.net/fmpeyton/NuneR/
A word of caution: With 100% separators like in this demo, you might get some 'bleed' from the image underneath. It happened in FF when I was prototyping that JSfiddle. I wasn't really able to alleviate this without some hacky widths/margins.
Hope it points you in the right direction.
Edit:
To expand upon my answer, there are some other ways to clip/mask an element. Here are some resources I've been looking over when looking for a solution:
Most of the clipping/masking properties are not cross browser compatible, so use only in a case where you can fall back to a full, unmasked image.