'svg' 검색 결과

Build image export features for HTML elements with snapDOM. The skill covers SVG, PNG, JPG, and WebP output, preserving styles and fonts, adjusting dimensions, excluding elements, and troubleshooting missing resources.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Adding image downloads for HTML elements
• Exporting charts and graphics as SVG
• Creating images with specified dimensions

Turn JSON layout definitions into SVG or PNG images with Satori. Use this skill to create social sharing previews and cards, assemble standard layout and text components, or define custom components for image specifications.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating social sharing preview images from JSON
• Building social cards with standard components
• Rendering AI-generated JSON image definitions

Turn technical ideas into detailed, interactive SVG illustrations that resemble real machines or instruments. Moving parts and live readings share the same model, creating diagrams for articles, documentation, or landing pages that readers can explore.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Illustrate a technical concept in an article
• Explain an algorithm through a moving machine
• Create an interactive landing page figure

Turn structured JSON into editable SVG diagrams for system architectures, workflows, and pipelines. Specify positions, connections, and groups precisely, reproduce the same output under fixed rendering conditions, and convert figures to PDF for papers.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating architecture diagrams for technical papers
• Illustrating workflows and processing pipelines
• Adjusting diagram layouts through JSON specifications

Build dense, frequently updated charts with Canvas2D, including zooming, clicking, and dragging. Guides rendering performance, mobile interactions, and the use of SVG or HTML for labels, controls, and accessibility.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Build a scatterplot with a million points
• Add selection and zoom to a timeline
• Move an SVG heatmap to Canvas while preserving labels

Build custom browser charts with D3, including precise labels, annotations, zooming, and range selection. Create SVG graphics that adapt to mobile screens, use meaningful contextual backgrounds, and support export when needed.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating SVG charts with direct labels and annotations
• Adding zoom and range selection to scatterplots
• Plotting data over a soccer pitch or floor plan

Guides logo design from a brand brief through concept comparison, SVG artwork, and checks at small sizes and in one color. After a direction is approved, it prepares variants, icons, presentation materials, and usage guidelines.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Developing logo concepts for a new brand
• Reviewing or refreshing an existing logo
• Creating favicons and app icons from a logo

로컬에 있는 여러 AI 개발 에이전트의 로그를 집계해 토큰 수와 API 환산 비용을 SVG 카드로 만듭니다. README나 자료에 사용할 이용 현황을 정리할 수 있습니다.

• README에 에이전트 이용 현황을 표시합니다
• 여러 에이전트의 활동을 공유합니다
• 토큰 수와 API 환산 비용을 시각화합니다

코드 변경과 시스템 구성을 움직이는 SVG 그림으로 설명합니다. 변경 부분과 주변 구성 요소의 관계, 데이터 흐름을 시각화해 풀 리퀘스트에서 공유하도록 돕습니다.

• 구성도로 풀 리퀘스트를 설명합니다
• 데이터 흐름을 순서대로 시각화합니다
• 변경 부분과 주변 관계를 정리합니다

과학 원리, 사물의 구조, 작업 흐름을 색상과 여백이 일관된 SVG 도표로 만듭니다. 밝은 화면과 어두운 화면을 지원하며 단일 HTML 파일로 출력합니다.

• 교재용 과학 원리 도해 제작
• 단면도와 층별 도표로 구조 설명
• 작업 공정과 데이터 흐름 시각화

Audit website images for excessive file sizes, unnecessary metadata, and loading issues. Apply format-specific compression and cleanup, then compare file sizes before and after changes to show the resulting reduction in image data.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Finding images that slow page loading
• Comparing file sizes before and after compression
• Removing unnecessary image metadata

Turn written descriptions or Mermaid code into diagrams showing processes, interactions, and data relationships. Choose a color theme and save both SVG files, which stay sharp when enlarged, and high-resolution PNG images.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Illustrating workflows and decision trees
• Diagramming API interactions
• Visualizing database relationships

