SVG (Scalable Vector Graphics) is an XML-based way to describe shapes on a coordinate plane. A shape’s coordinates determine where it appears; the plane’s origin is (0, 0). You can write SVG directly or export it from a graphics program and edit the resulting file. section 3.2
Unlike PNG, JPEG, and GIF images, which use grids of pixels, SVG shapes can grow or shrink without becoming pixelated. Raster images remain a better practical choice for complex images such as photos. section 3.2
To build a row of bars for a responsive loading graphic:
- Place an <svg> element in the HTML and give it a viewBox so its contents resize with the available space. section 3.2.4
- Add <rect> elements with width, height, x, and y attributes. The x and y values position each rectangle’s top-left corner within the SVG. section 3.2.4
- Space eleven 60-unit-wide bars by increasing x by 65 each time, leaving a 5-unit gap. section 3.2.4
Listing 3.4 Eleven rectangles
<svg viewBox="0 0 710 300" width="100%" height="300">
<rect width="60" height="300" x="0" />
<rect width="60" height="300" x="65" />
<rect width="60" height="300" x="130" />
<rect width="60" height="300" x="195"/>
<rect width="60" height="300" x="260"/>
<rect width="60" height="300" x="325"/>
<rect width="60" height="300" x="390"/>
<rect width="60" height="300" x="455"/>
<rect width="60" height="300" x="520"/>
<rect width="60" height="300" x="585"/>
<rect width="60" height="300" x="650"/>
</svg>
The complete markup shows the viewBox and all eleven rectangle positions together. section 3.2.4
Inline SVG also lets page CSS target individual shapes—for example, applying a different fill color to each bar. An SVG loaded through <img> or CSS background-image can be sized from the page, but its individual shapes cannot be restyled there; their styles must live inside the SVG. Keep explanatory text alongside a loading graphic so assistive technologies can communicate what is happening. section 3.3 section 3.0
