: Overlap rectangles in SVG, or cut them into multiple rectangles? I have a number of images used in a GUI, which consist of several overlapping rectangles, most of them have 3 or 4 layers.
I have a number of images used in a GUI, which consist of several overlapping rectangles, most of them have 3 or 4 layers.
For example:
Now, the simplest thing to do is to just have three overlapping filled rectangles with no stroke.
To not have any overlapping, I could put this together out of 8 rectangles:
Which one is better from a performance perspective? The application they are to be used in, can have several hundreds of them visible at the same time (not overlapped, but in a grid), and they are to be resized often at the same time.
The second approach has the advantage that overlapping doesn't have to be calculated, but it has more elements. I also fear gaps appearing at the border between the rectangles in the second example on some systems.
In a few cases, triangular elements can also be present. Do the same best practices apply?
More posts by @Kevin459
2 Comments
Sorted by latest first Latest Oldest Best
There is very good reason to overlap SVG elements. It turns out that the common way of rendering Vector images is both mathematically as well as in practice flawed. If you do not overlap the elements you may end up with a much more irritating problem than what your trying to solve. This is called a conflation problem. You can counteract this by overlap, but nothing else and if you wantsmaller areas then it gets a bit complex.
Second, the renderers most likely optimize this case anyway. But youbcan not really tell without making a benchmark and test each case separately.
SVG's being vectors means each point is calculated. More points, more calculations. And in this case, more elements (rects) to keep track of also.
Unless you'll be using the alpha channel (in which case I still think performance spike would be the same between examples), I'd suggest the overlapping.
Also less of a headache to work with from your end.
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.