Go module and command line utility for converting small PNG images to SVG Tiny 1.2.
-p
flag.192x192 PNG image (16 colors) | 192x192 SVG image (16 colors) | 192x192 SVG image (optimized with svgo) |
---|---|---|
5.7 KiB | 187 KiB | 61 KiB |
The spaceships are drawn by wuhu (CC-BY 3.0).
Try zooming in on the images. Most browsers will keep the SVG image crisp when zooming in, but blur the PNG image.
For keeping PNG images crisp, this CSS can be used, but this is not normally needed for SVG images:
image-rendering: -moz-crisp-edges; /* Firefox */
image-rendering: -o-crisp-edges; /* Opera */
image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
image-rendering: crisp-edges;
-ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
Right now, Chrome does not support image-rendering: crisp-edges
, while Firefox does not support image-rendering: pixelated
. This may change over time, check out the excellent caniuse.com page.
Using SVG to get crisp images has the advantage of not relying on CSS that may differ from browser to browser.
Other comparisons:
302x240 PNG image | 302x240 SVG image (limited to 4096 colors) | 302x240 SVG (optimized with svgo) |
---|---|---|
171 KiB | 3.0 MiB | 911 KiB |
With palette reduction:
-n 96 + svgo |
-n 32 + svgo |
-n 16 + svgo |
-n 4 + svgo |
---|---|---|---|
610 KiB | 425 KiB | 439 KiB | 188 KiB |
Note that fewer colors does not always result in smaller images, because it depends on the shape of the resulting pixels and not just having few colors.
The rainforest image is from Wikipedia.
64x64 PNG image | 64x64 SVG image (one rectangle per pixel) | 64x64 SVG image (4096 colors) | 64x64 SVG image (rectangles >1px are colored pink) | 64x64 SVG image (optimized with svgo) |
---|---|---|---|---|
2.3 KiB | 167 KiB | 69 KiB | 22 KiB | |
The Glenda bunny is from 9p.io.
Q: Why 4096 colors?
A: Because representing colors on the short form (#000
as opposed to #000000
) makes it possible to express 4096 unique colors.
Q: Does this mean that I can make an entire web page in SVG, with photos and everything?
A: Yes! This is not the intended use of png2svg
, but it might work out if the images are kept small.
Q: Can I use this for QR codes?
A: Yes!
Q: Can I use png2svg
together with svgo
to create assets for a game that only uses vector graphics?
A: Yes! If the images are kept small.
Q: Are these questions just made up, or did someone actually ask this?
A: Look behind you, a three headed monkey!
For Go 1.17 or later:
go install github.com/xyproto/png2svg/cmd/png2svg@latest
Generate an SVG image with as few rectangles as possible (-o
for "output"):
png2svg -o output.svg input.png
Generate an SVG image with one rectangle per pixel:
png2svg -p -o output.svg input.png
Generate an SVG image where the output is limited to 4096 unique colors (-l
for "limit"):
png2svg -l -o output.svg input.png
Like above, but with progress information while the image is being generated:
png2svg -v -l -o output.svg input.png
Same as above, but also reduce the number of colors to 32:
png2svg -v -l -n 32 -o output.svg input.png
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。