3 ms·
I very recently rebuilt my website so that the entire UI is vector-based, mostly with SVGs (a few places with HTML entities). I also set it up to slurp the mini
by DamnInteresting 8y ago
I very recently rebuilt my website so that the entire UI is vector-based, mostly with SVGs (a few places with HTML entities). I also set it up to slurp the minimized SVGs into the top of the html, then I render each SVG on the page with the format:
<svg><use xlink:href="#svg-name" /></svg>
...rather than making a new HTTP connection for each image.
This dramatically reduced the number of HTTP connections to load the site. There's one initial connection for the html, one for the css, one for js, and one for fonts (Google Fonts). I do use JPEG for photos, but those are lazy-loaded, so the initial page paint is very snappy despite our wimpy server. And it looks crispy on all screen sizes (even in milk!).
Some have said that SVG on the web is dying, but it can work so beautifully that I hope the nay-sayers are mistaken.
- styfle 8y agoIt looks like that xlink syntax was deprecated in SVG 2 but it still works in most browsers. https://css-tricks.com/on-xlinkhref-being-deprecated-in-svg/ https://css-tricks.com/on-xlinkhref-being-deprecated-in-svg/
- DamnInteresting 8y agoI hadn't seen that, thanks. I hope that the browser makers wisely disregard this silly deprecation, but if they do not, I suppose I can modify my import function to use the altered syntax.
- ves 8y agomind linking your website? I’d like to see it, and there’s nothing suggestive in your bio.
- DamnInteresting 8y agoI wanted to avoid the impropriety of shameless self-promotion; but the URL is my username plus dot com.