I'm not too well versed (yet?) in using SVG for the web. What I do know is that simple shapes are better than complex paths, if at all possible (due to simple points versus pathing points). Because of this, I've attempted to recreate a logo using very simple paths (ellipses and rectangles, with a few path shapes - adjusted simple shapes - where necessary).
By using simple shapes, using object order relevance (top/bottom), I can obscure certain areas of the logo without resorting to using paths. Unfortunately that obscured area may, for certain purposes, need to be transparent.
Therefore, I'm wondering if it's possible to create an SVG that uses defined paths (of simple objects) that can be applied as clipping paths via CSS declarations, or just a solid color, depending?
Example:
Here, the white used to create the whites of the eyes and the mouth may need to be transparent, clipping at the lower yellow object. At other times it may be required for these objects to have a colored fill. In this example, would I need two completely separate files to solve the problem, or is it possible to do this with a single file? If with a single file, would I instead have to resort to using paths instead of simple shapes?
Edit/Update:
Upon looking more closely at the solution provided by Danielillo (and after having tested CSS's clip-path property) I discovered SVG's filter
element and options. The feFlood filter should provide the capabilities that I originally didn't know that I was actually looking for.