SVG Text Mask
hello there i wanted to use a mask for my title but mask is kinda heavy like 450kb, when i use it for text mu whole website becomes laggy, perhaps is there any better way to apply mask for text (i'll use it for dynamic pages so i cant just export it like an image) i can also send a mask if that'll help
13 Replies
i know that mask is complicated my designer trying to simplify it, but i didnt think that just mask can turn whole website into lagging
Have you tried converting the SVG to PNG? The primary advantage of SVG is infinite scalability without loss of detail, but this kind of effect doesn't need that.
Can't you just make a SVG mask vs css? Makes life a lot easier?
You can make it smol and scale it up in css, also use Svgomg to smooosh it https://jakearchibald.github.io/svgomg/
SVGOMG - SVGO's Missing GUI
Easy & visual compression of SVG images.
Best of we had a demo vs pasted code, you can inline the SVG to share it
But it's a h1 π₯²
I didn't see that either but could just aria label it either way
you mean still applying mask but jpg format
as you can see its kinda hard mask
It may be more efficient.
will try
that makes way more sense, my no caffeinated mind was thinking you meant just make the whole thing a jpg xD
Okay
I was wondering why you thought the H1 made any difference to using a mask. I even did my own test just in case there was some weird exception I didn't know about and I found that it did work. I didn't say anything because I wasn't in the mood to debate a weird assertion that was clearly wrong.
I mean to be fair they had to clarify too otherwise I wouldn't have made the connection π₯²
i did small piece of it in webp
and repeated it in mask
thanks a lot