I am trying to recreate a logo, part of which includes intertwined text. Using z-order and clips I was able to get the desired effect:

However, when the SVG file is rendered by common browsers (Chrome, Mozilla) or exported as PDF or PNG, it looses z-order. The lower "S" is supposed to be behind the upper "S". The fore-ground overlap is a clipped copy of the lower "S".

Using copy-paste to a new document within Inkscape, the Z-order breaks. Which is to say, even Inkscape can't seem to render these paths consistently.

I can't decipher the SVG paths, way too complicated for me. Any suggestions how to resolve this are appreciated.

Thanks,
Jeff

This is a bit sloppy, but I'd boolean instead of clip. (They do get wonky in the browsers.)



(Download and examine in Inkscape.)