I don't know if this belongs in Javascript, or XML Development or not, but here goes... I want to use SVG for a logo, but have it animated, so that it starts blurred, and then becomes clearer over a couple of seconds. The main images is essentially a circle, and I'm using SVG gaussian filters to achive the effect, with animation via Javascript.
The full file is as follows:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="4cm" height="4cm" viewBox="0 0 1200 400"
xmlns="http://www.w3.org/2000/svg" version="1.1" onload ="deblur()">
<defs>
<filter id="blur" x="-10" y="-10" width="300" height="300">
<feGaussianBlur in="SourceGraphic" stdDeviation="60" id="wdth" />
</filter>
</defs>
<style type="text/css">
text {font-family:'Andale Mono','Lucida Console','Courier new'; font-size:
160px}
</style>
<script language="JavaScript1.2" type="text/javascript">
var wdth=60;
function deblur(){
if(wdth>0){
document.getElementById('wdth').setStdDeviation(wdth, wdth)
wdth-=5; //can be changed to make it smoother
setTimeout('deblur()',1);
}
else
;//maybe need to remove filter here?
}
</script>
<desc>Visiongain logo</desc>
<circle id="vgc" cx="799" cy="184" r="200" fill="#0066ee"
filter="url(#blur)" />
<text y="220px" x="0px" fill="#0066ee">vision</text>
<text y="220px" x="610px" fill="white">gain</text>
</svg>
I've been testing with Opera 9 (Firefox I don't think handles filters just yet).
Anyway, the problem is as follows: the circle starts nice and blurred, and gradually gets sharper, as desired. But after a certain stage, the edges get reasonably sharp, but not perfectly crisp. But even worse, is that it's not a circle any more. It's as if the whole thing is pixellated.
So am I going about this the right way? Or am I running into a bug? I think it would fine work with increasing blur, but it doesn't seem to this way. I thought of somehow removing the whole filter when the radius is so small, but I guess this would jump a bit. I thought of drawing a new circle, but this seems clumsy.
I just want to get my pure circle back once the animation is complete. Any suggestions?
[edited by: R1chard at 1:40 pm (utc) on Jan. 19, 2007]
