매일 손이 가는 개발자 도구를 한곳에.

변환기, 포맷터, 해시, 검증기, 그리고 계속 다시 열게 되는 작은 유틸리티들이 여러 탭에 흩어지지 않고 한자리에 모여 있습니다.

/ 도구

■

/ 도구 찾기

도구 109개

/ SVG 뷰어

SVG 코드

미리보기 너비 (px)

미리보기 높이 (px)

/ 선택한 도구

■

SVG 뷰어 - 무료 포맷터 도구

구문 강조와 함께 SVG 코드를 보고 미리 봅니다

■ 01

SVG란?

SVG(Scalable Vector Graphics)는 2차원 그래픽을 위한 XML 기반 벡터 이미지 포맷입니다. 래스터 이미지와 달리 SVG는 품질 손실 없이 어떤 크기로도 확대할 수 있어 로고, 아이콘, 일러스트에 이상적…

■ 02

어떻게 작동하나요?

SVG 코드를 텍스트 영역에 붙여넣으세요. 이 도구는 실시간 미리보기를 렌더링하고 구문 강조와 함께 코드를 표시합니다. 미리보기 크기를 조절해 SVG가 어떻게 확대되는지 확인하세요. Copy 버튼으로 SVG 코드를 복사…

■ 03

예시 사례

단순 원과 path 요소를 다루므로 일반적인 입력과 출력을 빠르게 비교할 수 있습니다.

/ 관련 도구

/ 코드

■

선택한 도구의 소스 코드로, 오른쪽의 실시간 버전과 함께 여기에 표시됩니다.

/ 소스 코드

TypeScript

typescript

// No external dependencies needed - SVG is native to browsers

// Create an SVG programmatically
function createSvg(width: number, height: number): string {
  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" width="${width}" height="${height}">
  <!-- Add your SVG elements here -->
</svg>`;
}

// Example: Create a circle SVG