Weather SVG Creator — Reference
SVG Template
svg
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 160" width="300" height="160">
<rect width="300" height="160" rx="12" fill="#1a1a2e"/>
<text x="150" y="45" text-anchor="middle" fill="#8892b0" font-family="system-ui" font-size="14">Unit: [Celsius/Fahrenheit]</text>
<text x="150" y="100" text-anchor="middle" fill="#ccd6f6" font-family="system-ui" font-size="42" font-weight="bold">[value]°[C/F]</text>
<text x="150" y="140" text-anchor="middle" fill="#64ffda" font-family="system-ui" font-size="16">Dubai, UAE</text>
</svg>Placeholders
| Placeholder | Replace with | Example |
|---|---|---|
[Celsius/Fahrenheit] | Full unit name from input | Celsius |
[value] | Numeric temperature from input | 26.2 |
[C/F] | Unit abbreviation | C or F |
Design Specs
| Property | Value |
|---|---|
| Dimensions | 300 x 160 px |
| Corner radius | 12 px |
| Background | #1a1a2e (dark navy) |
| Unit label | #8892b0 (muted blue), 14px |
| Temperature | #ccd6f6 (light blue), 42px bold |
| Location | #64ffda (teal accent), 16px |
| Font | system-ui |
| All text | Centered (text-anchor="middle" at x=150) |
Output Markdown Template
markdown
# Weather Result
## Temperature
[value]°[C/F]
## Location
Dubai, UAE
## Unit
[Celsius/Fahrenheit]
## SVG Card
Output Paths
| File | Path |
|---|---|
| SVG card | orchestration-workflow/weather.svg |
| Markdown summary | orchestration-workflow/output.md |