(Personally I’d also drop the <defs>-wrapping. Never did understand why structuring them that way is recommended, I don’t think it actually gets you anything except for the vanishingly rare case where you want to put something that would render if it were not in a <defs> tag—I say “vanishingly rare” because situations like you showed—//defs/circle—should normally actually use <symbol>.)
I like to do the defs in one svg in one part of the html page, and use them elsewhere in other svgs. It's clean and readable that way. But to each their own I guess!
