About This Tool
SVG ViewBox Calculator explains the relationship between internal coordinates and display size. Enter an existing viewBox to inspect its origin and dimensions, or enter four values to generate attributes without an SVG file.
How to Use
- Enter an existing viewBox, or read coordinates from an SVG file or source.
- Check the minimum X and Y values and the internal width and height.
- Adjust the coordinate range and optionally enter display dimensions to compare ratios.
- Copy the generated viewBox attribute and check that your graphic remains fully visible.
Features
- Supports positive and negative origins. Internal width and height must be greater than zero.
- Shows the aspect ratio; for example, 0 0 800 600 has a 4:3 ratio.
- Compares internal coordinates with display dimensions to show whether scaling is proportional.
Understanding the coordinate system
- The viewBox values are min-x, min-y, width, and height. The first two set the origin of the visible coordinate area; the last two set its dimensions.
- For example, -100 -50 200 100 starts at (-100, -50) and covers an area 200 units wide and 100 units high, with a 2:1 ratio.
- With a 400 × 300 display area and viewBox 0 0 800 600, each internal unit maps to 0.5 CSS pixels in both directions. When ratios differ, preserveAspectRatio determines the remaining space or cropping.
SVG Safety
Previews use a filtered static copy. Scripts, click events, animations, external images, fonts, and styles do not run or load. External references, embedded web pages, and unsupported content are removed, so the preview may differ from the original. Documents with a DOCTYPE or custom entities are not supported.
SVG files and UTF-8 source are limited to 2 MiB, 20,000 nodes including elements and text, and 96 nesting levels. Simplify files that are too large or complex before trying again.
Privacy
Your SVG stays in your browser and is never uploaded to a server.
Inputs and results are not saved automatically. Download anything you want to keep before clearing the tool or leaving the page, and keep a copy of your original.
FAQ
What do the four SVG viewBox numbers mean?
They are minimum X, minimum Y, internal width, and internal height, in that order. The origin can be negative, but width and height must be greater than zero.
What does viewBox="0 0 100 100" mean?
It describes a 100 × 100 area starting at (0, 0), with a 1:1 aspect ratio. The outer dimensions determine the displayed size in pixels.
How does viewBox relate to width and height?
viewBox defines internal coordinates; width and height define the display area. The browser maps one onto the other.
What is preserveAspectRatio?
It controls alignment and scaling when ratios differ. meet shows the whole graphic with possible empty space; slice fills the area with possible cropping; none scales each direction independently.