I don't have any problems using clip-path with links to .svg files in Firefox, but Safari seemingly refuses to use them.
If you load my WIP page http://www.omakadesign.com in Firefox, you will see a butterfly pattern at the bottom of the menu, but if you load it in Safari, the menus are completely rectangular.
The relevant line appears in main.css (221) and looks like:
There seems to be very little information about clip-path and Safari, and not many questions about it on this site either (believe me I've looked). But then again, I can't even get the most basic inline svg example with clip-path to work even in Firefox, so perhaps there is something fundamental I'm missing on this topic?
(Also, though this is another subject, why these menus have both padding and margin on the bottom is a mystery to me since I zero them out using min-width…)
I did a test and created a .svg with a mask tag in it and replaced the clip-path line that appears above with a css mask instead (still 221 if you want to try it with the Firefox Style Editor) and amazingly that still works in Firefox and Safari STILL skips over it:
(Final update: Found the solution, but I'm not allowed to post it for another 5 hours… turns out, you have to use very, very specific SVG and use -webkit-mask for Safari.)