How to Create SVG Assets out of ANYTHING (AI, screenshots, images)
I’ve often encountered a few common challenges: the struggle to find unique icons that perfectly match specific project themes, the lack of skills to craft customized graphical assets from scratch, and the need for a flexible way to adapt AI-generated images to better-fit brand web projects. In this article, I’m excited to share a streamlined process that enables you to create and customize SVG assets from virtually any image. This method leverages tools like Midjourney, Vectorizer.ai, and design platforms such as Canva or Figma.
1. Generating Initial Image Assets
This works with any image — whether it’s a screenshot, a photograph, an image downloaded from the internet, or an AI-generated image using Midjourney. The choice of image source depends on my project’s needs and the visual style I’m targeting.
Here’s how I do it:
With MidJourney, like most AI software, it’s all about the prompt. Let’s say I am building a website for a gym. Here is the prompt that I would use (to keep things simple)
/imagine a series of vector icons | gym equipment | white background — v 6.0
This was the output:
Not bad… I am going to use version 3. If you’re not happy with the results, adjust the output settings in MidJourney to ensure the image quality is suitable for further processing.
When happy, save the image.
I’ve found that clear and simple images usually convert to vector formats more cleanly.
2. Converting Images to SVG Format with Vectorizer.ai
Here’s where the magic happens…
I then transform my AI-generated images into scalable vector graphics (SVG) using Vectorizer. This tool is fantastic for creating high-quality SVG files that are editable and scalable without losing resolution (even increasing the resolution in most cases).
Here’s how:
- Go to Vectorizer.ai and upload your Midjourney image to Vectorise.ai.
- The image processes in a few seconds, depending on its complexity and size.
- Then download the resulting SVG file, which is now ready for any further customization.
Here’s what it came out with (screenshot):
Now, hit download, leave the setting as is, and download the results.
SVGs are crucial for web usage because they maintain clarity at any zoom level, and their file sizes are usually smaller than those of raster images.
3. Customizing Your SVG in Figma (or Canva)
With my SVG file in hand, I now personalize and brand my graphics using Figma. Here I can adjust colors, shapes, and layouts.
Here’s how:
- I import my SVG file into my preferred design tool — Figma.
- I use the vector editing features to change colors, add or remove elements that I don’t need, and adjust the layout to match the branding needs.
- I save or export the customized SVGs for use in my project.
This step allows me to align the graphic precisely with my project’s visual identity, ensuring coherence and brand alignment.
Note: vectorizer.ai will convert every detail into a vector shape. This means that a considerable amount of tweaking will be necessary before you find the desired result.
After some adjustments in Figma, this is what I came up with:
It is a simple example, drafted for demonstration purposes, but I think you get the idea.
The same principle applies to screenshots, images you got from the internet, AI-generated images, and any other tape of images… you can now vectorize and modify to them to your heart's content.
In summary
By following these steps, I’ve managed to overcome common challenges in digital asset creation. This process not only simplifies the creation of bespoke visual elements but also enhances projects’ ability to stand out with tailored graphics that adhere to specific branding guidelines. With these tools and techniques, you’re well-prepared to elevate your digital designs, regardless of your graphic design expertise.
Just make sure, you have the rights to use and modify any image you upload. Unless you modify it so much, it is no longer recognizable by the owner (you didn’t hear it from me though ;)
