The time I designed an icon for a small open-source tool, I spent two full days on one shape: a rounded square plus an arc on a 24x24 grid. The source was an SVG and I was happy with it, then delivery began. The mini program dashboard would not accept SVG, the app icon had to be a 1024x1024 bitmap, the web manifest wanted 192 and 512, and the logo in the docs was yet another size. Worst of all, the first 32 px export lost that 1 px arc completely and looked like a box with a missing corner. Rasterizing is not just changing the file extension.
1. What happens between vector and bitmap
An SVG stores paths, stroke widths and colors, and the browser recalculates all of it at whatever size it is displayed. A bitmap stores a color value for every pixel. The formal name for the conversion is rasterization: cut the width and height you specify into a grid and work out the color of each cell. So how sharp the output looks depends on the two numbers you type, not on whether the SVG viewBox is 24 or 2400.
| SVG (vector) | PNG / JPG / WebP (bitmap) | |
|---|---|---|
| Scaling up | Paths are recalculated, edges stay clean | Pixels are interpolated, so it blurs or shows jaggies |
| File size | A simple shape like an icon is usually a few KB | Grows with the number of pixels |
| Who accepts it | Browsers, design software | Platform upload slots, system icons, almost everywhere |
| Transparency | Yes | PNG yes; JPG has no alpha channel and fills with white |
| Editable shape | Change the code and it changes | Only by redrawing |
2. The sizes I ended up delivering for this icon
- 1024x1024 PNG: the master, no rounded corners, with padding of 10% of the artwork width on every side.
- 512x512 and 192x192 PNG: the two sizes the web manifest asks for.
- 64x64 and 32x32 PNG: site tab icon and small images embedded in documents.
- 1200x630 WebP: the background for social share cards, exported at quality 90%.
I built that list by checking every line against the dashboard hints. Rules change, so I verify it again before each delivery instead of trusting memory.
As for the arc that vanished at 32 px, my later fix was to export large first, then scale down: render 128x128, then shrink it to 32 in my own image editor. The reason is that a 1 px stroke in the SVG lands on a 32 px output grid without even filling one pixel, so rasterization can only flatten it.
3. The workflow I actually use for one file
- First confirm the render in SVG Preview. Some SVGs rely on external fonts, CSS variables or
foreignObject; the source looks fine but nothing shows in the browser, and this step catches that early. - Drop the file into SVG Converter, pick the output format and enter the target width and height. With proportional scaling checked, type one number and let the other be calculated, so a circle does not turn into an ellipse.
- Always PNG for icons, because they need a transparent background; JPG for photo assets; WebP when you want to save bytes on the web. The quality slider from 10% to 100% only matters for JPG and WebP.
- Download it and zoom to 400% in the system image viewer to inspect the edges, then actually drop it into the place where it will be used and take a screenshot, for example a browser tab or a share card in a chat window, to confirm it is still recognizable at the real size.
4. The pitfalls that keep coming back
- Entering too small a size: the viewBox is 24, so you casually type 24 in the output box and get a 24 px image, which becomes a mosaic at 1024. Enter the pixels the location really needs, not the logical size of the source file.
- Wanting a transparent background in JPG: JPG has no alpha channel and fills transparent areas with white. No checkbox in the converter can change that.
- Colors that do not match the design: gradients and filters in SVG depend on the browser renderer, so some values come out slightly different from design software. My rule is to adjust the SVG based on the exported bitmap rather than exporting over and over.
- Having only a bitmap and wanting vector: that is the opposite direction and requires tracing. The paths you get are an approximation, so do not expect an exact copy of the original.
- Delivering many sizes at once: I convert them one at a time and check size and transparency after each one, because the settings differ between sizes anyway.
5. How I decide the export size
My rule fits in one sentence: start from how large the image really appears in that spot, multiply by 2, then round up to a common tier. The factor of 2 is for high density screens, and rounding up is because platform dashboards often accept only a few fixed sizes. For this delivery I entered these numbers:
| Place it is used | Approximate size on screen | Size I exported | Format and transparency |
|---|---|---|---|
| Browser tab | 16x16 | 32x32, plus a spare 64x64 | PNG, transparent |
| Desktop shortcut | 48-72dp | 192x192 | PNG, transparent |
| App dashboard icon slot | about 150-170 | 1024x1024 | PNG, 10% padding |
| Chat share card | about 600x315 | 1200x630 | WebP, quality 90% |
| Brand mark in documents | 24-32 high | 64x64 | PNG, transparent |
The column most often overlooked in that table is padding. When the artwork fills the whole canvas, the automatic rounded mask applied by the system cuts off its edges. My icon sat too close to the edge the first time and lost two endpoints of the arc at the 192 size.
6. Common questions
Q: Does SVG to PNG lose quality?
Not if the output size is large enough. Almost all loss comes from a size smaller than the place where the image is used, or from 1 px detail in the source that gets flattened on a small grid.
Q: Which format should I choose for a transparent background?
PNG. JPG has no transparency and fills with white. WebP supports transparency and is smaller at the same quality, but check that the receiving dashboard accepts WebP.
Q: Does the quality slider affect PNG?
In my tests it affects JPG and WebP. Whether PNG is lossy or lossless is decided by the format itself, so when I export PNG I only change the size, never the quality.
Q: Why does my exported image have a white fringe?
Usually antialiasing: the semi-transparent pixels along path edges show as a pale ring on a dark background. I export a transparent PNG, look at it in the place where it will be used, and if the fringe is obvious I pull the outer outline of the artwork inward slightly.
Q: Is the SVG uploaded?
No, the conversion runs locally in the browser. When I make icons for unreleased projects, this is the criterion that decides whether I can use a tool at all.
After that day I changed my delivery habit: along with the SVG source, an icon now always ships with a table of size, format and transparency for every place it is used. The conversion itself is just one round of typing numbers; that table is what actually saves time.