SVGPix: Generate SVG Icons from Text

SVGPix: Generate SVG Icons from Text

Downloading SVG images from third party services might be an easy way but wait what if you don't see the icons that you wish to have in your project or in your poster image.

Well your are not alone in this situation even i too had a similar experience where i can't find the SVG icons/images which i need. So what will we do. We are in the age of AI where we can leverage the power of AI for the things that we want.

Overview of SVGPix

I believe you have seen multiple image generators like Midjourney, Leonardo AI where you can provide a text prompt which can generate images. Likewise we are going to do the same that is generate SVG Icons from text prompt.

We are going to use one of the OpenSource LLM models from HuggingFace.

Demo

Demo Site Link: https://svgpix.vercel.app/

Architecture

To create this application we will be using the following techstack

  • Next.js with TailwindCSS and Shadcn UI

  • HuggingFace Inference API (Free version) TextToImage Model

  • Model (dataautogpt3/OpenDalleV1.1)

Final Results

HomePage

Home page where the users can see What does SVGPix offers

Result Page

SVGImage that is generated after the user has provided the text prompt

Sample images with text prompt where user can use these text prompt to generate SVG Images/Icon

Failure/Edge Case

Since we are using the Hugging Face Inference Free API there might be a delay in generating the result. You have to try 3 to 4 times if you start it for the first time like this below video to get your results.

Improvements

Following improvements can be done to make it even better

  1. Make the API calls to be available all the time so that the user don't want to wait to generate an image

  2. Enhance the feature of resizing the icon to different sizes

  3. Showcase all the user generated SVG Images in the list

  4. Option to like the other user generate SVG Images similar like Ideogram

  5. Multiple option display atleast 4 variations of image for the single text prompt

  6. Setup RateLimiting on the backend to avoid multiple call from a single IP if the freemium model is continued.

Source code

Feel free to grab the source code on it is opensource now.

https://github.com/nidhinkumar06/SvgImageGenerator-SVGPix-

Demo Site

https://svgpix.vercel.app/

#aifortomorrow