html,body,svg { height:100% }

HTML

<svg viewBox="0 0 10 10">
  <defs>
    <circle id="myCircle" cx="0" cy="0" r="5" fill="#333" onclick="changeme()" />
  </defs>
  <use x="5" y="5" xlink:href="#myCircle" />
</svg>

CSS

html,body,svg { height:100% }
#myCircle{
  transition: fill 1s;
}

JavaScript

function changeme(){
	$("#myCircle").css("fill","#F00");
}