SuperAPI AI Directory
Partner中文AI newsFavorites
Skillssvg-graphics

svg-graphics

General & other

View repository

Updated 10-16 05:48

About this skill

SVG Graphics Creation

Create professional vector graphics directly in SVG code. Output clean, well-structured SVG that renders beautifully at any scale.

Quick Reference

Select the appropriate pattern based on request type:

Request Type Reference File Key Elements
Pie/donut charts data-viz.md Arcs, segments, legends
Bar/column charts data-viz.md Rectangles, axes, labels
Line/area charts data-viz.md Paths, points, gradients
People illustrations illustrations.md Simplified human forms
Icons and objects illustrations.md Geometric shapes, paths
Dashboard mockups dashboards.md Cards, metrics, mini-charts
Marketing graphics marketing.md Bold typography, gradients
Infographics infographics.md Combined elements, flow
Desktop/app UI mockups app-ui-mockups.md Window chrome, sidebars, code diffs
SaaS product mockups product-ui-mockups.md Floating panels, shadows, badges
Hand-drawn sketches sketch-explainers.md Wobbly lines, blue/red ink, notebook
Monoline icon systems monoline-icons.md Uniform stroke, no fill, Apple style
Blog featured images featured-images.md 2400x1260, FA icons, depth layers

Core SVG Structure

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 600">
  <defs>
    <!-- Gradients, patterns, filters -->
  </defs>
  <g id="background"><!-- Background elements --></g>
  <g id="content"><!-- Main content --></g>
  <g id="labels"><!-- Text labels --></g>
</svg>

Color Palette System

Default: Site Theme (from globals.css). Use this unless the user specifies otherwise:

Primary:    #C0392B (red — brand color, CTAs, emphasis)
Secondary:  #2D3748 (dark blue-gray — headings, dark backgrounds)
Tertiary:   #16A085 (teal — success, positive indicators)
Action:     #2563EB (blue — links, interactive elements)
Accent:     #F59E0B (amber — warnings, highlights, badges)
Text:       #212121 (near-black — body text, labels)
Background: #FFFFFC (off-white — card/surface backgrounds)
Border:     #DDDDDD (light gray — borders, dividers)

Light tints (for backgrounds/fills): mix theme colors with white at 10-20% opacity. Dark shades (for contrast): mix with #2D3748 at 25-50%.

For additional palettes, see colors.md. Limit to 2-3 colors per graphic unless design requires more.

Typography

Heading font (titles, section headers):

<text font-family="'Really Sans Large', system-ui, sans-serif"
      font-size="28" font-weight="700" fill="#212121">Title</text>

Body font (labels, captions, body text):

<text font-family="'Really Sans Small', system-ui, sans-serif"
      font-size="14" fill="#212121">Label</text>

Size hierarchy: Titles 24-32px, subtitles 16-20px, labels 12-14px, captions 10-12px

Font weight: Use font-weight attribute (100-900). Both font families support variable weights.

