SVG Responsive
What SVG Responsive actually does
An SVG with width and height in pixels and no viewBox is a fixed-size graphic wearing a vector format. It will not scale with its container, and the usual symptom is a logo that stays small in a wide header or overflows on a phone. The fix is a viewBox describing the coordinate space, plus sizing that lets the element take its container's width. This derives the viewBox from the file's own declared dimensions, so the proportions are the ones the file was drawn at, and reports plainly when the dimensions are not numeric enough to derive anything.
How to use it
- Choose the SVG files that are refusing to scale.
- Run it; a viewBox is added when width and height are numeric.
- Check the result, which now sizes to its container in the preview.
- Download, or read the warning if the file could not be measured.
Useful for
- Fixing a logo that stays one size no matter how wide its header gets.
- Preparing an illustration to sit inside a fluid grid.
- Making an icon inherit its size from CSS rather than from the file.
Limits worth knowing
- A file whose width and height are percentages or missing cannot have a viewBox derived; the tool says so rather than inventing one.
- A file that already has a viewBox keeps it. Only the sizing attributes and style are adjusted.
- Nested SVG elements inside the document are not adjusted, only the root.
Questions people ask
What does a viewBox actually do?
It declares the coordinate space the drawing was made in, which is what lets the renderer map that drawing onto whatever size the element ends up being.
Why did it refuse my file?
Because its width and height were not plain numbers, so there was nothing to derive a coordinate space from. Setting a viewBox by guessing would crop or stretch the artwork.
Does this change the artwork?
No. It changes the root element's sizing attributes and adds a viewBox; the shapes are untouched.