Search code examples
csssvgblending

Blending that overrides existing pixels

I am trying to display svg icons with some transparent parts.

White color in these icons means transparent pixels that lie on top of previously rendered black ones. I can't find the correct blend mode or clip/mask mode to display this properly.

Is there a way to solve this by CSS or some attributes without changing the svg pathes itself?

example

This is how it should look. Here the white color is simply replaced with the background color. But it's the wrong solution because instead of color there can be a picture. example 3

This is what the icons look like without white color example 1

Example svg:

<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0_2124_24547)">
        <path d="M5.64062 6.36719H7.45703V4.5625C7.45703 3.57812 7.96094 3.09766 8.93359 3.09766H19.5391C20.5234 3.09766 21.0156 3.57812 21.0156 4.5625V6.34375H22.832V4.69141C22.832 2.40625 21.6953 1.38672 19.5156 1.38672H8.95703C6.89453 1.38672 5.64062 2.40625 5.64062 4.69141V6.36719Z" fill="black" fill-opacity="0.85"/>
        <path d="M4.49219 23.1484H23.9922C26.2656 23.1484 27.4727 22 27.4727 19.7148V8.74609C27.4727 6.47266 26.2656 5.3125 23.9922 5.3125H4.49219C2.32422 5.3125 1 6.47266 1 8.74609V19.7148C1 22 2.20703 23.1484 4.49219 23.1484ZM2.89844 19.8086V8.65234C2.89844 7.62109 3.42578 7.08203 4.46875 7.08203H24.0156C25.0469 7.08203 25.5859 7.62109 25.5859 8.65234V19.8086C25.5859 20.8398 25.0469 21.3789 24.0156 21.3789H4.46875C3.42578 21.3789 2.89844 20.8398 2.89844 19.8086ZM21.3906 11.3242C22.1758 11.3242 22.8438 10.668 22.8438 9.85938C22.8438 9.07422 22.1758 8.40625 21.3906 8.40625C20.582 8.40625 19.9258 9.07422 19.9258 9.85938C19.9258 10.668 20.582 11.3242 21.3906 11.3242Z" fill="black" fill-opacity="0.85"/>
        <path d="M7.96094 26.6289H20.5117C22 26.6289 22.75 25.9492 22.75 24.3906V14.8281C22.75 13.2695 22 12.5898 20.5117 12.5898H7.96094C6.54297 12.5898 5.72266 13.2695 5.72266 14.8281V24.3906C5.72266 25.9492 6.47266 26.6289 7.96094 26.6289Z" fill="white"/>
        <path d="M7.96094 26.6289H20.5117C22 26.6289 22.75 25.9492 22.75 24.3906V14.8281C22.75 13.2695 22 12.5898 20.5117 12.5898H7.96094C6.54297 12.5898 5.72266 13.2695 5.72266 14.8281V24.3906C5.72266 25.9492 6.47266 26.6289 7.96094 26.6289ZM8.54688 24.8594C7.92578 24.8594 7.60938 24.5547 7.60938 23.9219V15.2852C7.60938 14.6523 7.92578 14.3594 8.54688 14.3594H19.9375C20.5703 14.3594 20.8633 14.6523 20.8633 15.2852V23.9219C20.8633 24.5547 20.5703 24.8594 19.9375 24.8594H8.54688ZM10.1758 18.2852H18.3203C18.7422 18.2852 19.0469 17.9688 19.0469 17.5469C19.0469 17.1484 18.7422 16.8438 18.3203 16.8438H10.1758C9.75391 16.8438 9.4375 17.1484 9.4375 17.5469C9.4375 17.9688 9.75391 18.2852 10.1758 18.2852ZM10.1758 22.375H18.3203C18.7422 22.375 19.0469 22.0586 19.0469 21.6602C19.0469 21.25 18.7422 20.9336 18.3203 20.9336H10.1758C9.75391 20.9336 9.4375 21.25 9.4375 21.6602C9.4375 22.0586 9.75391 22.375 10.1758 22.375Z" fill="black" fill-opacity="0.85"/>
    </g>
    <defs>
        <clipPath id="clip0_2124_24547">
            <rect width="26.4727" height="25.6289" fill="white" transform="translate(1 1)"/>
        </clipPath>
    </defs>
