Viewbox attribute

As explained in Tiny CSS Projects

The SVG viewBox attribute defines the position and dimensions of an SVG graphic's internal coordinate system and maps it to the viewport.

An SVG has a viewport—the visible frame—and a viewBox—the coordinate space inside that frame. The viewBox positions and scales the graphic so a responsive loader can grow or shrink with its container. section 3.2.2 section 3.2.3

Set the attribute with four values:

• Use viewBox="min-x min-y width height". section 3.2.3
• Set min-x and min-y to 0 to place the graphic's top-left corner at the viewport's top-left corner. section 3.2.3
• Choose width and height to contain the internal graphic; smaller viewBox dimensions zoom out, while larger dimensions zoom in. section 3.2.3

Responsive loading bars

For eleven bars that are each 60 units wide, separated by ten 5-unit gaps, use a 710-unit-wide coordinate space and a 300-unit height: <svg viewBox="0 0 710 300" width="100%" height="300px">. As the window changes size, the bars shrink or grow within the available width without becoming skewed. section 3.2.3 section 3.2.4

Figure 3.4 SVGs with and without a defined viewport

Compare SVGs with and without a defined viewport to see how the frame affects the graphic before adjusting its internal coordinate space. section 3.2.2

How Tiny CSS Projects covers it

How deep it goes

Explains syntax, coordinate positioning, dimension calculations, zoom behavior, and responsive resizing through a worked loader.

Examples

Demonstrates an animated loading screen containing eleven evenly spaced SVG rectangles.

What it assumes

Assumes an SVG viewport and basic shape dimensions, while teaching viewBox positioning and scaling from concrete values.

What you can do after

Build a responsive SVG graphic by choosing coordinate-space dimensions and applying a viewBox attribute.

How it connects

Links SVG viewBox to the SVG viewport, SVG coordinate systems, responsive design, and rectangle elements.

liveBookmanning.com

Read Tiny CSS Projects on liveBook Get the book at manning.com

Also explained in

• 

  liveBookmanning.com
  D3.js in Action, Third EditionThe viewBox attribute defines the coordinate-system origin, width, and height used to map SVG content into its viewport.

Compare how 2 books explain viewbox attribute →

Related concepts

• responsive SVGconfigures · A responsive SVG is an SVG graphic whose rendered size adapts to its containing element while preserving its intended coordinate relationships and aspect ratio.
• SVGconfigures · SVG, or Scalable Vector Graphics, is an XML-based standard and file format for describing scalable, resolution-independent two-dimensional vector graphics.
• viewportconfigures · A viewport is the visible region through which a browser or graphical interface displays a document or content.
• responsive data visualizationconfigures · A responsive data visualization adapts its layout or presentation to different screen sizes and interaction contexts.
• loading indicatorconfigures · A loading indicator is a user-interface element that signals an ongoing operation, such as loading, initialization, or data retrieval.
• Rectangleused by · A rectangle is a planar quadrilateral with four right angles and opposite sides of equal length.

This explainer was generated by Manning's knowledge graph from the text of Tiny CSS Projects. The section links point to the parts of the book it draws on.