SVG design rules for overlapping items

Question

Stack Overflow Meta is discussing an issue about the favorite star.

As we can see in high zoom rates, there is an unfilled area. Looking even closer, you can find more issues, e.g. that the whole outline is not symmetrical.

To me, I'd never have designed the star like this anyway. Instead I'd

• take a copy of the star,
• resize it,
• put the larger one in the background

Is there any reason my approach would result in "bad" SVG? Is there a SVG rule unknown to me that objects should not overlap?

My approach would at least require less points, thus be potentially smaller in size and easier to calculate for a computer (faster), doesn't it?

Answer 1

No, there would be no issue with your approach. SVG elements are implicitly rendered in the other that they appear in the document, the the standard

As long as the first (larger) star appeared first, the second would be drawn over it without any issues.

(For this particular drawing though, a simpler approach with less nodes would be to draw one star with a wider stroke to represent the outer border.)

Answer 2

You can expand the shape once stroke is added or run simplify. Then export 100% vector svg. The problem here is that nobody learns pathfinder. People often treat illustrator like photoshop it’s and use layer stacks instead of grouping