SVG ViewBox Normalizer
Crop whitespace and transform path coordinates to origin
Input SVG
Output SVG
Processing Options
What This Tool Does
SVGFix properly normalizes SVG files by not just adjusting the viewBox attribute, but
actually translating path coordinates so everything genuinely starts at 0 0.
This solves real-world issues when converting SVGs to PNG or using them in icon systems.
The tool performs a 5-step process: Parse (extract viewBox and paths), Calculate Bounds (find content bounding box), Crop (remove whitespace), Transform (translate coordinates to origin), and Optimize (reduce file size).
Why You Need This
- SVGs exported from design tools often have offset viewBox coordinates
- Converting to PNG crops incorrectly when viewBox doesn't start at 0,0
- Icon systems expect normalized coordinates for proper rendering
- Other tools only adjust viewBox without transforming actual path data
- Embedding SVGs in applications can fail with non-normalized viewBox
Frequently Asked Questions
What is viewBox in SVG?
The viewBox attribute defines the coordinate system and visible area of an SVG. It specifies the minimum x and y coordinates, followed by width and height. For example, viewBox="50 50 100 100" means the SVG content starts at (50, 50) with dimensions 100x100.
Why don't other crop tools fix my SVG?
Most SVG crop tools only adjust the viewBox attribute without transforming the actual path coordinates. This means the paths still reference the old coordinate system, causing rendering issues. SVGFix genuinely transforms the path data to match the new viewBox.
Is my SVG uploaded to a server?
No! All SVG processing happens entirely in your browser using JavaScript. Your files never leave your computer, making this tool completely private and secure.
How do I use this with Figma/Illustrator?
Export your design as SVG from Figma or Illustrator, then upload or paste it into SVGFix. The tool will normalize the coordinates and remove any offset viewBox issues common in design tool exports.
Can I process multiple files at once?
Version 1.0 supports single file processing. Batch processing may be added in a future update based on user demand.
Technical Details
SVGFix uses svg-path-commander for accurate
path transformations and bounding box calculations. All processing happens client-side using pure JavaScript,
ensuring your files never leave your browser.
The tool supports all SVG path commands including lines, curves, arcs, and complex shapes. Optional SVGO optimization reduces file size while preserving visual quality.