skills.rest
yw662
yw662COMMUNITY
Explore all skills by this author →
WebsiteGitHub

svg

Create SVG elements with correct namespace handling in rikka-dom.

6|1|Updated May 31, 2026
Search Tags:#svg#namespace#vector graphics#rikka-dom#signal binding#svg helpers
One-click install
npx skills add https://github.com/yw662/rikka --skill svg-yw662
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svg
Source: https://github.com/yw662/rikka/tree/main/skills/svg
Command: npx skills add https://github.com/yw662/rikka --skill svg-yw662

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps you create SVG markup in rikka without namespace mistakes, making it easier to draw icons, diagrams, charts, and interactive graphics that render correctly in the browser.

Core Features & Use Cases

  • Automatic SVG Namespace Handling: Rikka-dom creates SVG elements in the right namespace so you can focus on layout instead of XML details.
  • Collision-Safe Tag Helpers: Use svg-prefixed helpers for tags that overlap with HTML, such as links, scripts, styles, titles, text, spans, and textPath.
  • Signal-Driven Graphics: Bind reactive values directly into SVG attributes and templates for live-updating visuals.
  • Use Case: Build a responsive chart with gradients, paths, labels, and embedded HTML content while keeping the markup type-safe and maintainable.

Quick Start

Ask for an SVG example in rikka that draws a shape with a gradient and uses the correct helpers for SVG-only and shared HTML-SVG tags.

Frequently Asked Questions about svg

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

FAQPage Schema
How do I create SVG elements with correct namespaces in rikka-dom?▼

To create SVG elements with correct namespaces in rikka-dom, use svg-prefixed helpers for tags that collide with HTML, ensuring shapes, gradients, and paths render in the proper XML namespace.

Why do my SVG text and title tags render as HTML elements instead of vector graphics?▼

SVG text and title tags render as HTML elements because of tag name collisions. Use svg-prefixed helpers for overlapping tags like text, title, span, and script to ensure correct SVG namespace creation.

How do I bind reactive signals to SVG attributes for live-updating charts?▼

Bind reactive signals to SVG attributes for live-updating charts by applying signal-aware attribute binding directly within your rikka-dom markup, allowing visual properties to update dynamically.

What's the best way to draw SVG gradients and paths without namespace mistakes?▼

The best way to draw SVG gradients and paths without namespace mistakes is to use rikka-dom's automatic SVG namespace handling alongside collision-safe svg-prefixed helpers for shared HTML tags.

Can I embed HTML content inside an SVG using rikka-dom?▼

Yes, you can embed HTML content inside an SVG using rikka-dom by utilizing the svg-prefixed helpers for overlapping tags, which correctly separate SVG and HTML namespaces during element creation.

When do I need to use svg-prefixed helpers for vector graphics?▼

You need to use svg-prefixed helpers for vector graphics when a tag name overlaps with HTML, specifically for links, scripts, styles, titles, text, spans, and textPath elements.

Related Skills

Explore More Software Engineering Skills→
yw662yw662
6

custom-element

Define typed Web Components with reactive attributes, events, and lifecycle behavior.

Community
Advanced
carlos3gcarlos3g
2

svg

Optimize SVG rendering in React Native apps with performance tips.

Community
Intermediate
yw662yw662
6

signal-binding

Bind reactive signal values into DOM text, attributes, and template slots.

Community
Intermediate
yw662yw662
6

dom-creation

Create real DOM elements with rikka-dom tag helpers and TypeScript inference.

Community
Intermediate