-
A while back, I made an open source package called simple-svg-placeholder. It’s only 36 lines long. The reason I made it was because similar libraries had a lot of features I didn't need. So I'm torn on whether or not to add a feature to it… github.com/cloudfour/simple-svg-placeholderPermalink On twitter.com
♻️ 1 Retweets
❤️ 1 Favorite
Mood -2 🙁
-
99% of the time, all I want the placeholder image to display are the dimensions or a short word or two ("avatar," "product," etc.). That's good, because SVG text elements don't wrap. Here's an example of text overflowing.Permalink On twitter.com
Mood +4 🙂
-
There's a placeholder image service (placeholders.dev) that uses the library, and one of their users wondered if text could wrap. Leading a developer to ask if this would be possible using the foreignObject element.Permalink On twitter.com
Mood +2 🙂
-
And it is possible! Here's an example of the same SVG placeholder as before, but with text wrapping. Pretty neat!On twitter.com
Mood +1 🙂
-
But there are caveats: This technique does not work in IE. Adding it as an option also increases the size of the source from 36 lines to 59, and the resultant SVGs from 300+ bytes to 550+.Permalink On twitter.com
Mood 0
-
So now I'm torn. 59 lines and 550+ bytes are still quite small, but is the use case prevalent enough to justify making simple SVG placeholders slightly more complicated?Permalink On twitter.com
Mood -2 🙁