by Holger |
7/11/2006 11:02:15 AM |
Keywords:
SVG,
SVGT,
optimzeSpeed,
Tiny,
Trix,
Optimization Tips,
Tips,
Filter,
Gradients,
CSS,
Style
SVG Optimization TipsOptimizing perfomance of interactive SVGs. 1) use shape-rendering="optimizeSpeed" to turn of antialising.
works fine in all implementations, performance gains usually not worth it considering the loss of quality. but for special cases like clipPathes or animated parts of the image, its quite usefull.
2) try to replace multible lines into one single Path, to reduce memory consumption, and speed up rendering.
this one is very tricky, it works fine in ASV and Batik, but in Opera and Firefox it has the oposite effect (rendering will slow down significantly).
additionally there is a strange behavior in conjunction with 5) : in firefox a long path that is stroked, renders faster than if its not stroked.
3) use one single Path with only M commands and a marker, to place an object multible times.
no testcase
4) dont use opacity.
no testcase, but works the same in all browsers
5) try to avoid stroking shapes.
this also works great in all browsers, and really boost performance, drawback in firefox see comment 2)
6) keep the area small that needs to be redrawn.
no testcase
7) dont use CSS at all
no testcase
8) gradients and filters are quite expensive
no testcase
9) using <use> is slower than repeating the shapes ( at least in firefox )
no testcase
10) set pointer-events="none" on shapes you dont need pointer-events on.
no testcase
11) Other Files
|
