DAVE GASPARINI
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
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
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