IT博客汇 | Generate SVG Skeleton of a Web Page

Generate SVG Skeleton of a Web Page

Lynan发表于 2024-02-22 09:40:37

XHR and its related features have been commonly used in recent decades. Since then, more and more Web sites now represent as Web Apps. To improve user experience with progressive loading, many Apps use skeleton screen to ease the feelings of unknown, rather than serve a blank white screen while waiting.

What is a Skeleton Screen

It’s the gray shapes shown while the data is loading from the server instead of displaying a classical spinner. —-^What is a skeleton screen 💀?

⬆️ Look at This ⬆️

What for

Look at this comparison, UI with skeleton seems to have less reflow which I think is more comforting.

This image referred from ^What is a skeleton screen 💀?

Types of Skeletons

Element + CSS

Check https://freefrontend.com/css-skeleton-loadings/

Image(non-SVG)

Just a different type of image representation depends on what your designers gave. Used as background image or source of an image element.

SVG

The Structure of a SVG file is very similar to a HTML file because they both are XML-based file format. Also, a SVG file can be rendered directyly in a HTML without using <img> or background-image CSS.

html

<!DOCTYPE html>
<html lang="en">
  <body>
    <div></div>
  </body>
</html>

svg

1
2
3

<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
  <rect x="10" y="10" width="10" height="10" />
</svg>

How to Generate SVG from HTML

Full code in https://github.com/LynanBreeze/web-skeleton-generator

Foreach HTML DOM tree nodes, from top to bottom, collect sizes and positions
Add rect node to SVG File when DOM node is a leaf node or it’s has background color
Wrap these rect nodes in a <svg> tag
Done~

Visualized process looks like this ⬇️: