HTML Academy · Lesson

SVG viewBox and Responsive Scaling

Make SVGs scale correctly on any screen size.

SVG viewBox and Responsive Scaling is a free HTML Academy lesson on CoddyKit — lesson 3 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the HTML Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

width and height vs viewBox

SVG width and height set the rendered size in the DOM. The viewBox attribute defines the internal coordinate space. These are independent: a viewBox of "0 0 100 100" with width="200" height="200" scales the coordinate space 2x.

viewBox Syntax

viewBox="min-x min-y width height". Most commonly: viewBox="0 0 100 100" defines a 100x100 coordinate space starting at origin. Coordinate values in the SVG refer to this space, not pixels.

Responsive SVG

For a responsive SVG, omit width and height attributes (or set them to 100%) and let the viewBox define proportions. Add CSS: svg { width: 100%; height: auto; }. The SVG scales to fit its container while maintaining aspect ratio.

preserveAspectRatio

preserveAspectRatio controls how the viewBox fits the SVG viewport when aspect ratios differ. Values: "xMidYMid meet" (default — letterbox), "xMidYMid slice" (crop to fill), "none" (stretch to fit without maintaining aspect ratio).

min-x and min-y for Panning

Changing min-x and min-y pans the visible portion of the SVG coordinate space. viewBox="50 50 100 100" shows the region from (50,50) to (150,150). This enables interactive panning by updating viewBox values with JavaScript.

Zooming with viewBox

Reduce viewBox dimensions to zoom in: viewBox="25 25 50 50" shows a smaller region, magnified to fill the SVG element. Increase dimensions to zoom out. Update viewBox on wheel events for interactive zoom without scaling the SVG element.

SVG in img vs inline

SVG in an img tag: scales responsively with object-fit but cannot be styled with CSS or scripted. Inline SVG: fully accessible to CSS and JavaScript, but adds HTML size. Choose based on interactivity needs.

Icon SVG Pattern

Icon SVGs use a fixed viewBox (e.g., "0 0 24 24") and no width/height, letting CSS size them: .icon { width: 1.5rem; height: 1.5rem; }. The viewBox ensures icons scale correctly at any size while maintaining crisp vector rendering.

Symbol for Icon Sprites

Define icons in <symbol viewBox="0 0 24 24"> elements inside a hidden SVG. Reference them: <use href="#icon-name">. Each use element can have its own width, height, fill, and color — one sprite file for all icons.

currentColor for Theming

SVG fill="currentColor" inherits the CSS color property from the element or its parent. Set color: red on the SVG or a parent and the icon fills red automatically. This enables single-color icons to follow text color without SVG-specific styling.

Debugging viewBox

If SVG content appears clipped or positioned unexpectedly, log or inspect the viewBox value. A common mistake: setting viewBox to pixel dimensions of the source art without adjusting for the rendered size, causing scaling issues. Verify viewBox matches the actual content bounds of the SVG art.

Knowledge Check

How do you make an SVG scale responsively to fit any container width?

Summary

The SVG viewBox defines an internal coordinate space independent of rendered pixel size, enabling responsive scaling. Setting width:100%; height:auto with a viewBox makes SVGs adapt to any container. The symbol+use sprite pattern, currentColor theming, and preserveAspectRatio control complete a toolkit for flexible, themeable SVG usage.

Frequently asked questions

Is the “SVG viewBox and Responsive Scaling” lesson free?

Yes — the full text of “SVG viewBox and Responsive Scaling” is free to read here on the web, and the HTML Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the HTML Academy course, upgrade to CoddyKit PRO.

What will I learn in “SVG viewBox and Responsive Scaling”?

Make SVGs scale correctly on any screen size. You practise HTML Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start HTML Academy?

No prior experience is required. HTML Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 3 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “SVG viewBox and Responsive Scaling” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this HTML Academy lesson?

Yes. Every HTML Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to HTML Academy