Style text and SVG elements inside Remotion Studio’s CSS reset containers. This skill explains which properties are reset and how to apply styles directly to nested elements when parent styles do not carry through.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Fix nested text that ignores a parent’s styles
• Apply intended styles to SVG elements
• Check which properties the Studio CSS reset affects

Build web animations with Anime.js, from staggered text and image reveals to SVG shape changes and animated lines. Coordinate timing, overlapping motion, and responses to user input while accounting for accessibility and performance.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Coordinate multi-stage landing page animations
• Reveal text and grids with staggered timing
• Animate SVG shapes and line drawing

Create and review icons for Kilo’s VS Code extension and webviews, the extension’s embedded interface panels. Choose existing icons or suitable SVG assets, register them correctly, and check theme appearance and accessible button names.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Choosing icons for commands, menus, and view containers
• Adding icons to webview registries
• Rescaling SVGs while preserving visual weight

Add or update tests for GitButler’s Ratatui terminal interfaces. It guides simulated key input, selection checks, SVG snapshots that record expected screen output, and commands for running tests or updating snapshots.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Test cursor movement and selection
• Check screen output after key input
• Update expected SVG snapshots

Create pixel art illustrations as SVG files, a scalable image format, for READMEs, documentation, and slides. Build character portraits, conversations, or group scenes, then refine colors, speech bubbles, arrows, and spacing to fit the requested layout.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create a pixel art hero image for a README
• Illustrate a conversation with characters and speech bubbles
• Make a character illustration in project colors

View and edit whiteboards embedded in 飞书 cloud documents. Export previews, SVG vector images, diagram source code, or structural data, and update boards using Mermaid, PlantUML, SVG, or the native OpenAPI format.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Exporting whiteboards as images
• Retrieving diagram source code
• Updating boards from Mermaid or PlantUML code

Turn source code imports and folder structure into diagrams for understanding a project, reviewing dependencies, or preparing documentation. Supports Python, JavaScript, TypeScript, Go, and Java, with Mermaid text output and optional SVG images.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Understand the structure of an unfamiliar project
• Review module dependencies during code review
• Create architecture diagrams for technical documentation

Create 2D game art from code, including sprites, icons, tiles and backgrounds. The skill renders written specifications, checks palettes and tile seams, and packages images with review sheets without using an image model.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Create pixel sprites with palette variants
• Draw UI elements and icons in SVG
• Build terrain tiles with checked seams

Converts transparent or solid-background single-color PNG files and SVG files containing one embedded or local PNG into verified path-only SVG output. Removes pure-color backgrounds automatically. Uses Potrace threshold and parameter scans with alpha error metrics to preserve detailed logos, stamps, engravings, and line art. Use when the user asks to convert images to SVG, vectorize PNG, convert bitmap to true SVG, remove embedded raster data from SVG, 图片转矢量, PNG 转 SVG, 真矢量, or 位图描摹.

한국어 요약은 준비 중입니다. 원문 설명을 표시하고 있습니다.

추상적인 개념이나 원리를 움직이는 손잡이와 바늘이 있는 정밀한 기계로 표현하고, 비스듬히 내려다보는 조작형 설명도를 HTML, SVG, React용으로 제작합니다.

• 움직이는 기계로 추상 개념 설명
• 기술 글에 조작형 설명도 추가
• 독립 실행형 HTML 설명 자료 제작

GSAP 기본 API로 웹 요소와 SVG의 이동, 회전, 페이드 효과를 구현합니다. 속도 변화와 시간차를 조절하고 화면 너비와 동작 줄이기 설정에 대응합니다.

• 웹 페이지에 이동과 페이드 효과를 넣을 때
• 여러 요소를 시간차로 움직일 때
• 화면 너비에 따라 동작을 바꿀 때

Create and edit vector graphics, images built from shapes and paths, using commands for text, colors, layers, and layout. Save project state, undo edits, and export finished graphics as SVG, PNG, or PDF.

한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.

• Creating graphics from shapes and text
• Laying out long headlines in wrapped text boxes
• Adjusting colors, gradients, and layers