SVG 스튜디오

SVG란 무엇인가

**SVG(Scalable Vector Graphics)**는 XML 기반의 벡터 이미지 형식입니다. 픽셀이 아닌 수학적 곡선으로 이미지를 표현하기 때문에 어떤 크기로 확대해도 선명합니다.

웹 개발에서 아이콘, 로고, 차트, 애니메이션에 광범위하게 사용됩니다.

SVG 코드를 작성하면 실시간으로 미리보기를 확인할 수 있습니다.

SVG 스튜디오

Infinite Resolution Analytics

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

SVG 코드 에디터

실시간 미리보기

SVG 기본 요소

원 (circle)

<circle cx="50" cy="50" r="40" fill="blue" stroke="black" stroke-width="2"/>

cx, cy: 중심 좌표
r: 반지름
fill: 채우기 색상
stroke: 테두리 색상

사각형 (rect)

<rect x="10" y="10" width="80" height="60" rx="10" ry="10" fill="green"/>

x, y: 좌상단 좌표
width, height: 크기
rx, ry: 모서리 둥글기

선 (line)

<line x1="10" y1="10" x2="90" y2="90" stroke="red" stroke-width="3"/>

텍스트 (text)

<text x="50" y="50" text-anchor="middle" font-size="20" fill="black">Hello SVG</text>

경로 (path)

<path d="M 10 10 L 90 10 L 50 90 Z" fill="orange"/>

d 속성의 명령어:

M: Move to (이동)
L: Line to (선 그리기)
C: Cubic Bezier curve (3차 베지어 곡선)
A: Arc (호)
Z: Close path (경로 닫기)

SVG vs PNG/JPG

항목	SVG	PNG/JPG
타입	벡터	래스터(픽셀)
확대 시	선명함 유지	픽셀화
파일 크기	복잡한 이미지는 큼	단순 이미지는 큼
편집	코드로 직접 수정	편집 소프트웨어 필요
애니메이션	CSS/JS로 가능	제한적
웹 호환성	모든 모던 브라우저	완전 지원

SVG 색상 표현 방법

SVG에서 색상은 여러 방식으로 지정할 수 있습니다:

<!-- 색상 이름 -->
fill="blue"

<!-- HEX 코드 -->
fill="#3b82f6"

<!-- RGB -->
fill="rgb(59, 130, 246)"

<!-- RGBA (투명도 포함) -->
fill="rgba(59, 130, 246, 0.5)"

<!-- HSL -->
fill="hsl(217, 91%, 60%)"

SVG 간단한 실습

아래 코드를 SVG 스튜디오에 붙여넣어 보세요:

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <!-- 배경 -->
  <rect width="200" height="200" fill="#f0f9ff"/>
  
  <!-- 태양 -->
  <circle cx="100" cy="100" r="40" fill="#fbbf24"/>
  
  <!-- 광선 -->
  <line x1="100" y1="50" x2="100" y2="10" stroke="#fbbf24" stroke-width="4"/>
  <line x1="100" y1="150" x2="100" y2="190" stroke="#fbbf24" stroke-width="4"/>
  <line x1="50" y1="100" x2="10" y2="100" stroke="#fbbf24" stroke-width="4"/>
  <line x1="150" y1="100" x2="190" y2="100" stroke="#fbbf24" stroke-width="4"/>
</svg>

SVG 스튜디오

Oiyo