skills.rest
dz07
dz07COMMUNITY
Explore all skills by this author →
WebsiteGitHub

SVG

Identifies and fixes common SVG pitfalls in design-system workflows.

Updated Apr 1, 2026
Search Tags:#accessibility#optimization#css#svg#embedding#viewbox
One-click install
npx skills add https://github.com/dz07/goku-skills --skill svg-dz07
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: SVG
Source: https://github.com/dz07/goku-skills/tree/main/skills/svg
Command: npx skills add https://github.com/dz07/goku-skills --skill svg-dz07

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Creating and maintaining scalable, accessible SVG graphics across design systems can be error-prone without consistent rules for viewBox, accessibility markup, and theming.

Core Features & Use Cases

  • ViewBox correctness and scalable rendering for icons and illustrations.
  • Accessibility guidance including role="img" and proper title/desc usage to support screen readers.
  • Theming and embedding guidance for inline and embedded SVGs in web apps and design systems.

Quick Start

Create an accessible SVG with a proper viewBox and currentColor theming, and embed it inline for styling consistency.

Frequently Asked Questions about SVG

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix SVG viewBox issues for scalable rendering?▼

Fix SVG viewBox issues by ensuring the viewBox attribute correctly maps coordinate systems, preventing distortion during scalable rendering of icons and illustrations across design systems.

How do I add accessibility markup to SVG for screen readers?▼

Add accessibility to SVG by including role="img" and proper title and desc tags, supporting screen readers by providing meaningful descriptions for graphics in web apps.

What is the best way to optimize SVGs without losing quality?▼

The best way to optimize SVGs safely is by configuring SVGO for non-destructive optimization, reducing file size while preserving accessibility markup and scalable rendering quality.

How do I use CSS to theme inline SVGs in a design system?▼

Theme inline SVGs in a design system using CSS by applying currentColor for fills and strokes, ensuring embedding and styling consistency across web applications.

Does this approach work for both inline and embedded SVGs?▼

Yes, this approach works for both inline and embedded SVGs, covering theming, accessibility with role and title, and safe optimization within design-system workflows.

Related Skills

Explore More Design & Creative Skills→
anaghkanungo7anaghkanungo7
1

vector-design-best-practices

Guide developers to create accessible, optimized SVG graphics in React/Next.js projects.

Community
Intermediate
drmowinckelsdrmowinckels

hugo-site

Design Hugo sites with standardized templates, asset pipelines, and multilingual configurations.

Community
Advanced
coastdigitalgroupcoastdigitalgroup
2

svg-optimization-implementation

Optimize SVG assets with SVGO, currentColor conversion, and accessibility attributes.

Official
Advanced
farmanlabfarmanlab
1

converting-figma-to-html

Convert Figma MCP design data into Tailwind-based HTML/CSS with data attributes.

Community
Advanced