top of page

Convert Pixelated Icons into Scalable Vector Graphics

In this project, icons and badges with older styles are upscaled and converted into SVG files to accommodate newer displays with a high pixel density and resolution

Style 1 |

This set of icons created in the web 2.0 style came rasterized with a white background. Common vector automation tools such as Adobe Express will work as a first step, but with this style of icons, the gradients cause some undesired banding

 

To fix this, remove the background, and add other refinements, any vector graphics software such as Affinity Designer or Adobe Illustrator can be used to manually edit and finalize the SVG file

Click on the images below to see the (1) original file, (2) zoomed in pixelation, (3) automated SVG with banding, (4) final SVG

cloud_icon_05.jpg
cloud_icon_05_zoom.jpg

Style 2 |

This set of badges combines gradients with high contrast banding, so any automation tool that includes extra configuration settings will help in obtaining a workable starter file

 

This badge was generated with additional banding steps which makes it easier to balance high contrast and gradients in vector graphic software. Here I used Affinity Designer to create the final SVG

Click on the images below to see the (1) original file, (2) zoomed in pixelation, (3) automated SVG with banding, (4) final SVG

cloud_icon_01.jpg
cloud_icon_01_zoom.jpg

Style 3 |

These game icons needed to be smoothed and made scalable without losing the distinct style. I used a custom ComfyUI workflow to upscale the images before initially converting to SVG

This provided more pathway nodes to work with in Adobe Illustrator which helped retain the look and feel

Click on the images below to see the original jpg VS the SVG file

pixelatedIcon_plant.jpg
pixelatedIcon_candle.jpg
bottom of page