Best way to style SVG without having them inline - html

Question

I have a menu with about 10 items. Each item has its own icon. This icon is a SVG file.
For example:
<li class="active">
<a href="/home">
<svg version="1.1" id="svg-menu-home"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
x="0px" y="0px" width="31px" height="31px" viewBox="-8 -8 31 31"
overflow="visible" enable-background="new -8 -8 31 31" xml:space="preserve">
<mask maskUnits="userSpaceOnUse" x="0" y="0" width="15" height="15" id="maskTop">
<polygon fill="#FFFFFF" points="12,6.036 2,6.036 2,14.036 6,14.036 6,9.036 8,9.036 8,14.036 12,14.036"/>
<polygon fill="#FFFFFF" points="7,0.036 0,7.036 14,7.036"/>
</mask>
<rect mask="url(#maskTop)" fill="#939598" width="15" height="15"/>
</svg>
<span>Home</span>
</a>
</li>
When a user interacts with the menu item I can assign a class etc to it (hover, select, active).
Having the entire source inline seems to be the only way I can change SVG using CSS, such as:
<style>
li.active svg polygon {
fill: red;
}
</style>
The problem is:
Having any significant number of SVG files inline makes code unreadable, and
Doesn't make it easy to maintain the SVG if you reference it elsewhere.
I would much rather make reference to the file src the way you would an IMG (<img src="x.jpg"/>) and avoid a Javascript dependent solution.
However all the ways I've seen don't allow for CSS styling of the SVG element (or require JS).
Any thoughts/workarounds?

Answer 1

Probably not the most elegant solution, but you could organize them into php includes:
<?php include 'inc/svg-menu-home.svg.php'; ?>

Answer 2

I think is not a bad way to have a look over http://raphaeljs.com/ . It helped me to create this http://screencast.com/t/rNr0Cbqkb ( every area is a svg )