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, BMP, 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