SVG ViewBox Calculator
Calculate and scale SVG viewBox attribute values (minX, minY, width, height).
SVG ViewBox Calculator
viewBox="0 0 100 100"
About SVG ViewBox Calculator
The SVG ViewBox & Aspect Ratio Calculator calculates, scales, centers, and adjusts `viewBox="min-x min-y width height"` coordinates and `preserveAspectRatio` alignment rules (`meet`, `slice`, `none`) with interactive canvas scaling.
How to Use SVG ViewBox Calculator
Step 1
Paste your SVG code or upload an `.svg` file.
Step 2
Adjust viewBox boundaries and padding using interactive visual handles.
Step 3
Select your desired `preserveAspectRatio` mode.
Step 4
Click "Apply & Copy SVG".
Practical Use Cases for SVG ViewBox Calculator
Fixing Cropped or Off-Center SVG Icons
Recalculate and center bounding box coordinates for SVG icons where graphics are clipped or shifted off-canvas.
Scaling Coordinate Systems for Responsive SVGs
Transform high-coordinate SVGs (e.g. 0 0 1920 1080) into compact standard icon viewBox grids (0 0 24 24).
Input & Output Examples
Calculating Tight Bounding Box ViewBox
Element Bounds: MinX: 10, MinY: 15, MaxX: 90, MaxY: 95, Padding: 4px
viewBox="6 11 88 88" (Aspect Ratio: 1:1 Square)
Key Features & Performance
- ✓Calculates exact tight bounding box (`min-x`, `min-y`, `width`, `height`) with custom padding offsets.
- ✓Interactive visual canvas: drag viewBox frame boundaries over the vector artwork.
- ✓Configures `preserveAspectRatio` rules (`xMidYMid meet`, `xMinYMin meet`, `slice`, `none`).
- ✓100% Client-Side calculation.
- ✓1-Click Copy updated SVG code.
Key Terminology & Definitions
SVG `viewBox`
An SVG attribute specifying four numbers ($min_x, min_y, width, height$) defining the user coordinate system mapped to the viewport.
`preserveAspectRatio="xMidYMid meet"`
The default SVG scaling rule that scales the graphic uniformly to fit within the viewport while preserving its aspect ratio.