I'd like to code review generated 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 g tag.

When I animate this I just:

  • Add fill-opacity to zero on g tag.
  • Add a set element that sets opacity to 1 when 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" />

There is some more to this image (like axis) but this is unimportant.

Code that generated this image can be seen in ipython notebook, which can be downloaded from here.

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.

Other concerns:

  • 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).

closed as off-topic by Stephen Rauch, Heslacher, Toby Speight, Ludisposed, hjpotter92 Jul 23 '18 at 8:23

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Lacks concrete context: Code Review requires concrete code from a project, with sufficient context for reviewers to understand how that code is used. Pseudocode, stub code, hypothetical code, obfuscated code, and generic best practices are outside the scope of this site." – Stephen Rauch, Heslacher, Ludisposed, hjpotter92
If this question can be reworded to fit the rules in the help center, please edit the question.


SVG by default has only single precision numbers so having any number with more than four decimal places is a waste which takes more space and transmission. A similar issue happens with the begin time parameter. A blink of the eye takes .1 second and 30 frames / second is .03 seconds so do not specify more than two digits for the begin time. Also you may want to remove the 'mm' and use the default pixels because repeated transmission of the 'mm' is likely not necessary because the person is viewing it in a browser which resizes the graphic.

These changes will reduce the size by about 20%.

You may want to look into

  1. using a compressed svg file type of .svgz
  2. using a svg optimizer or svg cleaner program

Having 50,000 individual points will create a significant file size for svg. Could the animation be changed from each point being animated to a single rectangle which is the same colour as the background, white, being moved from left to right? This would give a transition effect but the code to animate individual points could be removed.


Not the answer you're looking for? Browse other questions tagged or ask your own question.