Padding added (each side)
--
Free · Instant · No signup
SVG viewBox Calculator
SVG viewBox Calculator generates a viewBox attribute string with padding added around your content bounds. Adds padding (a percent of the larger content dimension) on all sides, then reports viewBox="x y width height" plus the resulting aspect ratio.
Page updated 2026-09-14.
Calculator
Live preview
Calculated Results
What this generates
This page generates a viewBox attribute string with padding added around your content bounds. Adds padding (a percent of the larger content dimension) on all sides, then reports viewBox="x y width height" plus the resulting aspect ratio.
Change the fields above and the output updates live -- copy it once you're happy with the result.
Related tools
See the SVG Pattern Background Generator for a related effect.
Frequently Asked Questions (FAQ)
What does this generator actually output?
It generates a viewBox attribute string with padding added around your content bounds. Adds padding (a percent of the larger content dimension) on all sides, then reports viewBox="x y width height" plus the resulting aspect ratio.
Does this send anything to a server?
No. The snippet is built in your browser from the fields you fill in. Nothing is uploaded, logged, or sent anywhere.
Can I use this output directly in production CSS?
Yes -- copy the output into your stylesheet or component. Adjust class names and selectors to match your project's naming, since the generated selectors are generic placeholders.
You might also need
-
Batch Color Contrast Checker Score many fg|bg hex pairs for WCAG 2.1 AA/AAA. The single-pair contrast page is a different tool. -
App Store Screenshot Resizer & Device Frame Builder Target screenshot pixels for a chosen store device frame from a source aspect. -
PNG Size Reducer Redraw a PNG at a smaller pixel scale and re-encode. -
HEX to RGB / RGBA Code Converter Turn a hex color plus alpha into rgb() and rgba() CSS, focused on copy-ready declarations.