svg-create

SVG Creation Skill

Create professional SVG diagrams with consistent brand theming.

Project Context — Read project-config.md in the repo root for brand tokens, color palette, and project metadata.

When to Use

• Workflow diagrams and flowcharts
• Architecture diagrams
• Decision trees
• Process visualizations
• Quick reference cards
• Any visual that needs to be version-controlled

SVG Best Practices

Document Structure

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <defs>
    <!-- Reusable styles and markers -->
    <style>
      .title { font: bold 24px 'Segoe UI', Arial, sans-serif; fill: #1F2937; }
      .text { font: 14px 'Segoe UI', Arial, sans-serif; fill: #374151; }
    </style>
    <marker id="arrow" markerWidth="10" markerHeight="7" refX="9" refY="3.5" orient="auto">
      <polygon points="0 0, 10 3.5, 0 7" fill="#6B7280"/>
    </marker>
  </defs>
  
  <!-- Background -->
  <rect width="800" height="600" fill="white"/>
  
  <!-- Content here -->
</svg>

Print-Friendly Design

CRITICAL: Always design for print compatibility:

<!-- ✅ GOOD: Light backgrounds for print -->
<rect fill="white"/>
<rect fill="#F8FAFC"/>  <!-- Very light gray -->
<rect fill="#ECFDF5"/>  <!-- Very light green -->

<!-- ❌ BAD: Dark backgrounds don't print well -->
<rect fill="#1F2937"/>  <!-- Dark navy - avoid -->
<rect fill="black"/>     <!-- Never for large areas -->

Color Palette

<!-- Primary Colors -->
#E10A0A    <!-- Primary Red - primary accent -->
#1F2937    <!-- Navy - text only, not backgrounds -->

<!-- Scenario Colors (use light fills) -->
#ECFDF5    <!-- Light green - new/create -->
#10B981    <!-- Green - borders/accents -->
#EEF2FF    <!-- Light indigo - existing/continue -->
#6366F1    <!-- Indigo - borders/accents -->
#F0F9FF    <!-- Light blue - simple/quick -->
#0EA5E9    <!-- Blue - borders/accents -->
#FFF7ED    <!-- Light orange - warning/emergency -->
#F97316    <!-- Orange - borders/accents -->
#FEF3C7    <!-- Light yellow - help/info -->
#F59E0B    <!-- Amber - borders/accents -->

<!-- Neutral Colors -->
#374151    <!-- Text color -->
#6B7280    <!-- Secondary text -->
#E5E7EB    <!-- Light border -->
#F8FAFC    <!-- Light background -->