SVG Generator Skill
Generate beautiful, customizable SVG backgrounds and graphics for websites, presentations, and more.
Features
- 4 Styles: tech, minimal, geometric, abstract
- 5 Color Schemes: blue-purple, gray-blue, teal-cyan, green-blue, custom
- Local Execution: No API costs, completely free
- Web Ready: Responsive design, optimized for web use
Quick Start
# Generate tech-style background
svg-generator --style tech --colors blue-purple --output hero-bg.svg
# Generate minimal background
svg-generator --style minimal --colors gray-blue --output simple-bg.svg
# Generate geometric pattern
svg-generator --style geometric --colors teal-cyan --output pattern-bg.svg
# Generate abstract art
svg-generator --style abstract --colors green-blue --output art-bg.svg
Styles Available
| Style |
Description |
Best For |
tech |
Abstract tech elements (data flows, nodes, circuits) |
Tech websites, SaaS landing pages |
minimal |
Clean, simple gradients and shapes |
Professional sites, portfolios |
geometric |
Mathematical patterns and geometric shapes |
Modern designs, dashboards |
abstract |
Artistic abstract compositions |
Creative projects, social media |
Color Schemes
| Scheme |
Colors |
Use Case |
blue-purple |
Tech blue to purple gradient |
SaaS, tech products |
gray-blue |
Professional gray to blue |
Corporate, business |
teal-cyan |
Modern teal to cyan |
Fresh, modern designs |
green-blue |
Nature-inspired green to blue |
Eco, wellness brands |
custom |
Specify your own hex colors |
Brand-specific needs |
Advanced Usage
Custom Colors
svg-generator --style tech --colors "#FF6B6B-#4ECDC4" --output custom.svg
Generate PNG
# First generate SVG, then convert
svg-to-png input.svg output.png --width 1920 --height 1080
Bundled Resources
Scripts
scripts/generate-svg.js - Main SVG generation scriptscripts/svg-to-png.js - Convert SVG to PNGscripts/ppt-image-generator.js - Generate images for PPT templates
Assets
assets/ - Sample SVG outputs for reference
Integration Examples
Website Hero Background
svg-generator --style tech --colors blue-purple --output public/hero-bg.svg
Social Media Post
svg-generator --style abstract --colors teal-cyan --output social-post.svg
svg-to-png social-post.svg social-post.png --width 1080 --height 1080
Presentation Slide
ppt-image-generator --template modern --output slide-bg.svg
Related Skills
pptx-2 - For integrating SVG into PowerPoint presentationsdiagram - For generating diagrams alongside backgrounds
1---2name: svg-generator3description: Generate customizable SVG backgrounds and graphics with multiple styles (tech, minimal, geometric, abstract) and color schemes. Use when creating website backgrounds, presentation slides, social media graphics, or UI decorative elements.4---56# SVG Generator Skill78Generate beautiful, customizable SVG backgrounds and graphics for websites, presentations, and more.910## Features11- **4 Styles**: tech, minimal, geometric, abstract12- **5 Color Schemes**: blue-purple, gray-blue, teal-cyan, green-blue, custom13- **Local Execution**: No API costs, completely free14- **Web Ready**: Responsive design, optimized for web use1516## Quick Start1718```bash19# Generate tech-style background20svg-generator --style tech --colors blue-purple --output hero-bg.svg2122# Generate minimal background23svg-generator --style minimal --colors gray-blue --output simple-bg.svg2425# Generate geometric pattern26svg-generator --style geometric --colors teal-cyan --output pattern-bg.svg2728# Generate abstract art29svg-generator --style abstract --colors green-blue --output art-bg.svg30```3132## Styles Available3334| Style | Description | Best For |35|-------|-------------|----------|36| `tech` | Abstract tech elements (data flows, nodes, circuits) | Tech websites, SaaS landing pages |37| `minimal` | Clean, simple gradients and shapes | Professional sites, portfolios |38| `geometric` | Mathematical patterns and geometric shapes | Modern designs, dashboards |39| `abstract` | Artistic abstract compositions | Creative projects, social media |4041## Color Schemes4243| Scheme | Colors | Use Case |44|--------|--------|----------|45| `blue-purple` | Tech blue to purple gradient | SaaS, tech products |46| `gray-blue` | Professional gray to blue | Corporate, business |47| `teal-cyan` | Modern teal to cyan | Fresh, modern designs |48| `green-blue` | Nature-inspired green to blue | Eco, wellness brands |49| `custom` | Specify your own hex colors | Brand-specific needs |5051## Advanced Usage5253### Custom Colors54```bash55svg-generator --style tech --colors "#FF6B6B-#4ECDC4" --output custom.svg56```5758### Generate PNG59```bash60# First generate SVG, then convert61svg-to-png input.svg output.png --width 1920 --height 108062```6364## Bundled Resources6566### Scripts67- `scripts/generate-svg.js` - Main SVG generation script68- `scripts/svg-to-png.js` - Convert SVG to PNG69- `scripts/ppt-image-generator.js` - Generate images for PPT templates7071### Assets72- `assets/` - Sample SVG outputs for reference7374## Integration Examples7576### Website Hero Background77```bash78svg-generator --style tech --colors blue-purple --output public/hero-bg.svg79```8081### Social Media Post82```bash83svg-generator --style abstract --colors teal-cyan --output social-post.svg84svg-to-png social-post.svg social-post.png --width 1080 --height 108085```8687### Presentation Slide88```bash89ppt-image-generator --template modern --output slide-bg.svg90```9192## Related Skills93- `pptx-2` - For integrating SVG into PowerPoint presentations94- `diagram` - For generating diagrams alongside backgrounds
dvcrn