Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

What are the main performance issues in svg? Out of filters, gradients , blurs, text rendering , clipping, transformations , etc, what takes the most resources to render?

In particular, is it faster to replace transformations by modifying coordinate values directly (i.e. "bake" transformations)?

share|improve this question
I think this is better suited for the technical stackexchange sites. IN any case its a bit hard to quantify. Obviously the pixelizing filters with big convolution kernels are resource intensive in big scale but at smaller resolutions its not much of a problem. – joojaa Feb 25 '14 at 17:48
up vote 1 down vote accepted

Because the subject is so big lets scope it so that we only consider the transformations.

In essence a transformation in this case is a 2x2 matrix paired with a 1x2 vector that is 6 numbers. Certainly the 3 lower matrix items could be considered but thats not the case in svg so we can slightly optimize stuff. Since the matrices can be concatenated each transform adds just adds 10 operations no matter how many points your shape has.

Since the shape that has no transform still needs to be transformed (ok so this can be optimized. But then coordinates can be cached by the system as well. This is implementation detail we can not know) the initial transform most likely is a no operation in terms of speed.

So all in all adding 10 transforms adds roughly 100 operations, it may be less if the computer optimizes things. Since a samsung galaxy S2 does about 400 million of these operations a second I would say no matter (even if you would have one in 100 overhead still shouldn't matter). Especially if you animate the transformation you only gain speed because there is less data to update.

share|improve this answer
What exactly do you mean by animate the transformation? – user80551 Feb 25 '14 at 18:17
Something like this: – joojaa Feb 25 '14 at 18:29

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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