SVG Prompt Engineering

SVG Prompt Engineering

Udility Diffuser leverages large language models (LLMs) to bridge the gap between natural language and SVG code. Because the model performs a two-stage process—first planning the illustration and then generating the script—the quality of your output depends heavily on the structure of your text description.

Best Practices for Effective Prompts

To generate high-quality, educational, and labeled illustrations, follow these prompt engineering guidelines:

1. Be Explicit About Labels

The core strength of Udility Diffuser is its ability to create "labeled" data. Instead of just asking for an object, explicitly request labels for specific parts.

• Avoid: "Draw a plant cell."
• Recommended: "Detailed diagram of a plant cell with labels for the cell wall, nucleus, mitochondria, and chloroplasts."

2. Define Spatial Layout

SVG is coordinate-based. Providing directional cues helps the model organize the visual hierarchy effectively. Use terms like "side-by-side," "left-to-right flow," or "circular arrangement."

• Example: "A flow chart showing the lifecycle of a butterfly from left to right: egg, larva, pupa, and adult."

3. Specify Mathematical Constraints

For graphs or technical diagrams, specify the axes and the type of data visualization required.

• Example: "A 2D coordinate graph showing a linear function y=2x+3, with the x and y axes labeled and a grid in the background."

4. Use Descriptive Adjectives for Clarity

Since the model generates illustrative content, using words like "minimalist," "schematic," "high-contrast," or "educational" helps set the right tone for the SVG output.

• Example: "A minimalist schematic of a parallel circuit with two light bulbs and a 9V battery."

Comparative Prompt Examples

| Goal | Basic Prompt (Lower Detail) | Engineered Prompt (Higher Quality) | | :--- | :--- | :--- | | Physics | "Distance vs Displacement." | "An illustration comparing distance and displacement using a curved path for distance and a straight arrow for displacement, with clear text labels." | | Biology | "Structure of an atom." | "A Bohr model of a Carbon atom showing the nucleus with protons and neutrons, and electrons orbiting in shells. Label the subatomic particles." | | Math | "Area under a curve." | "A graph of a parabola with the area under the curve shaded between x=1 and x=3 to visualize integration. Include a label for 'Area = ∫f(x)dx'." |

Understanding the Input Pipeline

When you call diffuser.generate_image_from_text(prompt), the engine processes your input through two internal stages:

1. Instruction Synthesis: Your prompt is expanded into a technical blueprint (handled by get_detailed_instructions).
2. SVG Scripting: The blueprint is converted into raw SVG code (handled by generate_svg_from_instructions).

By providing a descriptive prompt, you ensure that the Instruction Synthesis stage has enough context to build a complex blueprint, resulting in a more accurate final SVG.

from Udility import diffuser

# Prompt Engineering Example: Precise and Context-Rich
prompt = """
A scientific illustration of the Water Cycle. 
Include arrows showing the flow of water. 
Label 'Evaporation' over the ocean, 'Condensation' over a cloud, 
and 'Precipitation' over a mountain range.
"""

diffuser.generate_image_from_text(prompt)