Background preference: Default to light backgrounds (#FFFFFC, #FFFFFE, or light gradients). Only use dark backgrounds when explicitly requested.

Icons — FontAwesome

When SVGs need icons (UI mockups, infographics, marketing graphics, dashboards), use FontAwesome.

Local Installation (Preferred)

FontAwesome Pro is installed locally:

~/Icons/svgs/
├── solid/       (primary, filled style)
├── regular/     (outline style, lighter)
├── light/       (thinner outline style)
├── thin/        (thinnest outline style)
├── duotone/     (two-tone layered style)
├── sharp-solid/ (sharp corners, filled)
├── sharp-regular/ (sharp corners, outline)
├── sharp-light/ (sharp corners, light)
└── brands/      (WordPress, YouTube, GitHub, etc.)

How to use:

  1. Read the .svg file to get the <path d="..."> and viewBox
  2. Embed inline using <g> with transform for positioning/scaling
<g transform="translate(100, 200) scale(0.08)">
  <path d="M0 64C0 28.7 28.7 0 64 0L352..." fill="#2D3748"/>
</g>

Scaling math: FontAwesome icons use large viewBoxes (typically 0 0 512 512 or 0 0 640 512). Formula: scale = target_size / icon_viewbox_width

Target Size Scale (512 vBox) Scale (640 vBox)
24px 0.047 0.038
32px 0.063 0.05
48px 0.094 0.075
64px 0.125 0.1
96px 0.188 0.15

GitHub Fallback

If local FA icons aren't available or you need a specific icon not in the local set, fetch from the FontAwesome GitHub repo:

https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs/solid/{icon-name}.svg
https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs/regular/{icon-name}.svg
https://raw.githubusercontent.com/FortAwesome/Font-Awesome/6.x/svgs/brands/{icon-name}.svg

Use WebFetch to grab the SVG content, then extract the <path> data and embed inline.

Common Icons by Topic

Topic Solid Icons
Money / Income dollar-sign, money-bill, coins, piggy-bank, wallet, chart-line
WordPress brands/wordpress, brands/wordpress-simple
SEO magnifying-glass, chart-simple, arrow-trend-up
Email envelope, paper-plane, at, inbox
Tools screwdriver-wrench, gear, gears, toolbox, wand-magic-sparkles
Speed bolt, gauge-high, rocket, stopwatch
Security shield-halved, lock, key, user-shield
Code / Dev code, terminal, bug, laptop-code, file-code
AI robot, microchip, brain, wand-magic-sparkles
Analytics chart-bar, chart-pie, chart-line, chart-area
Design palette, paintbrush, swatchbook, pen-ruler
Shopping cart-shopping, bag-shopping, tags, receipt
Social brands/twitter, brands/youtube, brands/instagram, brands/linkedin

Essential Techniques

Rounded Rectangles

<rect x="10" y="10" width="100" height="50" rx="8" ry="8" fill="#2563eb"/>

Arcs for Pie Charts

Calculate arc endpoints using: x = cx + r * cos(angle), y = cy + r * sin(angle)

<path d="M cx cy L x1 y1 A r r 0 largeArc 1 x2 y2 Z" fill="#color"/>

Smooth Curves

<path d="M 0 100 Q 50 50 100 100 T 200 100" stroke="#2563eb" fill="none"/>

Drop Shadows

<defs>
  <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
    <feDropShadow dx="0" dy="4" stdDeviation="8" flood-opacity="0.1"/>
  </filter>
</defs>
<rect filter="url(#shadow)" .../>

Mobile-Friendly SVG Rules

All SVGs must render well on mobile screens (375px width and up):

  1. Always use viewBox — never set fixed width/height in pixels. Let the SVG scale.
  2. Minimum text size: 12px equivalent at the viewBox scale. Anything smaller becomes unreadable on mobile.
  3. Touch-friendly spacing: Keep interactive/important elements at least 44px apart (at rendered size).
  4. Test at 375px wide: Mentally verify labels and key details remain legible when the SVG is scaled to mobile width.
  5. Prefer horizontal layouts for banner/hero SVGs. Tall vertical compositions get tiny on mobile.
  6. Responsive embed: When referencing SVGs in HTML, use width="100%" height="auto" or CSS max-width: 100%.
  7. Avoid tiny details that disappear at small sizes — simplify strokes and small icons for mobile clarity.

Output Guidelines

  1. Always include xmlns="http://www.w3.org/2000/svg" and a viewBox
  2. Group related elements using <g> with descriptive id attributes
  3. Use <defs> for reusable elements, gradients, and filters
  4. Round numeric values to 2 decimal places maximum
  5. Include readable whitespace and indentation
  6. Add comments for complex path data

Execution Steps

  1. Identify graphic type and read the appropriate reference file
  2. Plan layout: dimensions, spacing, element positions
  3. Define colors and gradients/filters in <defs>
  4. Build structural elements (backgrounds, containers)
  5. Add data elements (bars, slices, lines, illustrations)
  6. Apply labels and text
  7. Review spacing and alignment
  8. Output as .svg file

For detailed patterns and examples, consult the reference files linked above.