SVG Units Explained — px, em, %, User Units & Responsive Sizing
SVG supports many units — understand when to use px vs user units vs %, and which units make SVG responsive vs fixed-size.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG Attribute Units vs CSS Units
SVG presentation attributes (x, y, width, height on shapes) accept unitless numbers (user units), px, em, and %. CSS properties on SVG elements accept all CSS units. The SVG width/height attributes set the viewport in px or % of parent.
- Shape attributes: unitless = user units relative to viewBox
- width='50%': SVG viewport is 50% of parent container
- CSS on SVG element: all CSS units valid (em, rem, vw, etc.)
When to Use % vs User Units in SVG
Use unitless user units for coordinates inside the SVG (positions, sizes relative to viewBox). Use `%` for the SVG viewport width/height so it scales with its container. Use `em` for text sizes inside SVG to inherit page font-size.
- SVG viewport: width='100%' height='auto' for fluid SVG
- Shape sizes: unitless user units for viewBox-relative sizing
- SVG text: font-size='1em' inherits page font scale
Frequently Asked Questions
What unit should I use for SVG shape widths?
Use unitless numbers (user units) for shapes inside SVG — they're relative to the viewBox. This makes the SVG scale correctly regardless of the CSS display size.
What is the difference between SVG px and user units?
In SVG without a viewBox, 1px = 1 user unit. With a viewBox, user units map to the viewBox coordinate system, which may differ from CSS pixels. For scalable SVG, always use user units inside the SVG.
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