Put it to work
Paste an SVG icon, set width to 48 and color to #b6ebbd, then download it.
From input to output
- Open SVG studio and load the example.
- Read the format notes, choose your options, and replace the example with your input. Start with test data instead of sensitive information.
- Run the tool and inspect the result and status. If an error appears, correct the input format and run it again.
- Copy the output or download a file. Generated and converted results are not saved automatically.
The difference between viewBox and display size
viewBox defines the drawing’s coordinate system; width and height define its display size. An icon drawn in a 24×24 coordinate system scales with its shapes when displayed at 48 px. This studio uses a narrow allowlist focused on shapes and paths, removing scripts, embedded HTML, and external images. It is not a general-purpose vector editor that preserves every advanced feature. Inspect both preview and code before exporting.
Example input
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <circle cx="12" cy="12" r="8" fill="#b6ebbd"/> </svg>
Reading the result
Display size: width="48" height="48" Coordinate system: viewBox="0 0 24 24"
Details that matter
Format and meaning
Preview uses an inert image. Scripts, event handlers, and external references are removed.
Using it correctly
Inspect the result after optimization. Some advanced filters and font features are unsupported.
Common pitfalls
JSX conversion translates attribute names from a security-filtered SVG.
Supported scope and limits
500 KB, up to 3,000 elements; shapes, paths, and gradients supported
Split inputs that exceed the limit. If a format or algorithm is unsupported, choose a tool that matches your requirements instead of silently changing the format.
What happens to your data?
Tools run in your browser. DNS lookup sends the queried domain to the named external provider. Ads may appear on home, guide, and workspace pages according to settings.
Open tool