Overall Winners Across All Variations
Quality
GPT-5.6 Sol
Best Value
Qwen3 235B
Fastest
Mistral Large 3
The Take
This is the SVG sweet spot — and the one task with obvious real utility. Nearly every model turned the four quarterly figures into an accurately-scaled, labeled, titled bar chart. Structured data → structured vector is precisely what these models are built for, so the ASCII bar chart’s wonky columns become clean, gridlined charts here. The gap between the two bar-chart tests is the clearest single illustration of why SVG beats ASCII.
Structured data → vector graphic. Coordinates, axes, labels, and text placement.
The Prompt
Generate an SVG bar chart showing quarterly revenue: Q1 $45k, Q2 $52k, Q3 $61k, Q4 $73k. Include four labeled bars scaled to their values, a y-axis with gridlines, x-axis labels, and a title. Clean and readable.
Model Results
GPT-5.6 Sol
Quality
Valid SVG
View SVG Code
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500" viewBox="0 0 800 500" role="img" aria-labelledby="title desc">
<title id="title">Quarterly Revenue</title>
<desc id="desc">Bar chart showing revenue of 45 thousand dollars in Q1, 52 thousand in Q2, 61 thousand in Q3, and 73 thousand in Q4.</desc>
<rect width="800" height="500" fill="#ffffff"/>
<!-- Title -->
<text x="400" y="42" text-anchor="middle"
font-family="Arial, sans-serif" font-size="26" font-weight="700" fill="#172033">
Quarterly Revenue
</text>
<!-- Gridlines -->
<g stroke="#dce2ea" stroke-width="1">
<line x1="90" y1="390" x2="750" y2="390"/>
<line x1="90" y1="310" x2="750" y2="310"/>
<line x1="90" y1="230" x2="750" y2="230"/>
<line x1="90" y1="150" x2="750" y2="150"/>
<line x1="90" y1="70" x2="750" y2="70"/>
</g>
<!-- Axes -->
<g stroke="#596273" stroke-width="2">
<line x1="90" y1="70" x2="90" y2="390"/>
<line x1="90" y1="390" x2="750" y2="390"/>
</g>
<!-- Y-axis labels -->
<g font-family="Arial, sans-serif" font-size="14" fill="#596273" text-anchor="end">
<text x="78" y="395">$0k</text>
<text x="78" y="315">$20k</text>
<text x="78" y="235">$40k</text>
<text x="78" y="155">$60k</text>
<text x="78" y="75">$80k</text>
</g>
<!-- Y-axis title -->
<text x="25" y="230" transform="rotate(-90 25 230)"
text-anchor="middle" font-family="Arial, sans-serif"
font-size="15" font-weight="600" fill="#394254">
Revenue (USD)
</text>
<!-- Bars -->
<g fill="#3478c9">
<!-- Q1: $45k -->
<rect x="140" y="210" width="100" height="180" rx="5"/>
<!-- Q2: $52k -->
<rect x="300" y="182" width="100" height="208" rx="5"/>
<!-- Q3: $61k -->
<rect x="460" y="146" width="100" height="244" rx="5"/>
<!-- Q4: $73k -->
<rect x="620" y="98" width="100" height="292" rx="5"/>
</g>
<!-- Value labels -->
<g font-family="Arial, sans-serif" font-size="16" font-weight="700"
fill="#172033" text-anchor="middle">
<text x="190" y="198">$45k</text>
<text x="350" y="170">$52k</text>
<text x="510" y="134">$61k</text>
<text x="670" y="86">$73k</text>
</g>
<!-- X-axis labels -->
<g font-family="Arial, sans-serif" font-size="16" font-weight="600"
fill="#394254" text-anchor="middle">
<text x="190" y="420">Q1</text>
<text x="350" y="420">Q2</text>
<text x="510" y="420">Q3</text>
<text x="670" y="420">Q4</text>
</g>
<!-- X-axis title -->
<text x="420" y="462" text-anchor="middle"
font-family="Arial, sans-serif" font-size="15"
font-weight="600" fill="#596273">
Quarter
</text>
</svg>GPT-5.2
Valid SVG
View SVG Code
<svg xmlns="http://www.w3.org/2000/svg" width="800" height="500" viewBox="0 0 800 500" role="img" aria-label="Quarterly Revenue Bar Chart">
<defs>
<style>
.title { font: 700 20px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; fill: #111827; }
.label { font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; fill: #111827; }
.tick { font: 11px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; fill: #374151; }
.grid { stroke: #E5E7EB; stroke-width: 1; shape-rendering: crispEdges; }
.axis { stroke: #111827; stroke-width: 1.5; shape-rendering: crispEdges; }
.bar { fill: #2563EB; }
.bar2 { fill: #1D4ED8; }
.value { font: 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; fill: #111827; }
</style>
</defs>
<!-- Layout constants (hard-coded for clarity)
Chart area: left=80, right=40, top=70, bottom=70
Plot width=680, height=360
Y scale: 0..80 (thousands) mapped to 360px
-->
<!-- Title -->
<text class="title" x="400" y="40" text-anchor="middle">Quarterly Revenue (USD)</text>
<!-- Plot background (optional, subtle) -->
<rect x="80" y="70" width="680" height="360" fill="#FFFFFF" stroke="#F3F4F6"/>
<!-- Horizontal gridlines + Y-axis ticks (0..80k step 10k) -->
<!-- y = 70 + (80 - value)/80 * 360 -->
<g>
<!-- 80k -->
<line class="grid" x1="80" y1="70" x2="760" y2="70"/>
<text class="tick" x="72" y="74" text-anchor="end">$80k</text>
<!-- 70k -->
<line class="grid" x1="80" y1="115" x2="760" y2="115"/>
<text class="tick" x="72" y="119" text-anchor="end">$70k</text>
<!-- 60k -->
<line class="grid" x1="80" y1="160" x2="760" y2="160"/>
<text class="tick" x="72" y="164" text-anchor="end">$60k</text>
<!-- 50k -->
<line class="grid" x1="80" y1="205" x2="760" y2="205"/>
<text class="tick" x="72" y="209" text-anchor="end">$50k</text>
<!-- 40k -->
<line class="grid" x1="80" y1="250" x2="760" y2="250"/>
<text class="tick" x="72" y="254" text-anchor="end">$40k</text>
<!-- 30k -->
<line class="grid" x1="80" y1="295" x2="760" y2="295"/>
<text class="tick" x="72" y="299" text-anchor="end">$30k</text>
<!-- 20k -->
<line class="grid" x1="80" y1="340" x2="760" y2="340"/>
<text class="tick" x="72" y="344" text-anchor="end">$20k</text>
<!-- 10k -->
<line class="grid" x1="80" y1="385" x2="760" y2="385"/>
<text class="tick" x="72" y="389" text-anchor="end">$10k</text>
<!-- 0k -->
<line class="grid" x1="80" y1="430" x2="760" y2="430"/>
<text class="tick" x="72" y="434" text-anchor="end">$0</text>
</g>
<!-- Axes -->
<line class="axis" x1="80" y1="70" x2="80" y2="430"/>
<line class="axis" x1="80" y1="430" x2="760" y2="430"/>
<!-- Bars (values in $k): Q1=45, Q2=52, Q3=61, Q4=73; max=80 -->
<!-- Bar positions: width=110; gaps=60; first x=140 -->
<!-- Heights: value/80*360 -->
<g>
<!-- Q1: 45k => h=202.5, y=227.5 -->
<rect class="bar" x="140" y="227.5" width="110" height="202.5" rx="6"/>
<text class="value" x="195" y="218" text-anchor="middle">$45k</text>
<text class="label" x="195" y="455" text-anchor="middle">Q1</text>
<!-- Q2: 52k => h=234, y=196 -->
<rect class="bar2" x="310" y="196" width="110" height="234" rx="6"/>
<text class="value" x="365" y="186.5" text-anchor="middle">$52k</text>
<text class="label" x="365" y="455" text-anchor="middle">Q2</text>
<!-- Q3: 61k => h=274.5, y=155.5 -->
<rect class="bar" x="480" y="155.5" width="110" height="274.5" rx="6"/>
<text class="value" x="535" y="146" text-anchor="middle">$61k</text>
<text class="label" x="535" y="455" text-anchor="middle">Q3</text>
<!-- Q4: 73k => h=328.5, y=101.5 -->
<rect class="bar2" x="650" y="101.5" width="110" height="328.5" rx="6"/>
<text class="value" x="705" y="92" text-anchor="middle">$73k</text>
<text class="label" x="705" y="455" text-anchor="middle">Q4</text>
</g>
<!-- Y-axis label -->
<text class="label" x="20" y="250" transform="rotate(-90 20 250)" text-anchor="middle">Revenue (USD, thousands)</text>
</svg>GPT-4o
Valid SVG
View SVG Code
<svg width="400" height="300" xmlns="http://www.w3.org/2000/svg">
<!-- Title -->
<text x="200" y="20" text-anchor="middle" font-size="16" font-family="Arial" fill="#333">Quarterly Revenue</text>
<!-- Y-axis and gridlines -->
<line x1="50" y1="250" x2="50" y2="50" stroke="#ccc" />
<line x1="50" y1="250" x2="350" y2="250" stroke="#ccc" />
<line x1="50" y1="200" x2="350" y2="200" stroke="#eee" />
<line x1="50" y1="150" x2="350" y2="150" stroke="#eee" />
<line x1="50" y1="100" x2="350" y2="100" stroke="#eee" />
<line x1="50" y1="50" x2="350" y2="50" stroke="#eee" />
<!-- Y-axis labels -->
<text x="30" y="255" font-size="10" font-family="Arial" fill="#333">0</text>
<text x="30" y="205" font-size="10" font-family="Arial" fill="#333">20k</text>
<text x="30" y="155" font-size="10" font-family="Arial" fill="#333">40k</text>
<text x="30" y="105" font-size="10" font-family="Arial" fill="#333">60k</text>
<text x="30" y="55" font-size="10" font-family="Arial" fill="#333">80k</text>
<!-- Bars -->
<rect x="70" y="175" width="40" height="75" fill="#4CAF50" />
<rect x="130" y="150" width="40" height="100" fill="#2196F3" />
<rect x="190" y="125" width="40" height="125" fill="#FF9800" />
<rect x="250" y="85" width="40" height="165" fill="#F44336" />
<!-- X-axis labels -->
<text x="90" y="270" text-anchor="middle" font-size="12" font-family="Arial" fill="#333">Q1</text>
<text x="150" y="270" text-anchor="middle" font-size="12" font-family="Arial" fill="#333">Q2</text>
<text x="210" y="270" text-anchor="middle" font-size="12" font-family="Arial" fill="#333">Q3</text>
<text x="270" y="270" text-anchor="middle" font-size="12" font-family="Arial" fill="#333">Q4</text>
</svg>
Claude Opus 5
Valid SVG
View SVG Code
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 400" width="600" height="400" role="img" aria-label="Bar chart of quarterly revenue: Q1 $45k, Q2 $52k, Q3 $61k, Q4 $73k">
<style>
.title { font: 600 20px "Helvetica Neue", Arial, sans-serif; fill: #1f2933; }
.sub { font: 13px "Helvetica Neue", Arial, sans-serif; fill: #7b8794; }
.axis { font: 12px "Helvetica Neue", Arial, sans-serif; fill: #616e7c; }
.xlab { font: 600 13px "Helvetica Neue", Arial, sans-serif; fill: #3e4c59; }
.val { font: 600 12px "Helvetica Neue", Arial, sans-serif; fill: #2b6cb0; }
.grid { stroke: #e4e7eb; stroke-width: 1; }
.axline { stroke: #9aa5b1; stroke-width: 1.5; }
.bar { fill: #3182ce; }
</style>
<!-- Background -->
<rect width="600" height="400" fill="#ffffff"/>
<!-- Titles -->
<text class="title" x="70" y="30">Quarterly Revenue 2024</text>
<text class="sub" x="70" y="48">Revenue in thousands of USD</text>
<!-- Gridlines + y-axis labels (0–80k, step 10k) -->
<g class="grid">
<line x1="70" y1="340" x2="570" y2="340"/>
<line x1="70" y1="305" x2="570" y2="305"/>
<line x1="70" y1="270" x2="570" y2="270"/>
<line x1="70" y1="235" x2="570" y2="235"/>
<line x1="70" y1="200" x2="570" y2="200"/>
<line x1="70" y1="165" x2="570" y2="165"/>
<line x1="70" y1="130" x2="570" y2="130"/>
<line x1="70" y1="95" x2="570" y2="95"/>
<line x1="70" y1="60" x2="570" y2="60"/>
</g>
<g class="axis" text-anchor="end">
<text x="58" y="344">$0</text>
<text x="58" y="309">$10k</text>
<text x="58" y="274">$20k</text>
<text x="58" y="239">$30k</text>
<text x="58" y="204">$40k</text>
<text x="58" y="169">$50k</text>
<text x="58" y="134">$60k</text>
<text x="58" y="99">$70k</text>
<text x="58" y="64">$80k</text>
</g>
<!-- Axis lines -->
<line class="axline" x1="70" y1="60" x2="70" y2="340"/>
<line class="axline" x1="70" y1="340" x2="570" y2="340"/>
<!-- Bars (scale: 1k = 3.5px, baseline y=340) -->
<g class="bar">
<rect x="114" y="182.5" width="70" height="157.5" rx="3"/>
<rect x="228" y="158.0" width="70" height="182.0" rx="3"/>
<rect x="342" y="126.5" width="70" height="213.5" rx="3"/>
<rect x="456" y="84.5" width="70" height="255.5" rx="3"/>
</g>
<!-- Value labels -->
<g class="val" text-anchor="middle">
<text x="149" y="173">$45k</text>
<text x="263" y="149">$52k</text>
<text x="377" y="117">$61k</text>
<text x="491" y="75">$73k</text>
</g>
<!-- X-axis labels -->
<g class="xlab" text-anchor="middle">
<text x="149" y="362">Q1</text>
<text x="263" y="362">Q2</text>
<text x="377" y="362">Q3</text>
<text x="491" y="362">Q4</text>
</g>
<text class="axis" x="320" y="386" text-anchor="middle">Quarter</text>
</svg>Claude Sonnet 4.6
Valid SVG
View SVG Code
<svg xmlns="http://www.w3.org/2000/svg" width="560" height="400" viewBox="0 0 560 400" font-family="Segoe UI, Arial, sans-serif">
<!-- Background -->
<rect width="560" height="400" fill="#f9fafb" rx="12"/>
<!-- Chart area background -->
<rect x="70" y="50" width="440" height="280" fill="#ffffff" rx="6"
stroke="#e5e7eb" stroke-width="1"/>
<!-- Title -->
<text x="290" y="30" text-anchor="middle" font-size="16" font-weight="700"
fill="#111827" letter-spacing="0.3">Quarterly Revenue 2024</text>
<!-- ── Gridlines & Y-axis labels ── -->
<!-- Max value ~80k, scale: 0–80k across 280px → 3.5px per $1k -->
<!-- $80k line -->
<line x1="70" y1="50" x2="510" y2="50" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="4,3"/>
<text x="62" y="54" text-anchor="end" font-size="11" fill="#6b7280">$80k</text>
<!-- $60k line -->
<line x1="70" y1="120" x2="510" y2="120" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="4,3"/>
<text x="62" y="124" text-anchor="end" font-size="11" fill="#6b7280">$60k</text>
<!-- $40k line -->
<line x1="70" y1="190" x2="510" y2="190" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="4,3"/>
<text x="62" y="194" text-anchor="end" font-size="11" fill="#6b7280">$40k</text>
<!-- $20k line -->
<line x1="70" y1="260" x2="510" y2="260" stroke="#e5e7eb" stroke-width="1" stroke-dasharray="4,3"/>
<text x="62" y="264" text-anchor="end" font-size="11" fill="#6b7280">$20k</text>
<!-- $0 baseline -->
<line x1="70" y1="330" x2="510" y2="330" stroke="#d1d5db" stroke-width="1.5"/>
<text x="62" y="334" text-anchor="end" font-size="11" fill="#6b7280">$0</text>
<!-- Y-axis line -->
<line x1="70" y1="50" x2="70" y2="330" stroke="#d1d5db" stroke-width="1.5"/>
<!-- ── Bars ──
Scale: 280px = $80k → 1px = $0.285714k → $1k = 3.5px
bar height = value * 3.5
bar top = 330 - height
Bar width = 64px, gap = 46px, first bar x = 100
Q1 $45k: h=157.5 top=172.5
Q2 $52k: h=182 top=148
Q3 $61k: h=213.5 top=116.5
Q4 $73k: h=255.5 top=74.5
-->
<!-- Q1 Bar -->
<defs>
<linearGradient id="g1" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#60a5fa"/>
<stop offset="100%" stop-color="#3b82f6"/>
</linearGradient>
<linearGradient id="g2" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#34d399"/>
<stop offset="100%" stop-color="#10b981"/>
</linearGradient>
<linearGradient id="g3" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#a78bfa"/>
<stop offset="100%" stop-color="#7c3aed"/>
</linearGradient>
<linearGradient id="g4" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#fb923c"/>
<stop offset="100%" stop-color="#ea580c"/>
</linearGradient>
</defs>
<!-- Q1 $45k -->
<rect x="100" y="172" width="64" height="158" fill="url(#g1)" rx="4" ry="4"/>
<rect x="100" y="176" width="64" height="4" fill="url(#g1)" rx="0"/>
<!-- value label -->
<text x="132" y="165" text-anchor="middle" font-size="12" font-weight="600" fill="#1e40af">$45k</text>
<!-- Q2 $52k -->
<rect x="210" y="148" width="64" height="182" fill="url(#g2)" rx="4" ry="4"/>
<rect x="210" y="152" width="64" height="4" fill="url(#g2)" rx="0"/>
<text x="242" y="141" text-anchor="middle" font-size="12" font-weight="600" fill="#065f46">$52k</text>
<!-- Q3 $61k -->
<rect x="320" y="117" width="64" height="213" fill="url(#g3)" rx="4" ry="4"/>
<rect x="320" y="121" width="64" height="4" fill="url(#g3)" rx="0"/>
<text x="352" y="110" text-anchor="middle" font-size="12" font-weight="600" fill="#4c1d95">$61k</text>
<!-- Q4 $73k -->
<rect x="430" y="75" width="64" height="255" fill="url(#g4)" rx="4" ry="4"/>
<rect x="430" y="79" width="64" height="4" fill="url(#g4)" rx="0"/>
<text x="462" y="68" text-anchor="middle" font-size="12" font-weight="600" fill="#9a3412">$73k</text>
<!-- ── X-axis labels ── -->
<text x="132" y="352" text-anchor="middle" font-size="13" font-weight="600" fill="#374151">Q1</text>
<text x="242" y="352" text-anchor="middle" font-size="13" font-weight="600" fill="#374151">Q2</text>
<text x="352" y="352" text-anchor="middle" font-size="13" font-weight="600" fill="#374151">Q3</text>
<text x="462" y="352" text-anchor="middle" font-size="13" font-weight="600" fill="#374151">Q4</text>
<!-- Y-axis title -->
<text x="16" y="200" text-anchor="middle" font-size="12" fill="#6b7280"
transform="rotate(-90, 16, 190)" letter-spacing="0.5">Revenue (USD)</text>
<!-- Growth indicator -->
<text x="290" y="385" text-anchor="middle" font-size="11" fill="#6b7280">
↑ +62% growth from Q1 to Q4
</text>
</svg>
Gemini 2.5 Pro
Valid SVG
View SVG Code
<svg width="550" height="400" xmlns="http://www.w3.org/2000/svg" font-family="-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'">
<defs>
<style>
.chart-title {
font-size: 22px;
font-weight: bold;
text-anchor: middle;
fill: #333;
}
.axis-label {
font-size: 12px;
text-anchor: middle;
fill: #555;
}
.y-axis-label {
text-anchor: end;
}
.bar-label {
font-size: 13px;
font-weight: 500;
text-anchor: middle;
fill: #333;
}
.bar {
fill: #4A90E2;
transition: fill 0.2s;
}
.bar:hover {
fill: #357ABD;
}
.grid-line {
stroke: #e0e0e0;
stroke-width: 1;
shape-rendering: crispEdges;
}
.axis-line {
stroke: #aaa;
stroke-width: 1;
shape-rendering: crispEdges;
}
</style>
</defs>
<!-- Background -->
<rect x="0" y="0" width="100%" height="100%" fill="#f9f9f9" />
<!-- Chart Title -->
<text x="275" y="40" class="chart-title">Quarterly Revenue</text>
<!-- Data and Layout Configuration -->
<g id="chart-area" transform="translate(60, 60)">
<!-- Constants for easy modification -->
<!--
SVG Height/Width: 400/550
Margins: Top=60, Bottom=50, Left=60, Right=30
Chart Area Height: 400 - 60 - 50 = 290
Chart Area Width: 550 - 60 - 30 = 460
Max Y-Value: 80 (for $80k)
-->
<!-- Y-Axis Gridlines and Labels -->
<g id="y-axis">
<!-- Gridline and Label for 80k -->
<line x1="0" y1="0" x2="460" y2="0" class="grid-line" />
<text x="-10" y="5" class="axis-label y-axis-label">$80k</text>
<!-- Gridline and Label for 60k -->
<line x1="0" y1="72.5" x2="460" y2="72.5" class="grid-line" />
<text x="-10" y="77.5" class="axis-label y-axis-label">$60k</text>
<!-- Gridline and Label for 40k -->
<line x1="0" y1="145" x2="460" y2="145" class="grid-line" />
<text x="-10" y="150" class="axis-label y-axis-label">$40k</text>
<!-- Gridline and Label for 20k -->
<line x1="0" y1="217.5" x2="460" y2="217.5" class="grid-line" />
<text x="-10" y="222.5" class="axis-label y-axis-label">$20k</text>
<!-- Baseline (X-Axis) -->
<line x1="0" y1="290" x2="460" y2="290" class="axis-line" />
<text x="-10" y="295" class="axis-label y-axis-label">$0</text>
</g>
<!-- Bars and X-Axis Labels -->
<g id="bars">
<!-- Bar 1: Q1, $45k -->
<!-- Height = (45 / 80) * 290 = 163.125px -->
<!-- Y = 290 - 163.125 = 126.875px -->
<rect x="35" y="126.875" width="80" height="163.125" class="bar" rx="2" ry="2"/>
<text x="75" y="121.875" class="bar-label">$45k</text>
<text x="75" y="310" class="axis-label">Q1</text>
<!-- Bar 2: Q2, $52k -->
<!-- Height = (52 / 80) * 290 = 188.5px -->
<!-- Y = 290 - 188.5 = 101.5px -->
<rect x="150" y="101.5" width="80" height="188.5" class="bar" rx="2" ry="2"/>
<text x="190" y="96.5" class="bar-label">$52k</text>
<text x="190" y="310" class="axis-label">Q2</text>
<!-- Bar 3: Q3, $61k -->
<!-- Height = (61 / 80) * 290 = 221.125px -->
<!-- Y = 290 - 221.125 = 68.875px -->
<rect x="265" y="68.875" width="80" height="221.125" class="bar" rx="2" ry="2"/>
<text x="305" y="63.875" class="bar-label">$61k</text>
<text x="305" y="310" class="axis-label">Q3</text>
<!-- Bar 4: Q4, $73k -->
<!-- Height = (73 / 80) * 290 = 264.625px -->
<!-- Y = 290 - 264.625 = 25.375px -->
<rect x="380" y="25.375" width="80" height="264.625" class="bar" rx="2" ry="2"/>
<text x="420" y="20.375" class="bar-label">$73k</text>
<text x="420" y="310" class="axis-label">Q4</text>
</g>
</g>
</svg>
Grok 4.3
Valid SVG
View SVG Code
<svg width="600" height="420" xmlns="http://www.w3.org/2000/svg">
<!-- Background -->
<rect width="600" height="420" fill="#ffffff"/>
<!-- Title -->
<text x="300" y="35" text-anchor="middle" font-family="Arial, sans-serif" font-size="22" font-weight="bold" fill="#333">Quarterly Revenue</text>
<!-- Chart area dimensions -->
<!-- Left margin: 70, Right: 30, Top: 70, Bottom: 70 -->
<!-- Chart width: 500, Chart height: 300 -->
<!-- Y-axis -->
<line x1="70" y1="70" x2="70" y2="370" stroke="#555" stroke-width="2"/>
<!-- X-axis -->
<line x1="70" y1="370" x2="570" y2="370" stroke="#555" stroke-width="2"/>
<!-- Y-axis gridlines and labels (0 to 80k) -->
<!-- Scale: 300px = 80k → 3.75px per k -->
<g font-family="Arial, sans-serif" font-size="13" fill="#444">
<!-- 0 -->
<line x1="70" y1="370" x2="570" y2="370" stroke="#ddd" stroke-width="1"/>
<text x="62" y="375" text-anchor="end">0</text>
<!-- 20k -->
<line x1="70" y1="295" x2="570" y2="295" stroke="#ddd" stroke-width="1"/>
<text x="62" y="300" text-anchor="end">20k</text>
<!-- 40k -->
<line x1="70" y1="220" x2="570" y2="220" stroke="#ddd" stroke-width="1"/>
<text x="62" y="225" text-anchor="end">40k</text>
<!-- 60k -->
<line x1="70" y1="145" x2="570" y2="145" stroke="#ddd" stroke-width="1"/>
<text x="62" y="150" text-anchor="end">60k</text>
<!-- 80k -->
<line x1="70" y1="70" x2="570" y2="70" stroke="#ddd" stroke-width="1"/>
<text x="62" y="75" text-anchor="end">80k</text>
</g>
<!-- Y-axis label -->
<text x="25" y="225" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#555" transform="rotate(-90, 25, 225)">Revenue ($k)</text>
<!-- Bars -->
<!-- Bar width: 80px, spacing: 40px between bars -->
<!-- Bar 1: Q1 $45k (height = 45 * 3.75 = 168.75) -->
<rect x="110" y="201.25" width="80" height="168.75" fill="#4a90d9" rx="4"/>
<text x="150" y="193" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#333">$45k</text>
<!-- Bar 2: Q2 $52k (height = 52 * 3.75 = 195) -->
<rect x="230" y="175" width="80" height="195" fill="#4a90d9" rx="4"/>
<text x="270" y="167" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#333">$52k</text>
<!-- Bar 3: Q3 $61k (height = 61 * 3.75 = 228.75) -->
<rect x="350" y="141.25" width="80" height="228.75" fill="#4a90d9" rx="4"/>
<text x="390" y="133" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#333">$61k</text>
<!-- Bar 4: Q4 $73k (height = 73 * 3.75 = 273.75) -->
<rect x="470" y="96.25" width="80" height="273.75" fill="#4a90d9" rx="4"/>
<text x="510" y="88" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" font-weight="bold" fill="#333">$73k</text>
<!-- X-axis labels -->
<g font-family="Arial, sans-serif" font-size="15" fill="#333" text-anchor="middle">
<text x="150" y="395">Q1</text>
<text x="270" y="395">Q2</text>
<text x="390" y="395">Q3</text>
<text x="510" y="395">Q4</text>
</g>
</svg>
DeepSeek V3
Valid SVG
View SVG Code
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 650 450">
<style>
text {
font-family: Arial, sans-serif;
font-size: 14px;
fill: #333;
}
.title {
font-size: 20px;
font-weight: bold;
fill: #222;
}
.axis-label {
font-size: 16px;
font-weight: bold;
}
.bar-label {
font-size: 14px;
font-weight: bold;
fill: white;
}
.grid-line {
stroke: #eee;
stroke-width: 1;
}
.axis-line {
stroke: #666;
stroke-width: 2;
}
</style>
<!-- Background -->
<rect width="100%" height="100%" fill="white"/>
<!-- Title -->
<text class="title" x="325" y="40" text-anchor="middle">Quarterly Revenue</text>
<!-- Y-axis label -->
<text class="axis-label" x="50" y="100" text-anchor="middle" transform="rotate(-90, 50, 100)">Revenue ($)</text>
<!-- Gridlines and Y-axis labels -->
<g id="gridlines">
<line class="grid-line" x1="80" y1="100" x2="580" y2="100"/>
<text x="65" y="105" text-anchor="end">$80k</text>
<line class="grid-line" x1="80" y1="175" x2="580" y2="175"/>
<text x="65" y="180" text-anchor="end">$60k</text>
<line class="grid-line" x1="80" y1="250" x2="580" y2="250"/>
<text x="65" y="255" text-anchor="end">$40k</text>
<line class="grid-line" x1="80" y1="325" x2="580" y2="325"/>
<text x="65" y="330" text-anchor="end">$20k</text>
<line class="grid-line" x1="80" y1="400" x2="580" y2="400"/>
<text x="65" y="405" text-anchor="end">$0</text>
</g>
<!-- X and Y axes -->
<line class="axis-line" x1="80" y1="400" x2="580" y2="400"/>
<line class="axis-line" x1="80" y1="100" x2="80" y2="400"/>
<!-- Bars -->
<g id="bars">
<!-- Q1 Bar -->
<rect x="120" y="280" width="80" height="120" fill="#4A90E2">
<animate attributeName="height" from="0" to="120" dur="0.8s" fill="freeze"/>
<animate attributeName="y" from="400" to="280" dur="0.8s" fill="freeze"/>
</rect>
<text class="bar-label" x="160" y="340" text-anchor="middle">$45k</text>
<text x="160" y="420" text-anchor="middle" font-weight="bold">Q1</text>
<!-- Q2 Bar -->
<rect x="220" y="250" width="80" height="150" fill="#4A90E2">
<animate attributeName="height" from="0" to="150" dur="0.8s" begin="0.1s" fill="freeze"/>
<animate attributeName="y" from="400" to="250" dur="0.8s" begin="0.1s" fill="freeze"/>
</rect>
<text class="bar-label" x="260" y="310" text-anchor="middle">$52k</text>
<text x="260" y="420" text-anchor="middle" font-weight="bold">Q2</text>
<!-- Q3 Bar -->
<rect x="320" y="210" width="80" height="190" fill="#4A90E2">
<animate attributeName="height" from="0" to="190" dur="0.8s" begin="0.2s" fill="freeze"/>
<animate attributeName="y" from="400" to="210" dur="0.8s" begin="0.2s" fill="freeze"/>
</rect>
<text class="bar-label" x="360" y="285" text-anchor="middle">$61k</text>
<text x="360" y="420" text-anchor="middle" font-weight="bold">Q3</text>
<!-- Q4 Bar -->
<rect x="420" y="160" width="80" height="240" fill="#4A90E2">
<animate attributeName="height" from="0" to="240" dur="0.8s" begin="0.3s" fill="freeze"/>
<animate attributeName="y" from="400" to="160" dur="0.8s" begin="0.3s" fill="freeze"/>
</rect>
<text class="bar-label" x="460" y="260" text-anchor="middle">$73k</text>
<text x="460" y="420" text-anchor="middle" font-weight="bold">Q4</text>
</g>
<!-- X-axis label -->
<text class="axis-label" x="325" y="450" text-anchor="middle">Quarter</text>
</svg>
Qwen3 235B
Value
Valid SVG
View SVG Code
<svg width="500" height="350" xmlns="http://www.w3.org/2000/svg" font-family="Arial, sans-serif">
<!-- Title -->
<text x="250" y="30" font-size="18" text-anchor="middle" fill="#333">Quarterly Revenue</text>
<!-- Axes -->
<line x1="60" y1="300" x2="450" y2="300" stroke="#000" /> <!-- X-axis -->
<line x1="60" y1="50" x2="60" y2="300" stroke="#000" /> <!-- Y-axis -->
<!-- Y-axis gridlines and labels -->
<!-- Max value: $73k, so scale up to $80k -->
<!-- Chart height: 250px (from y=50 to y=300) => 250px = $80k -->
<!-- Scale: 1k = 250 / 80 = 3.125 px per $1k -->
<!-- Gridlines every $20k -->
<g stroke="#ccc" stroke-dasharray="2,2" font-size="12" fill="#555">
<!-- $0 -->
<line x1="60" y1="300" x2="450" y2="300" />
<text x="50" y="304" text-anchor="end">$0k</text>
<!-- $20k -->
<line x1="60" y1="237.5" x2="450" y2="237.5" />
<text x="50" y="241.5" text-anchor="end">$20k</text>
<!-- $40k -->
<line x1="60" y1="175" x2="450" y2="175" />
<text x="50" y="179" text-anchor="end">$40k</text>
<!-- $60k -->
<line x1="60" y1="112.5" x2="450" y2="112.5" />
<text x="50" y="116.5" text-anchor="end">$60k</text>
<!-- $80k -->
<line x1="60" y1="50" x2="450" y2="50" />
<text x="50" y="54" text-anchor="end">$80k</text>
</g>
<!-- Bars -->
<!-- Bar width: 50px, spacing: 60px -->
<g fill="#4A90E2">
<!-- Q1: $45k -->
<rect x="90" y="143.75" width="50" height="156.25" />
<text x="115" y="320" font-size="12" text-anchor="middle" fill="#333">Q1</text>
<!-- Q2: $52k -->
<rect x="170" y="125" width="50" height="175" />
<text x="195" y="320" font-size="12" text-anchor="middle" fill="#333">Q2</text>
<!-- Q3: $61k -->
<rect x="250" y="100.625" width="50" height="199.375" />
<text x="275" y="320" font-size="12" text-anchor="middle" fill="#333">Q3</text>
<!-- Q4: $73k -->
<rect x="330" y="70.625" width="50" height="229.375" />
<text x="355" y="320" font-size="12" text-anchor="middle" fill="#333">Q4</text>
</g>
<!-- Revenue values on bars (optional) -->
<g font-size="12" fill="#fff" text-anchor="middle">
<text x="115" y="139.75">$45k</text>
<text x="195" y="121">$52k</text>
<text x="275" y="96.625">$61k</text>
<text x="355" y="66.625">$73k</text>
</g>
</svg>
Llama 4 Maverick
Valid SVG
View SVG Code
<svg width="600" height="400" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg">
<!-- Title -->
<text x="300" y="30" font-size="24" text-anchor="middle">Quarterly Revenue</text>
<!-- Bars -->
<g transform="translate(50, 350)">
<!-- Q1 -->
<rect x="50" y="-112.5" width="80" height="112.5" fill="#4CAF50" />
<text x="90" y="-120" text-anchor="middle" font-size="14">$45k</text>
<text x="90" y="20" text-anchor="middle" font-size="14">Q1</text>
<!-- Q2 -->
<rect x="180" y="-130" width="80" height="130" fill="#4CAF50" />
<text x="220" y="-137.5" text-anchor="middle" font-size="14">$52k</text>
<text x="220" y="20" text-anchor="middle" font-size="14">Q2</text>
<!-- Q3 -->
<rect x="310" y="-152.5" width="80" height="152.5" fill="#4CAF50" />
<text x="350" y="-160" text-anchor="middle" font-size="14">$61k</text>
<text x="350" y="20" text-anchor="middle" font-size="14">Q3</text>
<!-- Q4 -->
<rect x="440" y="-182.5" width="80" height="182.5" fill="#4CAF50" />
<text x="480" y="-190" text-anchor="middle" font-size="14">$73k</text>
<text x="480" y="20" text-anchor="middle" font-size="14">Q4</text>
</g>
<!-- Y-axis and gridlines -->
<g transform="translate(50, 350)">
<line x1="0" y1="0" x2="0" y2="-250" stroke="#ccc" stroke-width="2" />
<line x1="0" y1="-62.5" x2="550" y2="-62.5" stroke="#ccc" stroke-width="1" stroke-dasharray="2 2" />
<line x1="0" y1="-125" x2="550" y2="-125" stroke="#ccc" stroke-width="1" stroke-dasharray="2 2" />
<line x1="0" y1="-187.5" x2="550" y2="-187.5" stroke="#ccc" stroke-width="1" stroke-dasharray="2 2" />
<line x1="0" y1="-250" x2="550" y2="-250" stroke="#ccc" stroke-width="1" stroke-dasharray="2 2" />
<text x="-30" y="-250" text-anchor="end" font-size="14">$0</text>
<text x="-30" y="-62.5" text-anchor="end" font-size="14">$25k</text>
<text x="-30" y="5" text-anchor="end" font-size="14">$75k</text>
</g>
</svg>
Mistral Large 3
Speed
Valid SVG
View SVG Code
<svg width="500" height="400" viewBox="0 0 500 400" xmlns="http://www.w3.org/2000/svg">
<!-- Title -->
<text x="250" y="30" font-family="Arial" font-size="18" font-weight="bold" text-anchor="middle">Quarterly Revenue (in thousands)</text>
<!-- Y-axis -->
<line x1="60" y1="60" x2="60" y2="340" stroke="black" stroke-width="2"/>
<line x1="55" y1="340" x2="450" y2="340" stroke="black" stroke-width="2"/>
<!-- Y-axis labels and gridlines -->
<g font-family="Arial" font-size="12">
<text x="45" y="70" text-anchor="end">$80k</text>
<line x1="60" y1="70" x2="450" y2="70" stroke="#ddd" stroke-width="1"/>
<text x="45" y="140" text-anchor="end">$60k</text>
<line x1="60" y1="140" x2="450" y2="140" stroke="#ddd" stroke-width="1"/>
<text x="45" y="210" text-anchor="end">$40k</text>
<line x1="60" y1="210" x2="450" y2="210" stroke="#ddd" stroke-width="1"/>
<text x="45" y="280" text-anchor="end">$20k</text>
<line x1="60" y1="280" x2="450" y2="280" stroke="#ddd" stroke-width="1"/>
<text x="45" y="340" text-anchor="end">$0k</text>
</g>
<!-- Bars -->
<g>
<!-- Q1 -->
<rect x="100" y="267" width="60" height="73" fill="#4e79a7"/>
<text x="130" y="260" font-family="Arial" font-size="12" fill="white" text-anchor="middle">$45k</text>
<text x="130" y="360" font-family="Arial" font-size="12" text-anchor="middle">Q1</text>
<!-- Q2 -->
<rect x="180" y="236" width="60" height="104" fill="#f28e2b"/>
<text x="210" y="229" font-family="Arial" font-size="12" fill="white" text-anchor="middle">$52k</text>
<text x="210" y="360" font-family="Arial" font-size="12" text-anchor="middle">Q2</text>
<!-- Q3 -->
<rect x="260" y="201" width="60" height="139" fill="#e15759"/>
<text x="290" y="194" font-family="Arial" font-size="12" fill="white" text-anchor="middle">$61k</text>
<text x="290" y="360" font-family="Arial" font-size="12" text-anchor="middle">Q3</text>
<!-- Q4 -->
<rect x="340" y="158" width="60" height="182" fill="#76b7b2"/>
<text x="370" y="151" font-family="Arial" font-size="12" fill="white" text-anchor="middle">$73k</text>
<text x="370" y="360" font-family="Arial" font-size="12" text-anchor="middle">Q4</text>
</g>
<!-- X-axis title -->
<text x="250" y="390" font-family="Arial" font-size="14" text-anchor="middle">Quarter</text>
</svg>
Kimi K2.5
Valid SVG
View SVG Code
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"></path></svg>Try this comparison in AI Lab
See the full comparison, test your own prompts, and compare any models you want. No commitment on the monthly plan.