SVG viewBox vs width/height
These attributes serve different, complementary roles — confusing them is one of the most common sources of unexpected SVG scaling behavior.
Drop your image here
Supports PNG, JPG, WEBP up to 5MB
What Each Attribute Actually Controls
`width` and `height` on the root `<svg>` element set the actual rendered display size (in CSS pixels or other units) — `viewBox="minX minY width height"` defines the internal coordinate system that content is drawn in, and how that internal coordinate space maps onto the rendered width/height determines the final scaling.
- width/height set the actual rendered display dimensions
- viewBox defines the internal coordinate system content is drawn within
- The mapping between these two determines the effective content scaling
Common Combinations and Their Effects
Setting only `viewBox` (omitting width/height) lets the SVG scale responsively to fill its CSS-styled container — setting both viewBox and width/height gives explicit intrinsic dimensions while still allowing responsive CSS overrides — omitting viewBox entirely means content uses literal pixel coordinates with no scaling flexibility at all.
- viewBox alone (no width/height) enables fully responsive CSS-driven sizing
- Both together provide intrinsic dimensions plus responsive override capability
- No viewBox means literal, non-scaling pixel-based coordinates
Frequently Asked Questions
Should I always include a viewBox in my SVG files?
Yes, in almost all cases — a viewBox is what enables an SVG to scale responsively via CSS; without it, the SVG's coordinate system is rigidly tied to its literal pixel dimensions, defeating much of vector graphics' scaling advantage.
Why does my SVG ignore the width and height I set in CSS?
Check whether width/height attributes are also hardcoded directly on the SVG element itself — inline attributes can sometimes take precedence depending on context, and removing them in favor of CSS-only sizing (with a viewBox present) usually resolves this.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG