🖼️ SVG 그리기/미리보기

SVG 파일을 분석하고 코드를 편집하세요. 미리보기, 요소 분석, 유효성 검사 기능을 제공합니다.

SVG 파일을 끌어놓거나 아래 버튼으로 선택하세요

SVG 코드

코드를 수정하면 실시간으로 미리보기가 업데이트됩니다.

SVG 코드를 입력하거나 파일을 업로드하세요

• SVG (Scalable Vector Graphics)는 XML 기반의 벡터 그래픽 형식으로, 확대해도 품질이 저하되지 않는 장점이 있습니다. 웹 표준으로 정의되어 있어 모든 브라우저에서 지원됩니다.

• 벡터 그래픽: 픽셀 기반이 아닌 수학적 좌표와 경로로 이미지를 표현하므로, 어떤 크기로 확대해도 선명하게 표시됩니다. 로고, 아이콘, 차트 등에 적합합니다.

• XML 기반: SVG는 텍스트 형식으로 작성되므로 코드 편집이 가능하고, CSS와 JavaScript로 스타일링과 애니메이션을 추가할 수 있습니다.

• 작은 파일 크기: 복잡한 이미지도 비교적 작은 파일 크기로 표현할 수 있어 웹 성능에 유리합니다. 특히 간단한 도형과 아이콘의 경우 매우 효율적입니다.

• 편집 가능: 텍스트 에디터로 직접 편집할 수 있어 디자인 수정이 용이합니다. 코드를 수정하면 실시간으로 미리보기가 업데이트됩니다.

• 접근성: 텍스트로 작성되어 있어 스크린 리더와 검색 엔진이 내용을 이해할 수 있습니다. 접근성과 SEO에 유리합니다.

• 용도: 웹 아이콘, 로고, 인포그래픽, 차트, 간단한 일러스트레이션, 애니메이션 등 다양한 용도로 활용됩니다.

• 파일 업로드: SVG 파일을 드래그 앤 드롭하거나 "SVG 파일 선택" 버튼을 클릭하여 업로드하세요. 파일을 업로드하면 코드가 자동으로 로드됩니다

• 코드 편집: 왼쪽 텍스트 에디터에서 SVG 코드를 직접 편집할 수 있습니다. 코드를 수정하면 오른쪽 미리보기가 실시간으로 업데이트됩니다

• 코드 복사: "코드 복사" 버튼을 클릭하면 현재 SVG 코드를 클립보드에 복사할 수 있습니다. 다른 프로젝트에서 바로 사용할 수 있습니다

• 미리보기: 오른쪽 미리보기 영역에서 SVG가 실제로 어떻게 보이는지 확인할 수 있습니다. 코드 수정 시 자동으로 반영됩니다

• 이미지 다운로드: "이미지 다운로드" 버튼을 클릭하면 SVG를 PNG 이미지로 변환하여 다운로드할 수 있습니다. 벡터 그래픽을 래스터 이미지로 변환합니다

• SVG 정보: 정보 패널에서 SVG의 유효성, 크기, viewBox, 포함된 요소, 사용된 색상 등을 확인할 수 있습니다

• 유효성 검사: SVG 코드에 오류가 있으면 빨간색 표시와 함께 오류 메시지가 표시됩니다. 코드를 수정하여 오류를 해결하세요

• 요소 분석: 정보 패널에서 SVG에 포함된 요소(rect, circle, path 등)의 종류와 개수를 확인할 수 있습니다