>>今回のデモはこちら<<
リロードするたびにランダムで色が指定されるようになっています。

インラインで記述してある場合、jQueryで操作可能なのですが、ベタッと長い記述が書かれているのはいかがなものかなと思いましたので、
今回は「SVGを外部ファイル化して読み込む」という方法を試してみました。

まず、objectとしてsvgを呼び出します。

<object id="svg_test" data="svg_test.svg" type="image/svg+xml"></object>

objectに指定したidのSVGの内容を取得し、jQueryオブジェクト化。

    var svg_test = document.getElementById('svg_test').contentDocument;
    var $svg_test = $(svg_test);
    $svg_test.find('path').attr('fill', '#ccc');

こんな風にパスの色も操作できます。

ここまでの参考はこちらhttp://gimmicklog.main.jp/jquery/408/

var $ribbon = $('#ribbon', $svg_test);

を追記して、svg_test内のレイヤーグループribbonを指定。

 var $hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
    $ribbon.find('path').attr('fill', $hue);

ランダムに色指定。帽子の部分とリボンで別々に指定されているので違う色がランダムで指定されるようになっています。

で、話はちょっとそれますがローカルでテスト中にはまったのが、このエラー！！

Uncaught SecurityError: Failed to read the ‘contentDocument’ property from ‘HTMLObjectElement’: Blocked a frame with origin “null” from accessing a frame with origin “null”. Protocols, domains, and ports must match.

Chromeでテストしていたのですが、Safariでは問題無し。
Chromeのローカルファイルの操作の制限が影響していた模様。なので、サーバーにアップしたとたん問題なく動きました。
ローカルで表示させる方法もあるみたいなのですが、他のブラウザを使って(今回もSafariを使えば問題なく確認できたので)作業すればよいのでそこまでしなくてもよいかなと思います。