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)?

  • 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

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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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