I tried embedding the styles into the symbols and many other variations but ultimately all my attempts failed. After I’ve spent a decent amount of time trying to figure out the issue I came to the following conclusions (they are backed up by multiple sources, although none authoritative):
1) If an external SVG file contains styles which are put inside a separate
<style> block and then the content of that file is supposed to be reused with
<use>, browsers are simply going to ignore anything that is inside the
<style> block of that external SVG, completely irrelevant of the way the
<style> block is positioned.
2) Putting the code from an external SVG file containing a separate
<style> block directly into an HTML file and then reusing it with
<use> from within the same file works flawlessly.
3) [bonus point] Trying to
<use> any kind of graphics from an external SVG file which contains gradients will result in either unpredictable behavior or the gradients will be completely ignored by browsers (again this seems to be the result of a specification “gray area” and browser inconsistency).
4) All the issues regarding the reuse of resources from external SVG files are present no matter how the files are loaded (directly from HTML, AJAX etc.)
What I’ve learned from this small adventure is that despite SVG showing huge potential it still is really inconsistent and painful to use unless it’s used for simple things like monochromatic icons (SVG icon systems) or the content of the SVG is put directly into the HTML file using it.