| name | svg-professional |
| description | Create publication-quality SVG diagrams, charts, and infographics with professional connector routing, pixel-perfect alignment, and polished visual design. Covers all SVG types: flowcharts, architecture diagrams, quadrant charts, scatter plots, timelines, org charts, matrices, process maps, and any data visualization rendered as SVG. Use this skill whenever the user asks to create, improve, or fix any SVG file — even if they just say "diagram", "chart", "visual", "infographic", "fluxo", "diagrama", "quadrante", or "make me an SVG". Also trigger when the user shares an existing SVG and asks to improve its quality, fix alignment, or make it look more professional. This skill is specifically for hand-crafted SVG markup (not libraries like D3 or chart.js); for interactive HTML dashboards, use a dashboard skill instead.
|
Professional SVG Creation
This skill produces SVGs that look like they came from a senior information designer using Visio or Figma — not
like auto-generated markup. The difference between amateur and professional SVG comes down to five disciplines:
connector routing, spatial math, typographic hierarchy, color semantics, and text-fit awareness. Master all five
and every SVG you produce will look polished.
Before writing any SVG code, read the two golden reference files in references/:
references/golden-flowchart.svg — A 4-flow horizontal diagram with orthogonal routing, forked paths, metric badges, section backgrounds, and a legend. This is the canonical example for any diagram with boxes and arrows.references/golden-quadrant.svg — A scatter-plot quadrant chart with axes, gridlines, data dots with leader lines, and a 4-item legend. This is the canonical example for any chart with plotted data points.
Study whichever reference matches the requested SVG type. If the request doesn't match either exactly, blend techniques from both.
1. Planning Phase (before writing any SVG code)
Every SVG starts with spatial math on paper, not in code. Skipping this step is the #1 cause of overlapping
elements, clipped text, and misaligned arrows.
1.1 Choose canvas dimensions
Pick viewBox dimensions that give breathing room. Typical sizes:
| Type | viewBox | Orientation |
|---|
| Flowchart (3-4 columns) | 0 0 1120 720 | Landscape |
| Flowchart (5+ columns) | 0 0 1400 720 | Wide landscape |
| Vertical flow | 0 0 720 1100 | Portrait |
| Quadrant / scatter | 0 0 1200 1800 | Tall portrait |
| Timeline | 0 0 1200 600 | Wide landscape |
| Matrix / table | 0 0 1100 800 | Landscape |
| Org chart | 0 0 1000 1200 | Portrait |
Set both viewBox and explicit width/height attributes so the SVG scales predictably.
1.2 Define the spatial grid
Before writing a single <rect>, calculate every element's position on paper:
- Reserve margins: title block (top ~90px), legend (bottom ~60px), section labels (left ~100px if rotated), metric badges (right ~130px if used).
- Compute center lines: for each row/section, calculate
center_y. All boxes in that row share this value. Example: section background y=232, h=130 → center_y = 297.
- Size boxes to fit text: estimate text width at ~7.5px per character at font-size 13. A label "Terraform / Bicep" (17 chars) needs ~128px, so the box width should be at least 148px (128 + 20px padding).
- Compute anchor points: for a box at
(x, y, w, h), the four anchors are:
- right-center:
(x+w, y+h/2)
- left-center:
(x, y+h/2)
- top-center:
(x+w/2, y)
- bottom-center:
(x+w/2, y+h)
- Verify no overlaps: ensure the rightmost box + gap doesn't collide with the badge column. Ensure forked paths have enough vertical spread between target boxes (minimum 40px center-to-center).
Write these calculations as comments in the SVG before drawing anything.
1.3 Text-fit rule
This is critical: never break a word across two lines. If a label like "CONTAINERIZATION" won't fit
horizontally in the available space, you have three options (in order of preference):
- Rotate the text -90° using
transform="rotate(-90 cx cy)" with text-anchor="middle" so it reads vertically.
- Use a shorter synonym ("CONTAINERS" instead of "CONTAINERIZATION").
- Increase the available space — widen the gutter, section, or box.
Never split "PROVISION" / "ING" across two lines. Apply this same rule to box labels, axis labels, legend text, and any other text element.
2. Connector Routing (for diagrams with arrows)
This is what separates amateur from professional diagrams. Every arrow follows these five rules:
2.1 Orthogonal routing
Arrows follow paths at 90° angles only (horizontal + vertical segments). Never use diagonal lines between boxes.
Use <path> elements, not <line>, because paths support multi-segment routing.
2.2 Smooth corner routing
At every 90° turn, use a quadratic Bézier curve (Q) instead of a sharp corner. Standard radius: 8-10px.
Pattern for a right-then-down turn at point (cx, cy) with radius r=8:
... H(cx-8) Q cx,cy cx,(cy+8) V ...
Full example — horizontal exit, turn down, turn right into target:
<path d="M553,157 H598 Q608,157 608,167 V173 Q608,183 618,183 H659"
stroke="#B4B2A9" stroke-width="1.3" fill="none" marker-end="url(#arr)"/>
This path: goes right to x=598, curves down (608,157→608,167), goes down to y=173, curves right (608,183→618,183), then goes right to x=659.
2.3 Anchor point discipline
Every arrow starts at the exact center of a box edge and ends at the exact center of the target box edge. Compute these from the box's (x, y, w, h) — never eyeball them.
2.4 Endpoint snapping
End the path 1px before the target box edge. The arrow marker's refX positions the triangular tip exactly at the endpoint, so it touches the border without overlapping.
2.5 Arrow marker definition
Use a single reusable marker in <defs>. The canonical marker:
<defs>
<marker id="arr" markerWidth="9" markerHeight="8" refX="8" refY="4" orient="auto">
<path d="M1,1.2 L8,4 L1,6.8" fill="#B4B2A9" stroke="none"/>
</marker>
</defs>
The marker color (#B4B2A9) is deliberately muted — arrows are guides, not the focal point.
3. Visual Design System
3.1 Color palette
The default palette uses Microsoft brand colors for accent and warm grays for structure. Adapt the accent colors to the client's brand if needed, but always keep the neutral grays.
Accent colors (Microsoft default):
| Name | Hex | Usage |
|---|
| Blue | #0078D4 | Primary accent, Azure services |
| Green | #7FBA00 | Success, outputs, production |
| Yellow | #FFB900 | Caution, generated artifacts |
| Red | #F25022 | Security, alerts |
| Dark amber | #BA7517 | Text variant for yellow (better contrast on white) |
Neutral colors (always use these):
| Name | Hex | Usage |
|---|
| Near-black | #2C2C2A | Primary text, titles |
| Dark gray | #5F5E5A | Axis titles, secondary headings |
| Medium gray | #888780 | Subtitles, descriptions, muted text |
| Light gray | #B4B2A9 | Arrows, borders, axis lines, leader lines |
| Pale gray | #D3D1C7 | Gridlines, dividers |
| Off-white | #E8E6DF | Separator lines, legend borders |
3.2 Section backgrounds
Group related content with faintly tinted rectangles. The key is extreme subtlety — opacity between 0.03 and 0.05. These create visual lanes without competing with the actual content.
<rect x="40" y="92" width="1040" height="130" rx="8" fill="#0078D4" opacity="0.03"/>
3.3 Accent bar
Place a 4-color bar (3px tall) under the title to add brand polish:
<rect x="60" y="74" width="60" height="3" rx="1.5" fill="#0078D4"/>
<rect x="124" y="74" width="60" height="3" rx="1.5" fill="#7FBA00"/>
<rect x="188" y="74" width="60" height="3" rx="1.5" fill="#FFB900"/>
<rect x="252" y="74" width="60" height="3" rx="1.5" fill="#F25022"/>
3.4 Metric badges
Use pill-shaped badges with tinted backgrounds to highlight KPIs. Align all badges in a vertical column at the right margin, vertically centered on each row's center_y:
<rect x="920" y="143" width="110" height="28" rx="14" fill="#0078D4" opacity="0.07"/>
<text x="975" y="162" text-anchor="middle" font-size="12" font-weight="600" fill="#0078D4">~85% faster</text>
The column alignment is essential — all badges share the same x position.
3.5 AI-assisted node indicator
When a box represents an AI/copilot step, add a small circle with a star icon inside:
<circle cx="393" cy="157" r="8" fill="#0078D4" opacity="0.15"/>
<text x="393" y="161" font-size="9" fill="#0078D4" text-anchor="middle" font-weight="700">✦</text>
4. Typography
4.1 Font stack
Always use the system font stack for cross-platform rendering:
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif
4.2 Type scale
| Role | font-size | font-weight | fill color |
|---|
| Main title | 24-28 | 700 | #2C2C2A |
| Subtitle | 14-16 | 400 | #888780 |
| Box primary label | 13-14 | 600 | #2C2C2A or accent |
| Box secondary label | 11 | 400 | #888780 |
| Section label (rotated) | 10 | 700 | accent, opacity 0.40-0.45 |
| Axis label | 14 | 400 | #888780 |
| Axis title | 15 | 400 | #5F5E5A |
| Legend text | 12-13 | 500 | #2C2C2A |
| Badge text | 12 | 600 | accent color |
4.3 Vertical centering in boxes
For a box at (x, y, w, h):
- Single-line text:
text_y = y + h/2 + font_size/3 (approximate visual center).
- Two-line text:
line1_y = y + h*0.43, line2_y = y + h*0.74 (for h=46 and font-sizes 13+11).
Always use text-anchor="middle" with text_x = x + w/2.
5. Chart-Specific Patterns
5.1 Quadrant / scatter charts
See references/golden-quadrant.svg for the full pattern. Key elements:
- Quadrant backgrounds: 4 rectangles with semantic colors at opacity 0.04.
- Dividers: dashed lines (
stroke-dasharray="6 4") in #D3D1C7.
- Axes: solid lines in
#B4B2A9, with gridlines at stroke-width="0.4" and stroke-dasharray="3 5".
- Data dots:
<circle> with fill=accent, stroke=white, stroke-width=3. This gives a floating-dot effect.
- Leader lines: subtle lines (stroke-width=0.7, opacity=0.4) connecting dots to their labels. These prevent labels from cluttering the chart.
- Quadrant names: large text (font-size 20, font-weight 600) in accent color at opacity 0.35 — visible but not dominant.
5.2 Timeline diagrams
- Use a single horizontal axis line with labeled tick marks.
- Place event cards above or alternating above/below the axis.
- Connect cards to the axis with vertical leader lines.
- Use section backgrounds for time phases (e.g., Q1, Q2).
5.3 Matrix / table layouts
- Use alternating row backgrounds (white and a very faint gray at opacity 0.03).
- Align all text to consistent x positions (like a table grid).
- Use section headers with accent-colored left borders.
5.4 Org charts
- Use vertical connector routing (top-center to bottom-center).
- Center children under parents with horizontal distribution.
- Apply the same Q-curve corners for orthogonal routing.
6. Legend
Every SVG with more than 2 visual categories needs a legend. Place it at the bottom, separated by a thin horizontal line:
<line x1="40" y1="660" x2="1080" y2="660" stroke="#E8E6DF" stroke-width="1"/>
Legend items use mini-samples of the actual visual elements (circles, colored rectangles, badge shapes) — not
just colored squares. This makes the legend self-documenting.
7. Quality Checklist
Before delivering any SVG, verify:
8. SVG Code Structure
Organize the SVG code in this order (matching the golden references):
<defs> — markers, filters, gradients- Title block — main title, subtitle, accent bar
- Section backgrounds — tinted rectangles
- Section labels — rotated text in left gutter
- Metric badges — aligned column at right margin
- Content sections — boxes, arrows, data points (one commented section per flow/group)
- Legend — separator line + legend items
Use <!-- ============= --> comment blocks to separate each section for readability.
