Preface: In this article I’m assuming you’re already familiar with SVG. If not, now’s a great time to familiarise yourself! The power of SVG is truly amazing.
More than likely you’ve found yourself in this situation… You get handed a design, it’s beautiful and full of color and images.
The designer then informs you that the hero banner has text that changes and so does the background color.
Here’s what that hero banner may look like (though likely far better designed, but hey, it gets the point across):
Ok, no problem, that means we can’t just use a background image and be done with it, we need to break the hero up into piece so portions of it can be dynamic.
Usually you’d reach to a PNG for the ice cream cone image. But, PNGs are usually pretty big, especially once we start catering to high DPI screens. Our ice cream as a PNG would clock in at a whopping 1.9mb! So instead, we’re going to use a trick with SVG masks.
Jpg (left) 292kb, 8-bit PNG (right) 17kb
First, we’re going to save our ice cream as a jpg. I’ll use a black background in place of the transparency.
Next, we’ll save another image as an 8-bit png to use as the mask image. Any part that is black will be invisible and any part that is white will be visible.
Those 2 images we’ll then use together in our SVG like this: