SVG Nexus / EXPLAINER 회원가입 불필요 | 100% 브라우저 로컬 처리

SVG란 무엇인가요?

SVG(스케일러블 벡터 그래픽스)는 아이콘, 로고, 일러스트를 위한 브라우저 표준 형식입니다. 모든 크기에서 선명하고 속성 하나로 색을 바꿀 수 있습니다.

1분 만에 보는 SVG

SVG 파일은 일반 텍스트입니다. 브라우저, 텍스트 편집기, 디자인 도구에서 열어 HTML처럼 읽고 색상, 크기, 모양을 품질 손실 없이 바꿀 수 있죠. 그래서 UI와 로고, 버튼은 벡터로 배포됩니다.

SVG Nexus는 오픈소스 SVG 아이콘 라이브러리와 일러스트를 정리해 React, Vue, HTML, CSS 또는 선호하는 디자인 도구에 바로 복사할 수 있도록 합니다. 가입도 업로드도 없습니다.

무한 확대

패스는 픽셀이 아니라 수학입니다. 같은 파일이 16px 파비콘, 레티나 로고, 4K 슬라이드 그림에서도 선명합니다.

속성 하나로 색 변경

fill이나 stroke를 한 번만 바꾸면 전체 마크가 따라옵니다. CSS keyframe과 hover는 인라인 SVG에서 JavaScript 없이 동작합니다.

텍스트라 가볍다

아이콘은 킬로바이트로 압축되고 어떤 서버에서도 gzip으로 효율적으로 전달되며 검색 엔진과 스크린 리더도 읽을 수 있습니다.

어떤 스택이든 SVG 코드 복사

모든 도구 보기

카탈로그의 모든 페이지와 업로드한 SVG는 브라우저 도구에서 열려 프레임워크에 맞게 코드를 다시 씁니다: JSX, Vue, Svelte, CSS, data URI, PNG 내보내기 그리고 스프라이트.

인터랙티브 SVG 벡터 에디터

색상, 선 굵기, viewBox, 변형, 여백, 배경과 즉시 SVG/PNG 내보내기를 지원하는 지연 없는 브라우저 벡터 에디터입니다.

SVG에서 React JSX, Vue, Svelte 변환기

원시 SVG 속성을 깔끔한 TypeScript React(TSX), Next.js Server Component, Vue 3 <script setup>, Svelte 5, Flutter, Angular 구성 요소로 변환합니다.

SVG에서 고해상도 PNG 및 WebP 변환기

모든 SVG 아이콘이나 사용자 지정 코드를 64px부터 2048px까지 선명한 PNG 또는 WebP 이미지로 래스터화하고 투명도를 제어합니다.

SVG에서 CSS 및 Data URI 변환기

SVG 마크업을 컴팩트하고 URL에 안전한 UTF-8 또는 Base64 Data URI, CSS background-image 규칙, 동적 currentColor CSS mask-image 스니펫으로 인코딩합니다. React, Vue, Svelte, HTML 빌드 없이 바로 사용.

SVG 아이콘 매트릭스 및 배지 생성기

사용자 지정 스퀴클/육각형 프레임, 다중 스톱 그라디언트, 상태 배지, 즉시 프레임워크 내보내기를 갖춘 SVG 아이콘의 매개변수적 생성입니다.

SVG 옵티마이저 및 미니파이어

브라우저에서 SVG를 압축하세요: 편집기 메타데이터와 주석, 남아 있는 XML을 제거하고 공백을 합쳐 처리 전후의 실제 바이트 절감을 확인하세요.

주제별 SVG 아이콘 찾기

모든 카테고리 보기

카탈로그는 아이콘을 교통, 금융, 의료, 날씨, 명절 같은 주제로 묶습니다. 주제를 열고 몇 초 만에 맞는 벡터를 복사하세요.

SVG일까 PNG일까?

확대와 색 변경이 필요한 아이콘과 UI 그래픽에는 SVG를 쓰고, 사진 같은 디테일이나 소셜 미리보기, 래스터화하는 플랫폼에는 PNG나 WebP로 내보내세요. 여기서 도구는 한 파일로 둘 다 만듭니다.

SVG vs PNG: 어떤 포맷을 사용해야 할까요? 인라인 SVG와 이미지 태그 Figma 또는 브라우저에서 SVG 아이콘 편집하기 모든 가이드

상업적 사용 가능

모든 아이콘 행에는 원본 라이브러리와 라이선스가 표시됩니다. MIT, ISC, Apache-2.0 팩은 상업 제품을 커버하고 브랜드 로고는 별도 규칙을 따르며 항상 라이선스 표에 있습니다.

라이선스 →

오픈소스 아이콘 라이브러리

Material Icons Phosphor Icons selfh.st Icons Tabler Icons Authentic Brand Logos Domain Icons

Icon libraries →

SVG 질문과 답변

SVG가 PNG보다 나은가요?

아이콘, 로고, UI 그래픽이라면 네: SVG는 그리기 명령을 저장해서 확대와 색 변경이 되고 가볍습니다. PNG는 디테일한 비트맵 출력에 유용합니다.

SVG 파일을 어떻게 열고 편집하나요?

브라우저, 텍스트 편집기, 디자인 도구로 드래그하세요. SVG Nexus Studio는 브라우저에서 열어 색상, 레이어, 패스를 설치 없이 편집하게 해줍니다.

아이콘을 상업적으로 사용할 수 있나요?

여기의 오픈소스 라이브러리는 MIT, ISC, Apache-2.0 등 상업 사용을 허용하는 라이선스로 제공됩니다. 각 아이콘 페이지에 정확한 라이선스가 명시되고 브랜드 로고에는 추가 규정이 있습니다.

SVG가 흐릿해 보이는 이유는?

흐릿한 SVG는 보통 너무 일찍 래스터화되었거나 잘못된 뷰포트 크기로 내보냈기 때문입니다. 최종 렌더링까지 벡터를 유지하거나 원본에서 다시 내보내세요.

SVG 에셋으로 시작하세요

카탈로그를 검색하고 브라우저 스튜디오에서 에셋을 열어 깔끔한 벡터 코드를 만드세요: 아이콘, 로고, 일러스트 그리고 이를 가공하는 도구가 함께 있습니다.

모든 SVG 아이콘 편집기에서 열기

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