ClawKit Logo
ClawKitReliability Toolkit
Back to Registry
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
Or

Quick Reference

TopicFileKey Trap
viewBox & Scalingviewbox.mdMissing viewBox = no scaling
Screen Readersaccessibility.mdrole="img" + title as first child
SVGO Configoptimization.mdDefault removes viewBox/title
Inline vs imgembedding.md<img> cannot be styled with CSS
currentColorstyling.mdHardcoded 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
Views0
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

Animations

Create performant web animations with proper accessibility and timing.

ivangdavila 2190

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