무거운 디자인 소프트웨어를 실행할 필요 없이 .svg 파일을 열거나 <svg> 마크업을 붙여넣어 즉시 확인하세요. 투명 체크무늬, 밝은 배경, 어두운 배경에서 렌더링 품질을 테스트하고 정확한 viewBox 좌표와 DOM 소스 코드를 100% 로컬 브라우저에서 분석합니다.
또는 클릭하여 찾아보기
디자이너와 프론트엔드 개발자가 보이지 않는 흰색 아이콘, 잘린 viewBox 경계, 비대한 에디터 메타데이터를 진단하는 방법을 확인하세요.
기본 OS 탐색기나 일반 브라우저 탭은 흰색 배경으로 열리기 때문에 다크 모드용 순백색(#FFFFFF) SVG 아이콘을 열면 빈 파일처럼 보입니다. 미리보기 배경을 "검은색"이나 "투명 격자"로 전환하면 즉시 선명한 벡터 외곽선과 반투명 마스크를 확인할 수 있습니다.
우측 "파일 정보" 패널을 통해 루트 태그의 선언된 가로(Width), 세로(Height) 및 ViewBox 좌표 문자열(min-x min-y width height)을 즉시 추출합니다. 반응형 크기 조절이 안 되거나 그래픽 일부가 잘리는 원인을 배포 전에 파악할 수 있습니다.
내장된 CSS @keyframes와 SMIL <animate> 태그를 실시간으로 렌더링하면서 하단에 전체 XML DOM 트리를 표시합니다. 하드코딩된 색상 코드나 불필요한 <metadata> 블록을 찾아내고 원클릭으로 SVG 최적화 도구로 넘길 수 있습니다.
윈도우 탐색기나 macOS Finder에서 SVG 썸네일이 제대로 보이지 않거나, 아이콘 하나를 확인하려고 무거운 어도비 일러스트레이터를 켜는 번거로움을 해결합니다:
다크 모드 UI용 흰색 아이콘을 일반 브라우저에서 열면 하얀 화면만 나옵니다. 체크무늬(투명 격자), 흰색, 검은색 및 사용자 지정 배경색을 즉시 전환하며 안티앨리어싱과 투명도를 검수하세요.
React, Vue 컴포넌트나 모바일 앱 에셋 카탈로그에 SVG를 넣기 전에 선언된 Width, Height, ViewBox 좌표(min-x min-y width height)와 정확한 파일 크기를 한눈에 파악할 수 있습니다.
SVG가 currentColor를 사용하는지, 텍스트가 <path> 윤곽선으로 변환되었는지(<text> 태그 여부), 또는 불필요한 스크립트가 들어있는지 하단 코드 패널에서 바로 확인하고 복사할 수 있습니다.
클라이언트 측 DOM 파서와 프리뷰 스테이지는 다양한 벡터 그래픽 표준과 XML 구조를 지원합니다:
피그마(Figma), 어도비 일러스트레이터, 잉크스케이프(Inkscape), 스케치, 어피니티 디자이너 또는 CAD 소프트웨어에서 내보낸 모든 .svg 파일을 드래그 앤 드롭으로 열 수 있습니다.
"SVG 코드 붙여넣기" 탭을 사용하여 HTML 소스 코드, JSX 컴포넌트 또는 아이콘 라이브러리에서 복사한 인라인 SVG 문자열을 바로 미리볼 수 있습니다.
인터랙티브 CSS @keyframes, 트랜지션, 그라데이션(<linearGradient>, <radialGradient>), <clipPath> 및 SMIL <animateTransform> 요소를 완벽하게 지원합니다.
모든 벡터 기본 요소(<path>, <circle>, <rect>, <polygon>, <g>)와 인라인 data:image/*;base64 래스터 이미지를 안전한 로컬 프리뷰 컨테이너 안에서 렌더링합니다.
업로드 영역에 .svg 파일을 드롭하거나("샘플 SVG 불러오기"로 즉시 테스트 가능), "SVG 코드 붙여넣기" 탭으로 전환하여 인라인 XML 마크업을 로드합니다.
캔버스 상단의 미리보기 배경 컨트롤을 사용하여 다양한 표면 색상 위에서 벡터 그래픽, 그림자 및 반투명 채우기가 어떻게 보이는지 테스트합니다.
우측의 파일 정보 패널에서 정확한 파일 이름, 바이트 크기, 선언된 가로(width), 세로(height) 및 viewBox 좌표값을 확인합니다.
하단 SVG 코드 인스펙터에서 원시 XML 마크업을 읽거나 복사하고, 우측 작업(Actions) 패널의 "PNG로 변환" 또는 "SVG 최적화"를 눌러 다음 작업으로 바로 이동하세요.
SVG의 시각적 무결성과 DOM 구조를 확인한 후 다음 워크플로우에 즉시 적용할 수 있습니다:
하단 인스펙터 패널에서 확인한 XML 코드를 복사하여 웹 템플릿에 바로 붙여넣고, 고정된 HEX 색상값을 fill="currentColor"로 바꿔 동적 CSS 테마를 적용하세요.
viewBox에 의해 잘리는 패스가 없는지, 모든 선이 깔끔하게 렌더링되는지 먼저 확인한 후 "PNG로 변환"을 클릭하여 4K 또는 300 DPI 래스터 에셋을 생성하세요.
SVG 코드 패널에 수천 줄의 일러스트레이터 <i:pgf> 데이터나 잉크스케이프 네임스페이스가 보인다면 "SVG 최적화"를 클릭하여 파일 크기를 40%~80% 줄이세요.
뷰어에서 SVG가 빈 화면으로 보이거나 잘리거나 폰트가 바뀌어 보인다면, 인스펙터가 원본 XML 내부의 문제를 찾아낸 것입니다:
SVG 패스 색상이 흰색 배경 위에서 순백색(#FFFFFF)으로 칠해져 있거나, viewBox 좌표 영역과 실제 그려진 <path> 좌표 위치가 서로 어긋나 있기 때문입니다.
먼저 미리보기 배경을 "검은색"이나 "투명 격자"로 바꿔보세요. 그래도 안 보인다면 하단 SVG 코드 패널에서 viewBox="minX minY W H" 수치와 <path d="M..."> 시작 좌표를 비교해 보세요.
SVG 내부에 윤곽선(패스)으로 변환되지 않은 <text font-family="..."> 태그가 남아있어 현재 기기에 설치되지 않은 폰트를 찾고 있기 때문입니다.
하단 코드 패널에서 <text> 태그가 있는지 확인하세요. 모든 기기에서 동일한 타이포그래피를 유지하려면 디자인 툴에서 "윤곽선 만들기(Convert to Outlines)"를 적용해 다시 내보내세요.
브라우저 보안 정책(CSP) 및 CORS 규칙에 따라 격리된 SVG 프리뷰 컨테이너가 외부 서드파티 이미지 URL을 네트워크로 불러오는 것을 차단합니다.
외부 HTTP 링크 대신 비트맵 이미지를 인라인 data:image/png;base64,... 문자열로 변환하여 SVG 내부에 직접 임베딩하세요.
SVG 뷰어와 당사의 SVG 최적화 도구, SVG PNG 변환기의 역할을 비교하고 목적에 맞게 활용하세요:
| 비교 항목 / 시나리오 | SVG 뷰어 및 인스펙터 (현재 도구) | SVG 최적화 도구 (/svg-optimizer/) | SVG PNG 변환기 (/) |
|---|---|---|---|
| 핵심 목적 및 역할 | 다중 배경 시각적 미리보기, ViewBox/치수 감사 및 원시 XML DOM 코드 검사 | 불필요한 XML 메타데이터와 주석을 자동 제거하여 .svg 파일 용량 축소 |
벡터 .svg 파일이나 XML 코드를 32비트 투명 .png 비트맵으로 래스터화 |
| 최종 결과물 | 검증된 원본 .svg 다운로드, 복사 가능한 XML 소스 코드 및 속성 진단 정보 |
40%~80% 용량이 줄어든 배포용 경량 .svg 벡터 파일 |
사용자 지정 픽셀 크기 및 300 DPI 메타데이터가 적용된 고해상도 .png 이미지 |
| 배경 대비 테스트 | 투명 체크무늬, 흰색, 검은색 및 사용자 지정 HEX 배경 실시간 전환 테스트 | 최적화 전후 나란히 비교하는 프리뷰 제공 | 선택한 배경색(투명 또는 단색)을 최종 PNG 이미지 픽셀에 영구 합성 |
| 치수 및 ViewBox 표시 | 파일명, 용량, Width, Height 및 ViewBox 문자열을 전용 정보 테이블에 표시 | 원본 바이트 크기 대 최적화 후 크기 및 절감률(%) 표시에 집중 | 목표 출력 픽셀 가로×세로(px) 및 인쇄 DPI 설정에 집중 |
네, 100% 안전하고 비공개로 처리됩니다. 당사의 온라인 SVG 뷰어는 로컬 JavaScript FileReader와 브라우저 내장 DOM 파싱 API만을 사용하여 사용자의 웹 브라우저 안에서만 작동합니다. .svg 파일과 붙여넣은 XML 코드는 기기 밖으로 절대 나가지 않으며 외부 서버로 업로드되지 않습니다.
viewBox="min-x min-y width height"는 벡터 패스가 그려지는 내부 가상 캔버스 좌표계(종횡비 및 영역)를 뜻하며, width와 height는 화면에 표시되는 외부 출력 크기를 정의합니다. 올바른 viewBox가 설정되어 있다면 24px로 줄이든 2000px로 키우든 잘림 없이 깔끔하게 스케일링됩니다.
네! 윈도우 탐색기나 macOS Finder의 정적 썸네일과 달리, 브라우저 기반 프리뷰 캔버스는 CSS @keyframes 애니메이션과 네이티브 SVG SMIL(<animate>, <animateTransform>) 애니메이션을 모두 60fps로 실시간 렌더링합니다.
많은 최신 디자인 툴과 아이콘 라이브러리는 그래픽이 부모 CSS 컨테이너의 100% 크기에 맞춰 반응형으로 늘어나도록 고정된 width와 height 속성을 생략하고 viewBox만 남겨둡니다. 반대로 viewBox가 누락(N/A)된 경우에는 브라우저 간 크기 호환성을 위해 루트 <svg> 태그에 viewBox="0 0 가로 세로"를 추가하는 것이 좋습니다.
네. 미리보기 바로 옆에 있는 "작업(Actions)" 패널에서 "SVG 최적화"를 클릭하여 불필요한 XML 코드를 정리하거나, "PNG로 변환"을 클릭하여 고해상도 PNG로 내보낼 수 있습니다.
각 작업에 최적화된 브라우저 기반 이미지 및 벡터 도구를 바로 이용해 보세요.
불필요한 메타데이터와 주석을 제거하여 화질 저하 없이 SVG 파일 크기를 40%~80% 줄입니다.
투명 배경을 유지하며 SVG를 고화질 PNG로 변환합니다. 사용자 지정 픽셀 크기 및 300 DPI 인쇄 설정을 지원합니다.
수십~수백 개의 SVG 파일을 한 번에 PNG, JPG, WebP로 일괄 변환하여 ZIP 파일로 다운로드합니다.
하나의 이미지로 웹사이트용 favicon.ico와 iOS, Android, Windows 앱 아이콘 패키지를 생성합니다.