Official Verified

SVG

Create and optimize SVG graphics with proper viewBox, accessibility, and CSS styling.

skill-install — Terminal

Install via CLI (Recommended)

clawhub install openclaw/skills/skills/ivangdavila/svg

Download Source Code (.zip)

Quick Reference

Topic	File	Key Trap
viewBox & Scaling	`viewbox.md`	Missing viewBox = no scaling
Screen Readers	`accessibility.md`	role="img" + title as first child
SVGO Config	`optimization.md`	Default removes viewBox/title
Inline vs img	`embedding.md`	`<img>` cannot be styled with CSS
currentColor	`styling.md`	Hardcoded fills block theming

Critical Defaults

<!-- Minimum viable SVG -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
  <path d="..."/>
</svg>

Common Mistakes Checklist

viewBox present (not just width/height)
Coordinates within viewBox bounds
No hardcoded fill="#000" if theming needed
role="img" + <title> for informative SVGs
aria-hidden="true" for decorative SVGs
Unique IDs across all inline SVGs on page
xmlns included for external .svg files

Memory Storage

User preferences persist in ~/svg/memory.md. Create on first use.

## User Preferences
<!-- SVG workflow defaults. Format: "setting: value" -->
<!-- Examples: default_viewbox: 0 0 24 24, prefer_inline: true -->

## Accessibility Mode
<!-- informative | decorative -->

## Optimization
<!-- Tool and settings. Format: "tool: setting" -->
<!-- Examples: svgo: preset-default, remove_metadata: true -->

## Icon Defaults
<!-- Fill and sizing preferences -->
<!-- Examples: fill: currentColor, default_size: 24x24 -->

Empty sections = use skill defaults. Learns user preferences over time.

Read Full Documentation on GitHub

Metadata

Author@ivangdavila

Stars2102

Updated2026-03-06

View Author Profile

AI Skill Finder

Not sure this is the right skill?

Describe what you want to build — we'll match you to the best skill from 16,000+ options.

Find the right skill

Add to Configuration

Paste this into your clawhub.json to enable this plugin.

{
  "plugins": {
    "official-ivangdavila-svg": {
      "enabled": true,
      "auto_update": true
    }
  }
}

Safety NoteClawKit audits metadata but not runtime behavior. Use with caution.

Related Skills

Arduino

Develop Arduino projects avoiding common wiring, power, and code pitfalls.

ivangdavila 2190

Bulgarian

Write Bulgarian that sounds human. Not formal, not robotic, not AI-generated.

ivangdavila 2190

Arabic

Write Arabic that sounds human. Not formal, not robotic, not AI-generated.

ivangdavila 2190

Assistant

Manage tasks, communications, and scheduling with proactive and organized support.

ivangdavila 2190

Alerts

Smart alerting patterns for AI agents - deduplication, routing, escalation, and fatigue prevention

ivangdavila 2190