SVG
PNG
PNG
ЗАГРУЗИТЬ
ФАЙЛ
Ожидание файла...
Превью
Ожидание файла...
Tool guide
PNG is the straightforward way to take a vector into pixels and lose nothing on the trip. The compression is lossless, so the boundary between two fills stays clean at any multiplier, and the alpha channel survives the export intact. Hence where it belongs: interface icons, logos that will land on a background nobody has decided yet, assets for a deck. There is exactly one price — the same drawing weighs noticeably more as PNG than as JPG. See also: the same vector as JPG when weight matters, the way back: trace a PNG into vector, build a favicon from the finished PNG.
Yes, as long as the «Transparent background» checkbox is ticked, and it is ticked from the start. The alpha channel is carried across as is, so the logo will sit on a dark site header, on a photograph or on a coloured panel without a box around it. Clear the checkbox and white goes underneath instead — handy when the file is headed for print or for a document, where transparency would turn white anyway, just outside your control.
Two things. It stores transparency, which JPG has no concept of. And it compresses losslessly, so no halo of light and dark speckles forms along the boundaries between fills — JPEG's particular weakness on vector art with hard edges. The flip side is weight: a logo as PNG can easily come out three times heavier than the same logo as JPG. For a photographic illustration inside the SVG, the choice runs the other way.
Start from the slot the image will live in and multiply by the screen density. A 24 px icon in the mock-up wants a 48 px file for retina; a 48 px button wants 96 px. Going bigger just in case is counterproductive: the browser will scale the raster down on the fly and eat some of the sharpness you were after. The SVG's own dimensions do not enter into it — for a vector they are nominal.
Because your SVG carries neither a width nor a height nor a viewBox — the file has no way to state its own size. The page takes 512 px as a sensible middle and says so in the status line, so the number is not a mystery. Type the width you want into the field and the picture is redrawn to it.
There is a reference to an outside resource inside the vector: a downloaded font, or a raster pulled in from another address. Because of it the browser marks the canvas unsafe and will not release a finished image from it. That is the browser's own restriction and the page cannot work around it. Make the SVG self-contained — font to outlines, image to a data URI — and try again.
Nowhere outside your tab. Parsing the SVG, drawing it on the canvas and assembling the PNG are all done by the page's own script, and nothing about the file is sent to a server. Neither a mock-up nor an unreleased wordmark can leak, and once the tab is closed no trace of them is left.
Before: icon.svg, 24×24 in its attributes
After: the 4x multiplier — icon.png at 96×96 with alpha intact and clean, unblurred edges
Before: logo.svg with alpha, width 300 in the file
After: typed 1200 — logo.png sits on any background with no white box around it
Your rating and feedback help decide what to improve next.