Paste your SVG markup — missing or broken viewBox will be auto-repaired.
Ready to repair
Paste SVG and click Fix ViewBox// repair missing or incorrect viewBox for scalable SVG output
Fix missing or incorrect viewBox attributes in SVG files instantly. Repair scalable SVG output with auto-detected dimensions and clean viewBox settings.
Ready to repair
Paste SVG and click Fix ViewBoxCopy your SVG markup and paste it into the input area on the left.
Optionally set a custom viewBox, choose preserveAspectRatio, or enable responsive mode by removing width/height.
Click "Fix ViewBox" to repair. Review the diagnostics, then copy or download the fixed SVG.
The SVG viewBox attribute defines the internal coordinate system of an SVG, enabling it to scale correctly at any size. Without it — or with an incorrect value — SVGs appear clipped, distorted, or fail to scale at all. This tool automatically detects and repairs these issues.
The most common cause is a missing or incorrect viewBox attribute. Without it, the browser has no internal coordinate reference, so the SVG won't scale when its container resizes. This tool adds or corrects the viewBox automatically.
The four values are: min-x, min-y, width, and height. 0 0 200 200 means the coordinate system starts at the top-left (0,0) and spans 200 units wide and 200 units tall. The SVG will scale to fill any container while maintaining this proportion.
For icons and inline SVGs that need to be fully responsive (controlled by CSS), yes — removing width and height and relying solely on viewBox is the recommended approach. For standalone SVG files with a fixed intended size, keeping them is fine.
This attribute controls how the SVG scales when the aspect ratio of the container doesn't match the viewBox. xMidYMid meet (the default) centers the SVG and scales it to fit without cropping. xMidYMid slice fills the container and may crop. none stretches the SVG to fill exactly.
This usually means the viewBox dimensions don't match the actual content bounds. If your content extends to 300×150 but the viewBox is "0 0 100 100", content outside 100×100 will be clipped. Use the auto-detect feature or set a custom viewBox that covers all your content.
Yes. The tool operates entirely server-side with no external calls. Script tags and event handlers are stripped for safety. The fixed SVG output is clean, standards-compliant XML. Always review the diagnostics panel to understand every change made.
Use the "Custom ViewBox" field to enter your own values in the format minX minY width height. This overrides auto-detection entirely. You can find the correct bounds in your design tool (Figma's "Selection" panel shows x, y, width, height).
Yes — SMIL animations, CSS animations, and structural SVG markup are all preserved. Only inline JavaScript event handlers (e.g. onclick) and <script> tags are removed for security. The viewBox fix does not affect animation timing or paths.
The viewBox attribute is one of the most important — and most misunderstood — parts of working with SVG files. It defines the internal coordinate space of the SVG: the position of the origin, and the width and height of the visible area in user units. Without a correctly set viewBox, an SVG file is essentially broken for any use case involving responsive scaling.
Unlike width and height, which set the physical rendered size of the SVG element, the viewBox is about the internal canvas. Think of width/height as the frame and viewBox as what's painted inside it. When these are aligned, your SVG scales perfectly at any resolution — from a 16px favicon to a full-page hero illustration.
💡 Looking for premium CSS templates and UI kits with well-crafted SVG assets? MonsterONE offers unlimited downloads of templates, UI kits, and design assets — worth checking out.
SVG files exported from design tools like Figma, Adobe Illustrator, or Sketch often include width and height attributes but omit the viewBox. When you embed such an SVG in HTML and try to control its size via CSS, the results are unpredictable: the SVG may appear at a fixed size regardless of the container, it may be cropped, or it may not scale at all.
Here's why: when a browser encounters an SVG with no viewBox, it has no coordinate reference for scaling. It renders the SVG at the declared width and height — and stops there. Setting width: 100% in CSS changes the container size but the internal content stays fixed. Adding viewBox="0 0 200 200" (matching the original width and height) gives the browser a scaling map. Now the SVG's content is tied to a coordinate system that can be proportionally resized to any dimension.
There are several types of viewBox issues this tool detects and repairs:
viewBox="200x200" or viewBox="auto" are invalid and will cause the SVG to ignore the attribute.xmlns="http://www.w3.org/2000/svg" is required for SVGs to render correctly in all contexts, including as standalone files and in HTML5 documents.The standard technique for fully responsive SVGs is simple: add a viewBox that matches the original dimensions, then remove the width and height attributes. With no fixed size declared, the SVG element will fill its container, and the viewBox will handle proportional scaling internally.
This is especially important for icon systems, logo SVGs, and any SVG used across multiple breakpoints. A single SVG file with a correct viewBox will render crisply at 20px in a navigation bar and 400px in a hero section — no separate files or media queries needed.
/* Before: fixed size, won't scale */
<svg width="200" height="200">
/* After: responsive, scales to any container */
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">Once you have a viewBox, preserveAspectRatio controls what happens when the container aspect ratio doesn't match the viewBox aspect ratio. The default value xMidYMid meet centers the SVG and scales it uniformly to fit entirely within the container — similar to CSS object-fit: contain.
Other useful values include xMidYMid slice (fills the container and crops, like object-fit: cover) and none (stretches non-uniformly to fill exactly, distorting the content). For most icon use cases, the default xMidYMid meet is correct and can be omitted.
Figma exports SVGs with a viewBox by default when using the "Copy as SVG" option or the export panel. However, if you copy elements individually or use certain plugins, the viewBox may be missing or offset. Illustrator's SVG export has historically been inconsistent — older versions often omit the viewBox or include it with incorrect values for artboards that have been moved.
Inkscape generally produces valid SVGs with correct viewBox values, though its internal coordinate system uses a flipped Y-axis in older versions, which can produce unexpected values like viewBox="0 -800 800 800". This tool preserves such values if they're technically valid, but warns you about unusual patterns.
When this tool encounters an SVG without a viewBox, it first looks for explicit width and height attributes on the root <svg> element. If found, it uses those values directly: a width="400" and height="300" become viewBox="0 0 400 300".
If no width and height are present, the tool scans the SVG's content elements — rectangles, circles, ellipses, images, and other shapes — and estimates the bounding box from their coordinate attributes. This is a heuristic and works well for simple shapes, but complex paths or transformed elements may require manual adjustment via the custom viewBox field.
xmlns="http://www.w3.org/2000/svg" for standalone SVG files.aria-label or <title> inside SVGs for accessibility.