Rebuild a picture out of dots or geometric shapes. Choose the shape and the detail, then copy the SVG code or download it as an SVG or PNG file.
This tool runs entirely in your browser. What you enter is never sent anywhere.Your input is never sent anywhere.
DetailsNo image loaded
1. Choose an image
2. Shape and detail
3. Color and background
4. Copy or download
How an image becomes a grid of vector shapes
The converter shrinks your picture to a grid and replaces every cell with one shape: a circle, square, diamond, triangle, or hexagon. Each shape takes the color of its cell, so the grid still reads as the original image, only built from geometry.
The result is an SVG, which is made of shapes and not pixels, so it stays sharp at any size. You can copy the SVG code, download an SVG file, or download a PNG at 1,024, 2,048, or 4,096 pixels wide.
Brightness, contrast, and saturation sliders adjust the colors before the shapes are drawn. Everything runs in your browser.
What people make with it
Website hero backgrounds
Turn a photo into hexagons or dots for a graphic backdrop, and embed the SVG so it stays sharp on high-resolution screens.
Profile pictures and avatars
Rebuild a portrait from diamonds or circles for a simple, graphic look.
Posters and abstract prints
Lower the number of dots to abstract the picture on purpose. Because the file is SVG, it can be printed at poster size.
Editable art for design tools
Open the SVG in an editor and recolor or delete individual dots, or change the shape of the whole piece by converting again.
How to convert an image in 5 steps
- Drag an image onto the upload area, click it to choose a file, or press Try a sample image.
- Pick a shape: circle, square, diamond, triangle, or hexagon.
- Set Dots across for the level of detail, and Dot size for the gap between shapes.
- Adjust brightness, contrast, and saturation, and set the background to transparent or a color.
- Click Copy SVG code, Download SVG, or Download PNG.
Note: The preview updates as you move the sliders. Nothing needs to be submitted.
What the settings mean
- Dots across: the number of columns in the grid, from 8 to 100. The number of rows follows the image's proportions. Total shapes are capped at 12,000.
- Dot size: the size of each shape compared with its grid cell. At 1.0 the shapes touch, below 1.0 they leave gaps, and above 1.0 they overlap.
- Colors: brightness, then contrast, then saturation are applied to each cell's color. A value of 100 leaves the color unchanged.
- Transparent cells: any grid cell that is mostly transparent in the source image is skipped, so a PNG with a transparent background produces shapes only where the subject is.
- One shape per image: the whole picture uses the shape you choose.
How Dots across sets the shape count
Numbers for a 4:3 picture whose cells are all opaque. A tall image has more rows and a wide one has fewer.
| Dots across | Grid | Shapes | Look |
|---|---|---|---|
| 20 | 20 × 15 | 300 | Bold and abstract |
| 40 | 40 × 30 | 1,200 | Recognizable with clear steps (the default) |
| 60 | 60 × 45 | 2,700 | Detailed, with a larger file |
| 100 | 100 × 75 | 7,500 | Fine detail, the largest file |
Shape styles. Squares give a retro pixel look, circles a softer dotted look, hexagons a technical or honeycomb look, diamonds a faceted look, and triangles a sharp, abstract one.
File size. Each shape adds a line to the SVG, so the file grows with the shape count. The line under the preview shows the approximate size of the file you are about to copy or download.
Using the SVG on the web and in print
A few practical points for taking the generated file into a page or a layout.
Inline the SVG in your page
Pasting the SVG code straight into your HTML means the browser does not make a separate request for an image file. Each shape has a fixed fill color, and a CSS rule such as svg rect { fill: ... } overrides it if you want to recolor the whole piece.
Pick SVG for print and PNG for quick sharing
SVG is vector, so it prints sharply at any size. The PNG is a fixed set of pixels, so choose the 4,096 px width for large uses and keep the SVG as your master file.
Choose a source image that survives the grid
Logos, icons, and photos with a clear subject keep their shape at low detail. Soft gradients and busy scenes turn into noise. Raise Contrast, or crop in closer before you upload.
Why a result looks wrong
The artwork turns blurry when enlarged
You saved the PNG and then scaled it up for a banner or a print. A PNG is a fixed set of pixels, so it loses sharpness when it is enlarged.
💡 See the solution▼
The SVG file is too heavy
Setting Dots across to the maximum on a large image produces thousands of shapes, and the SVG grows with them.
💡 See the solution▼
The subject melts into the background
A photo with little difference between light and dark areas gives shapes of nearly the same color, and the picture turns into a flat mosaic.
💡 See the solution▼
Transparent background does not cut out the subject
Transparent background only means no fill is added behind the shapes. A photo's own background is still converted into shapes.
💡 See the solution▼
Image to SVG FAQ
Q.How does the converter turn a picture into shapes?
A. It shrinks your image to a small grid, with the number of columns set by Dots across. Each grid cell gets one shape filled with that cell's color. The shape can be a circle, square, diamond, triangle, or hexagon. Cells that are mostly transparent in the source image get no shape.
Q.Is the result a real vector file?
A. Yes. The output is SVG markup made of circles, rectangles, paths, and polygons with fixed fill colors. It scales to any size without blur. The PNG download is a raster image, so use the SVG when you need to enlarge it.
Q.How do I use the SVG in a design tool?
A. Click Download SVG and open or import the file in a vector editor such as Illustrator, Inkscape, or Figma. Copy SVG code puts the markup on your clipboard instead, and some tools, Figma among them, accept it pasted straight onto the canvas. In an editor, each dot is a separate shape you can select and recolor.
Q.Which image files can I use?
A. Any image your browser can open, such as PNG, JPG, and WebP. A GIF is read as a single still image. Drag a file onto the upload area or click it to choose one. If you have no image handy, use Try a sample image.
Q.What does Transparent background do?
A. When it is on, the SVG and the PNG have no background fill. When it is off, a rectangle in the color you pick is added behind the shapes. The setting does not remove the background of a photo. To leave the background out of the result, start from a PNG that is transparent around the subject.
Q.How many dots can I make?
A. Dots across goes up to 100. The tool also stops at 12,000 shapes in total, so a tall image may get fewer columns than you asked for, and the line under the preview tells you when that happens. The line also shows the shape count and the approximate SVG size.
Q.Can I mix several shapes in one picture?
A. No. One shape is used for the whole image. Convert the image once per shape if you want to compare them, or mix the results by hand in an editor.
Q.How large can the PNG be?
A. You can pick a width of 1,024, 2,048, or 4,096 pixels, and the height follows the image's proportions. If your browser cannot create the file at that size, the tool shows a message. Pick a smaller width, or use the SVG.
Q.Is my image uploaded anywhere?
A. No. The image is read and converted in your browser with JavaScript, and nothing is sent to a server. Reloading or closing the page clears it.
Your feedback
makes this tool better.
Tell us which features you'd like, what should be fixed, or which new tool you'd like to see. An engineer reads every submission and uses it to guide development.