Viewport

As explained in Tiny CSS Projects

A browser viewport is the visible rectangular area through which a web page is rendered.

An SVG viewport is the visible rectangular frame through which a graphic is seen. The width and height attributes set the frame’s size, but they do not change the graphic inside it. If the graphic is larger than the frame, it overflows. The viewport’s origin is its top-left corner. section 3.2.2

A responsive loader can use width="100%" so its SVG fills the available width of its parent. If the loader sits inside a section capped at 800 pixels, it grows with that section until the cap is reached. The viewport controls the available frame; the viewBox controls how the graphic fits inside it. section 3.2.2

Use the viewport and viewBox for different jobs:

• Set width and height to define the visible SVG frame. section 3.2.2
• Set viewBox="min-x min-y width height" to position and scale the graphic within that frame. section 3.2.3
• Match viewport and viewBox dimensions when the graphic should fit without zooming. section 3.2.3

Responsive scanning loader

Start with <svg width="100%" height="300px"></svg> inside a section. The SVG occupies the section’s available width while keeping a 300-pixel-high frame. Adding viewBox="0 0 710 300" gives the loader’s bars a 710-by-300 coordinate space, allowing the graphic to scale with its container. section 3.2.2 section 3.2.3

Figure 3.4 SVGs with and without a defined viewport

Compare SVGs with and without a defined viewport to see how the visible frame changes. section 3.2.2

How Tiny CSS Projects covers it

How deep it goes

Defines frame sizing and overflow, then distinguishes viewport dimensions from viewBox positioning and scaling.

Examples

Uses a scanning loader, a 100-percent-wide SVG, a 300-pixel frame, and a 710-by-300 viewBox.

What it assumes

Assumes basic HTML and CSS, while introducing SVG frames, parent sizing, and viewBox coordinates.

What you can do after

Apply via SVG width and height attributes to create a responsive frame for contained graphics.

How it connects

Connects SVG, viewBox, CSS positioning, responsive design, and max-width layout.

liveBookmanning.com

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

Also explained in

• 

  liveBookmanning.com
  Math for Web DesignThe viewport is the visible area of a browser window in which a web page is rendered.
• 

  liveBookmanning.com
  CSS in Depth, Second EditionA viewport is the framed area of a browser window in which a web page is visible, excluding browser interface controls.

Compare how 3 books explain viewport →

Related concepts

• fixed positioningused by · Fixed positioning is a CSS positioning mode that removes an element from normal flow and positions it relative to the viewport or an established containing block during scrolling.
• getBoundingClientRectused by · getBoundingClientRect is a DOM method that returns an element's size and position relative to the viewport.
• viewport unitused by · The CSS vw unit is a viewport-relative length equal to one percent of the viewport width.
• media queryused by · A media query is a CSS conditional rule that applies styles when specified media types or presentation-environment features match.
• clientXmeasured by · clientX is a MouseEvent or Touch property giving a contact's horizontal position relative to the browser viewport.

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.