SVG 스튜디오

Infinite Resolution Analytics

SVG 코드를 편집하고 즉시 확인합니다. 선명한 벡터 그래픽의 마법을 경험하세요.

SVG 코드 에디터

실시간 미리보기

SVG는 선명한 벡터 그래픽을 코드로 다루는 형식입니다

아이콘, 간단한 로고, 다이어그램, UI 장식은 SVG로 만들면 작은 용량으로 확대해도 선명하게 유지됩니다. SVG Studio는 코드를 직접 편집하고 즉시 미리보며, 복사와 파일 저장까지 한 자리에서 처리할 수 있는 브라우저용 작업 공간입니다.

SVG 작업 개념

벡터

픽셀 배열이 아니라 선, 도형, 좌표로 이미지를 설명하므로 크기를 키워도 흐려지지 않습니다.

viewBox

그래픽이 그려지는 좌표계입니다. 실제 표시 크기와 내부 좌표를 분리해 반응형 SVG를 만들 수 있습니다.

안전한 미리보기

컴포넌트는 DOMPurify로 SVG 프로필을 적용해 편집 코드를 정화한 뒤 미리보기에 넣습니다.

사용 방법

  1. 왼쪽 코드 에디터에 SVG 마크업을 붙여넣거나 기본 예제를 수정합니다.
  2. 오른쪽 실시간 미리보기에서 도형, 색상, 크기 변화를 확인합니다.
  3. 완성한 코드를 복사하거나 SVG 파일로 저장해 프로젝트에 사용합니다.

자주 묻는 질문

SVG 코드를 직접 붙여넣어도 되나요?

네. 다만 외부에서 받은 SVG는 불필요한 스크립트나 추적 코드가 없는지 확인한 뒤 사용하는 것이 좋습니다.

PNG로 변환하는 도구인가요?

현재 페이지의 핵심은 SVG 코드 편집, 미리보기, 코드 복사, SVG 파일 저장입니다. 래스터 변환은 별도 검수 과정이 필요할 수 있습니다.

왜 미리보기가 실제 사이트와 다르게 보이나요?

사이트 CSS, 부모 컨테이너, 상속 색상, 폰트 조건이 다르면 같은 SVG도 다르게 보일 수 있습니다.

SVG를 실제 서비스에 넣기 전에는 보안, 접근성, 라이선스, 렌더링 결과를 프로젝트 환경에서 다시 확인하세요.