All Projects → xyproto → png2svg

xyproto / png2svg

Licence: BSD-3-Clause license
🔀 Convert small PNG images to SVG Tiny 1.2

Programming Languages

go
31211 projects - #10 most used programming language
shell
77523 projects

Projects that are alternatives of or similar to png2svg

create-optimize-images
♻️ Reusable, scalable, bash scripts to create and optimize images.
Stars: ✭ 39 (-82.19%)
Mutual labels:  png, image-conversion
alfred-imagemin
Alfred workflow - Minify images with Imagemin
Stars: ✭ 29 (-86.76%)
Mutual labels:  png
Omxiv
OpenMax image viewer for the Raspberry Pi
Stars: ✭ 175 (-20.09%)
Mutual labels:  png
Gulp Image
Optimize PNG, JPEG, GIF, SVG images with gulp task.
Stars: ✭ 213 (-2.74%)
Mutual labels:  png
Weather Underground Icons
Weather Underground Icons ( PNG & SVG )
Stars: ✭ 186 (-15.07%)
Mutual labels:  png
Density Converter
A multi platform image density converting tool converting single or batches of images to Android, iOS, Windows or CSS specific formats and density versions given the source scale factor or width/height in dp. It has a graphical and command line interface and supports many image types (svg, psd, 9-patch, etc.) aswell as some lossless compressors like pngcrush.
Stars: ✭ 222 (+1.37%)
Mutual labels:  png
Image Optimizer
Easily optimize images using PHP
Stars: ✭ 2,127 (+871.23%)
Mutual labels:  png
wordpress-plugin
Speed up your WordPress website. Optimize your JPEG and PNG images automatically with TinyPNG.
Stars: ✭ 78 (-64.38%)
Mutual labels:  png
Png
decode, inspect, edit, and encode png images in pure swift
Stars: ✭ 238 (+8.68%)
Mutual labels:  png
Mediancut Posterizer
Lossy PNG compressor for RGBA PNGs. Has two modes: lossy averaging filter (blurizer) that denoises the image and optimal posterization using Median Cut quantization to reduce number of unique colors in the image with minimal visual distortion
Stars: ✭ 203 (-7.31%)
Mutual labels:  png
Grunt Image
Optimize PNG, JPEG, GIF, SVG images with grunt task.
Stars: ✭ 201 (-8.22%)
Mutual labels:  png
P2.
📄 p2. - Simple and secure PDF to PNG server.
Stars: ✭ 191 (-12.79%)
Mutual labels:  png
Ccapture.js
A library to capture canvas-based animations at a fixed framerate
Stars: ✭ 2,836 (+1194.98%)
Mutual labels:  png
Azpainter
Full color painting software for Unix-like systems for illustration drawing. This is un-official little fixed repository for package maintainers of image editor AzPainter (based on "mlib" toolkit). Official repository - http://azsky2.html.xdomain.jp/arc/download.html
Stars: ✭ 179 (-18.26%)
Mutual labels:  png
StegX
Steganography (BMP, PNG, WAV, MP3, AVI, FLV)
Stars: ✭ 22 (-89.95%)
Mutual labels:  png
Essential Image Optimization
Essential Image Optimization - an eBook
Stars: ✭ 1,950 (+790.41%)
Mutual labels:  png
Pappl
PAPPL - Printer Application Framework
Stars: ✭ 192 (-12.33%)
Mutual labels:  png
Imageprocessor
📷 A fluent wrapper around System.Drawing for the processing of image files.
Stars: ✭ 2,452 (+1019.63%)
Mutual labels:  png
HEIF
Mac OS X: Convert any image to HEIF/HEIC format
Stars: ✭ 58 (-73.52%)
Mutual labels:  png
video thumbnail
This plugin generates thumbnail from video file or URL. It returns image in memory or writes into a file. It offers rich options to control the image format, resolution and quality. Supports iOS and Android.
Stars: ✭ 159 (-27.4%)
Mutual labels:  png

png2svg Build GoDoc Go Report Card

Go module and command line utility for converting small PNG images to SVG Tiny 1.2.

Features and limitations

  • Draws rectangles for each region in the PNG image that can be covered by a rectangle.
  • The remaining pixels are drawn with a rectangle for each pixel.
  • This is not an efficient representation of PNG images!
  • The conversion may be useful if you have a small PNG image or icons at sizes around 32x32, and wish to scale them up and print them out without artifacts.
  • The utility is fast for small images, but larger images will take an unreasonable amount of time to convert, creating SVG files many megabytes in size. This could potentially also be used for benchmarking the single-core performance of a CPU.
  • The resulting SVG images can be opened directly in a browser like Firefox or Chromium, and may look sharper and crisper than small PNG or JPEG images that are smoothed/blurred by the browser, by default (this can be configured with CSS, though).
  • The default crispiness of how SVG images are displayed may be useful for displaying "pixel art" style graphics in the browser.
  • Written in pure Go, with no runtime dependencies on any external library or utility.
  • Handles transparent PNG images by not drawing SVG elements for the transparent regions.
  • For creating SVG images that draws a rectangle for each and every pixel, instead of also using larger rectangles, use the -p flag.

Image Comparison

192x192 PNG image (16 colors) 192x192 SVG image (16 colors) 192x192 SVG image (optimized with svgo)
5.7 KiB 187 KiB 61 KiB
png svg svgopt

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
png svg svgopt

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
png svgpixel svg4096 svgpink svgopt

The Glenda bunny is from 9p.io.

Q&A

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!

Installation

For Go 1.17 or later:

go install github.com/xyproto/png2svg/cmd/png2svg@latest

Example usage

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

General information

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].