Transparent JPG (With SVG)

4

bill 1 year ago | link

I was hoping they’d link to a static example, independent and separate from the article, but it looks like the example is taken directly from the site’s actual footer.

Here’s the DOM code, demonstrating the example:

<html>
<body>
    <div>
        <svg viewBox="0 0 921.17 1200" class="clip-path-svg">
            <defs>
                <clipPath id="chris-clip">
                    <path d="M35.16,873.71s-22.77-24.76-23-31,4-53,4-53,2.5-72.24,6-88,28-92,28-92v-5s-3.49-3.74-3-7,10.72-40.31,11-48,16.59-61.81,24-76,38.23-51.48,44-56a106,106,0,0,1,12-8s5-14.53,13-20,31-18,31-18,3.63-14.48,9-16,28-1,28-1,10.58-12.12,15-14,49-26,49-26l25-20v-17s-14.07-25.47-16-50c0,0-13.31-2.71-14-26s-9-37-9-37-1.91-12.86,3-18c5.36-5.61,11,7,11,7s-1.11-47.19,6-69,7.89-32.44,32-52,42.82-25.47,60-30,34.69-4.91,62,11,50.37,29,59,58,13.15,59.55,12,70,0,1,0,1v2s7.42-3.31,10,2,.59,10.36-2,16-2.7,23.45-3,26-3.06,28-5,31-5,7-5,7-4.35,29.82-8,34l5,17s13.78,1.83,23,8,10.49,3.59,15,8,17,14,17,14,8.59,1.21,15,7,11.39,9.37,15,9,16.72,5.89,23,10,22,13,22,13l9,5a25.68,25.68,0,0,1,18,4c8.52,5.88,27,24,27,24s14.16,11.38,17,15,62.22,72.75,69,88,0,1,0,1l14,29,20,37s6.62,6,7,9a58.39,58.39,0,0,0,2,8l5,6s4.77,0,5,7c0,0,4.38,7.62,7,10s4,8,4,8l-1,3s26.5,33.86,41,59,30,68.74,32,77,6,31,6,31l3,29s.44,28.62-4,33-58,38-58,38l-47,25s25.09,24.56,29,36,5,16,5,16l2,11s5.72,17.29,4,23-6.1,14.79-6,18,2,18,2,18v29s-2.29,27.86-2,33,1,66,1,66l-2,109s.31,23.39,3,35,4,50,4,50l4,43-855,30s-2.61-46.15,0-63,9-53,9-53l5-15-2-115s2.39-56.82,5-70l2-29-1-13a68.41,68.41,0,0,1-3-16c-.33-7.88-.15-17.89,2-26s16-34,16-34-3.46-12.2-3-16a52,52,0,0,1,2-10c.71-1.72,15-31,15-31l8-17Z"></path>
                    <path d="M669.16,806.71s-.93-30.56-3-39-12.58-17.52-10-30,3.83-30.23,4-33-1-12.42,0-18,10-26,10-26,7.33,18.68,10,23,10,13,10,13l7,16s26.08,37.28,36,44,1,1,1,1l1,3S679.45,794.69,669.16,806.71Z"></path>
                </clipPath>
            </defs>
            <image xlink:href="https://cdn.css-tricks.com/wp-content/themes/CSS-Tricks-16/images/chris-footer.jpg" x="0" y="0" clip-path="url(#chris-clip)" width="922" height="1410">
            </image>
        </svg>
    </div>
</body>
</html>

It’s visible below the article, but I think it’s helpful to be able to tweak a copy locally, when trying it out.

3

hawski 1 year ago | link

That’s nice. I actually would like to see more adoption of SVG and especially inline SVG. I’m not a webdev so maybe I miss fine print. It certainly can be used for diagrams or explanatory images and tables that are often included as some kind of image on a blog post or in an article. Often times this images are in some small box that you have click through, have a crappy resolution or are just too big. SVG should be a good remedy.

4

flyingfisch 1 year ago | link

The only fine print I’m aware of is that in the past SVG was advised against due to compatibility with older browsers. This is no longer an issue so we’re seeing a lot more SVG use now.