Fragment identifiers in "src" attribute seem to be supported by all modern browsers, but now I realized my example was wrong - you can reference <view> elements, but not <symbol> elements directly.
To make it work you would have to either replace <img src="sprite.svg#green"/> with <svg ...><use href="sprite.svg#green"></use></svg> or add views to the sprite file:
<?xml version="1.0" encoding="utf-8"?>
<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="recolorable" viewBox="0 0 100 100">
<rect width="100" height="100" style="fill: inherit;"/>
</symbol>
<view id="blue" viewBox=" 0 0 100 100"></view>
<view id="green" viewBox="100 0 100 100"></view>
</defs>
<use x="0" y="0" width="100" height="100" style="fill: blue;" xlink:href="#recolorable"/>
<use x="100" y="0" width="100" height="100" style="fill: green;" xlink:href="#recolorable"/>
</svg>
