メニュー
SVG.js — lightweight SVG manipulation & animation library. Zero dependencies, chainable API, full SVG spec coverage. Create/position/animate shapes (rect/circle/ellipse/line/polyline/polygon/path), text, images, groups, gradients, masks, patterns, text paths.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
| name | svgjs |
| description | SVG.js — lightweight SVG manipulation & animation library. Zero dependencies, chainable API, full SVG spec coverage. Create/position/animate shapes (rect/circle/ellipse/line/polyline/polygon/path), text, images, groups, gradients, masks, patterns, text paths. |
Zero-dependency SVG manipulation and animation. npm install @svgdotjs/svg.js or import { SVG } from '@svgdotjs/svg.js'
Use when drawing SVG, animating vector graphics, building data visualizations, creating SVG-based UI components, or manipulating SVG DOM.
SVG() — entry point for everything: create doc, get from DOM, create from fragment:
const draw = SVG().addTo('body').size(300, 300) // SVG doc MUST have explicit size()
const rect = SVG('#myRect') // get from DOM
const el = SVG('<circle>') // create from fragment
Chainable — every setter returns this:
draw.rect(100, 100).fill('#f06').stroke({ width: 2, color: '#000' }).move(50, 50)
// .animate() starts animation chain, returns SVG.Runner (NOT the element)
rect.animate(1000).move(200, 200).fill('#0f0')
rect.animate({ duration: 2000, delay: 500, times: 3 }).rotate(45)
// Sequence: rect.animate().fill('#f03').animate().dmove(50, 50)
Quick example:
import { SVG } from '@svgdotjs/svg.js'
const draw = SVG().addTo('body').size(400, 300)
draw.rect(100, 100).fill('#f06').move(50, 50)
draw.circle(50).fill('#0f0').center(200, 150)
draw.text('Hello').font({ family: 'Arial', size: 24 }).move(50, 200)
references/shapes.mdreferences/text-image.mdreferences/manipulating.mdreferences/animating.mdreferences/containers.mdreferences/events.mdreferences/utilities.mdreferences/classes.mdsize() — defaults to 0×0 without it.animate() returns Runner, not element — chain .animate() again for sequencingrect.cx(50) works though cx isn't native to rectnested() for positioned containers\n or tspan().newLine()css() sets inline styles, attr() sets SVG attributesSVG() call creates invisible parser <svg> — normal, documented in FAQCrawl and analyze a website's visual design system from a given URL, identifying design style, color system, typography, component styles, and UI patterns. Output a structured design specification document for UI generation. Suitable for competitive design analysis, UI restoration, design system reverse engineering, style migration, and similar scenarios.
Agent Skills standard reference guide. Covers SKILL.md specification format, progressive loading, skill discovery and activation, authoring best practices, quality evaluation, description optimization, and more.
Loop Engineering AI programming paradigm guide. Covers the core concepts of transitioning from single prompt calls to autonomous loop systems, key components, loop patterns, configuration examples, and anti-patterns.
A professional email writing assistant. Based on the user's email purpose and content points, writes clear, concise, and polite emails covering subject, body, and attachment notes, adapted to different audiences and scenarios.
A senior industry research consultant. Conducts in-depth analysis of specified industries, covering development history, industry trends, competitive landscape, and technological innovation, and outputs forward-looking, actionable recommendations.
A professional job description (JD) writing assistant. Based on job title and recruitment requirements, writes precise, professional, and compelling job descriptions covering three modules: job responsibilities, qualifications, and key skills.