</svg>

Solution

  • What you have now are filled paths. I would go back and redraw everything.

    However if you are looking for a fix you can put all the paths in a mask. Please observe that all paths are now filled white except for the path you have filled white which is now filled black.

    In the next example I'm using a red filled rect masked by those paths.

    In order to change the color of the icon change the fill of the red rect.

    <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
    <mask id="m">      
        <path d="M5.64062 6.36719H7.45703V4.5625C7.45703 3.57812 7.96094 3.09766 8.93359 3.09766H19.5391C20.5234 3.09766 21.0156 3.57812 21.0156 4.5625V6.34375H22.832V4.69141C22.832 2.40625 21.6953 1.38672 19.5156 1.38672H8.95703C6.89453 1.38672 5.64062 2.40625 5.64062 4.69141V6.36719Z" fill="white" />
        <path d="M4.49219 23.1484H23.9922C26.2656 23.1484 27.4727 22 27.4727 19.7148V8.74609C27.4727 6.47266 26.2656 5.3125 23.9922 5.3125H4.49219C2.32422 5.3125 1 6.47266 1 8.74609V19.7148C1 22 2.20703 23.1484 4.49219 23.1484ZM2.89844 19.8086V8.65234C2.89844 7.62109 3.42578 7.08203 4.46875 7.08203H24.0156C25.0469 7.08203 25.5859 7.62109 25.5859 8.65234V19.8086C25.5859 20.8398 25.0469 21.3789 24.0156 21.3789H4.46875C3.42578 21.3789 2.89844 20.8398 2.89844 19.8086ZM21.3906 11.3242C22.1758 11.3242 22.8438 10.668 22.8438 9.85938C22.8438 9.07422 22.1758 8.40625 21.3906 8.40625C20.582 8.40625 19.9258 9.07422 19.9258 9.85938C19.9258 10.668 20.582 11.3242 21.3906 11.3242Z" fill="white" />
        <path d="M7.96094 26.6289H20.5117C22 26.6289 22.75 25.9492 22.75 24.3906V14.8281C22.75 13.2695 22 12.5898 20.5117 12.5898H7.96094C6.54297 12.5898 5.72266 13.2695 5.72266 14.8281V24.3906C5.72266 25.9492 6.47266 26.6289 7.96094 26.6289Z" fill="black"/>
        <path d="M7.96094 26.6289H20.5117C22 26.6289 22.75 25.9492 22.75 24.3906V14.8281C22.75 13.2695 22 12.5898 20.5117 12.5898H7.96094C6.54297 12.5898 5.72266 13.2695 5.72266 14.8281V24.3906C5.72266 25.9492 6.47266 26.6289 7.96094 26.6289ZM8.54688 24.8594C7.92578 24.8594 7.60938 24.5547 7.60938 23.9219V15.2852C7.60938 14.6523 7.92578 14.3594 8.54688 14.3594H19.9375C20.5703 14.3594 20.8633 14.6523 20.8633 15.2852V23.9219C20.8633 24.5547 20.5703 24.8594 19.9375 24.8594H8.54688ZM10.1758 18.2852H18.3203C18.7422 18.2852 19.0469 17.9688 19.0469 17.5469C19.0469 17.1484 18.7422 16.8438 18.3203 16.8438H10.1758C9.75391 16.8438 9.4375 17.1484 9.4375 17.5469C9.4375 17.9688 9.75391 18.2852 10.1758 18.2852ZM10.1758 22.375H18.3203C18.7422 22.375 19.0469 22.0586 19.0469 21.6602C19.0469 21.25 18.7422 20.9336 18.3203 20.9336H10.1758C9.75391 20.9336 9.4375 21.25 9.4375 21.6602C9.4375 22.0586 9.75391 22.375 10.1758 22.375Z" fill="white" />
    </mask>


    <rect width="28" height="28" fill="red" mask="url(#m)"/>
</svg>