I'd like to code review generated svg animation, while this might stretch definition of this site, I really hope this is interesting and revelant topic, as this SVG file is really like any other programming language.
I'd like to display certain physical phenomenon, here is example of generated animation (2.5MB of SVG code, after download should start animating after 5 seconds). SVG seemed a good format since I just could dump every hit, whith coordinates in SI units and it just worked.
Every hit is displayed as a dot, like that: (... many more circles..) (... many more circles..)
Fill color and the like is stored in enclosig
When I animate this I just:
fill-opacityto zero on
- Add a
setelement that sets opacity to
1when this hit should appear.
So each hit looks like that:
<circle cx="32.6938819885mm" cy="0.733043327928mm" r="0.2mm"> <set attributeName="fill-opacity" attributeType="XML" begin="6.80948s" to="1" /> </circle>
There is some more to this image (like axis) but this is unimportant.
To generate this image I use python and svgwrite, but I really need a hand in pure svg format.
My main question is:
- How can I optimize this svg image so it is smaller and it renders faster, without any significant loss in precision. For not generated image weights 2.5MB which is too much for me.
- Is there is any other thing you notice in svg I'd be happy to hear it, as this is my first attempt in generating SVG without an application like Inkscape.
- Related question: how can I display label saying: "Current time: 1.2ns" that updates itself with current time in animation. See also my question on this matter on SO.
- How can (easily) start animation (for example) on key-press (it is non obvious, as events do not depend on themselves).