콘텐츠로 이동
스튜디오 회원가입 불필요 | 100% 브라우저 로컬 처리

Vector Studio 및 3D 아이콘 작업 공간

브라우저에서 바로 사용하는 SVG 에디터: 패스 편집, 레이어, 정렬을 지원하며 PNG, WebP, React TSX 내보내기를 제공합니다.

100%
도형 추가:

Direct canvas editing: select a part, then drag to move. Use the picker’s Replace selected or Add layer modes to build a composite SVG.

X: 12.0 | Y: 12.0 WCAG AAA | 17.4:1
Maps Fastfood - Material Icons iconFree Maps Fastfood vector icon from the Material Icons open-source icon library; scalable W3C SVG 2.0 graphic for web and design use.
벡터 속성: material-sharp-maps-maps-fastfood | SVG 편집기에서 편집 24x24 | 0.3 KB
크기 실시간 미리보기:
16px
24px
32px
어두운 화면
studio

            
여러 아이콘 스프라이트 트레이

꾸민 아이콘 여러 개를 고정하고 하나의 심볼 시트로 합칩니다.

아직 고정한 아이콘이 없습니다. 아이콘을 고정해 한 장으로 모아 보세요.

AI 프롬프트와 벡터 개선

AI 프롬프트를 만들거나 캔버스에서 아이콘을 개선하세요

프리셋을 고르고 프롬프트를 AI 도구에 복사하거나 캔버스에서 아이콘을 개선하세요.

기술 문서와 엔지니어링 안내

Vector Studio - Complete Browser-Native SVG & 3D Icon Engineering Environment

SVG Nexus Vector Studio is a zero-install, 100% browser-based vector design and code generation environment. Search and combine 76,166 open-source icons across 29 libraries, inspect individual DOM nodes, apply multi-stop linear gradients, attach 3D drop-glow lighting and squircle badges, animate paths, and export production-ready SVG, PNG, WebP, React TSX, Vue 3, Svelte, and CSS masks with zero server uploads.

브라우저에서 바로 사용하는 SVG 에디터: 패스 편집, 레이어, 정렬을 지원하며 PNG, WebP, React TSX 내보내기를 제공합니다.

지원하는 입력 원본

Any W3C SVG 1.1 / 2.0 file, raw XML markup, or 76,166 built-in catalog icons

내보내기와 컴파일 대상

Optimized SVG, PNG (64px-2048px), WebP, React TSX, Vue 3 SFC, Svelte, CSS Data URI, SVG Sprite

기술적 효과와 성능

Eliminates switching between Figma, Illustrator, SVGO CLI, and IDE component wrappers

Vector Studio 및 3D 아이콘 작업 공간 사용법

  1. 1

    Open the studio workspace from Tools and start an illustration or import an existing SVG file.

  2. 2

    Edit layers, colours, gradient stops and stroke width directly in the inspector panel.

  3. 3

    Apply 3D lighting presets or enable motion animation for icon badges.

  4. 4

    Export clean SVG, high-resolution PNG or WebP, or copy multi-framework code.

입력 예시

shield.svg imported from disk (single path layer)

출력 예시

SVG with gradient stops tuned, plus a JSX component with className passthrough

제한 사항

  • 3D lighting presets read best on convex shapes with a single dominant light.
  • Undo history keeps a maximum of 50 steps per session.
  • Import size is capped at 2 MiB per file.

이 작업 공간에서 열거나 붙여넣는 파일은 브라우저에서 로컬로 처리됩니다. 서버로 업로드되는 파일은 없습니다.

76,166개 벡터 아이콘을 검색하려면 입력하세요...

이동 | Enter 열기 전체 아이콘 보기

비교

아이콘 출처와 라이선스

라이선스 상업적 사용 출처 표기 수정과 색 변경
MIT허용번들에 고지 포함허용
ISC허용번들에 고지 포함허용
Apache-2.0허용고지 파일과 함께 필요허용
CC BY 4.0허용출처 표시 필요허용
CC-BY-SA-4.0허용동일 조건 배포동일 조건 배포
Trademark / Brand지칭 용도만소유자 지침제한

아이콘 미리보기