Paste any SVG and reshape its viewBox and preserveAspectRatio live. Auto-fit to the drawing's bounding box, crop with the four number fields, and toggle each of the nine align keywords with meet or slice to see exactly which pixels the container keeps and which it letterboxes.
meet = scale the drawing until it fits entirely inside the viewport (may leave bars). slice = scale until it fills the viewport (may crop). none = ignore aspect ratio and stretch to fill. Align controls which edge or corner anchors the residual space.
viewBox="min-x min-y width height" defines the user-space rectangle that maps onto the SVG's own width / height (or its rendered container). The four numbers are in user units, not pixels — SVG scales the coordinate system so those user units fit the viewport. Shrinking width and height zooms in; moving min-x and min-y pans.
When the viewBox's aspect ratio doesn't match the viewport's, preserveAspectRatio decides what to do. It takes two tokens: one of the nine align keywords (xMin/xMid/xMax × YMin/YMid/YMax) plus meet (letterbox) or slice (crop). The special value none stretches the image to fill the viewport and drops the second token.
Common uses: Fit-to-bbox removes empty padding around a drawing. Crop zooms in on a region by shrinking width/height. Icon symbol defs typically use xMidYMid meet so the icon centers and never distorts. Backgrounds often use xMidYMid slice to always cover the viewport. Every <svg> can override its parent's setting on nested <svg>, <symbol>, <image>, <pattern>, <marker>, and <view> elements.