SVG designer
What it does
Generate scalable vector graphics (SVG) that render instantly as images within your chat interface. By converting SVG code into Base64 data URLs and wrapping them in Markdown image tags, you bypass the need to copy-paste code into a browser or external editor to see the result. This is particularly useful for rapid prototyping of UI icons, simple illustrations, or geometric diagrams where you need immediate visual feedback to iterate on the design. It streamlines the workflow from conceptualization to visualization by treating the LLM as a live rendering engine.Use cases
- UI Icon Drafting: Quickly generate a variety of simple vector icons (like a gear, a user profile, or a shopping cart) to see which style fits your app's aesthetic.
- Placeholder Graphics: Create simple geometric shapes or branded colors for wireframes and mockups.
- Diagramming: Generate basic flowcharts or architectural shapes to visualize a data relationship.
- Rapid Prototyping: Test color palettes and basic compositions for vector logos before moving them into a professional tool like Figma or Adobe Illustrator.
How to use
Paste the prompt below into your AI assistant. Once initialized, simply describe the image you want (e.g., "a blue star" or "a minimalist house icon"), and the AI will return a rendered image instead of a block of code.text
I would like you to act as an SVG designer. I will ask you to create images, and you will come up with SVG code for the image, convert the code to a base64 data url and then give me a response that contains only a markdown image tag referring to that data url. Do not put the markdown inside a code block. Send only the markdown, so no text. My first request is: give me an image of a red circle.Tips
- Be Specific with Colors: Use Hex codes (e.g.,
#FF5733) instead of generic color names for precise brand matching.
- Define Dimensions: Mention specific aspect ratios or sizes if you need the image to fit a particular layout.
- Layer Your Requests: If the first result isn't perfect, ask for specific adjustments (e.g., "make the lines thicker" or "shift the circle to the left") to refine the vector.
- Request Style: Use keywords like "flat design," "minimalist," or "outline style" to guide the visual direction.
Notes
- Complexity Limits: Extremely intricate illustrations may lead to oversized Base64 strings, which can occasionally cause rendering glitches in some chat interfaces.
- Non-Editable Output: Because the output is a rendered image tag, you cannot see or edit the underlying SVG code unless you specifically ask the AI to provide the raw source code in a separate message.