Adjust SVG viewBox, dimensions, and coordinate system with visual preview.
Every SVG carries two independent rectangles: width and height, which size the element on the page, and viewBox, which selects the slice of the drawing that fills it. This tool takes your markup, puts the viewBox, width, and height into editable fields, and redraws the artwork after every change so you can watch the coordinate window slide across the drawing. The detail most people get wrong: content outside the viewBox is not shrunk to fit, it is clipped entirely, which is exactly how a healthy SVG can render as an empty box.
A concrete input and expected output from the current implementation.
Input
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="50 50 100 100"> <rect x="0" y="0" width="40" height="40"/> </svg>
Expected output
The preview renders an empty 100x100 box. The viewBox '50 50 100 100' maps the user-coordinate window x 50-150, y 50-150 onto the full viewport, and the rect spans only x 0-40, y 0-40, entirely outside that window, so every pixel is clipped. With viewBox '0 0 100 100' the same rect occupies the top-left 40x40 pixels.
A viewBox names the rectangle of the drawing that fills the element; everything outside is cut, not compressed. The rect's bounds do not intersect the visible window, so nothing survives.
viewBox='min-x min-y width height' names a rectangle in the drawing's own coordinate space, and the element's width and height attributes form the viewport that rectangle is scaled into. Points inside the rectangle are visible; points outside are clipped, not compressed. Nonzero min-x or min-y slides the window across the artwork, which is why the picture moves while no shape coordinate changes.
The default mapping preserves the viewBox's proportions: the scale is the smaller of the two viewport-to-viewBox ratios and the drawing is centered, so a square viewBox inside a wide viewport leaves empty bands on the sides. Editing any field changes the mapping and the preview repaints immediately, showing the window shift or the bands appear. Everything runs locally in the browser tab; the markup is never uploaded.
The viewBox picks the part of the drawing the element shows, and anything outside is clipped. If every shape falls outside the window, the result is an empty box. Compare the viewBox bounds with your shapes' coordinates - under viewBox='50 50 100 100', a shape at x 0-40 is invisible. Lowering the origin or widening the window usually brings it back.
Not by itself. The default mapping scales uniformly and centers the result, so proportions hold and any mismatch shows as empty bands instead. Shapes only stretch when the element sets preserveAspectRatio to none, which the preview shows immediately. A viewBox that matches the viewport ratio is the safe way to fill the frame without stretching.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.