📌 SVG란?
• SVG는 Scalable Vector Graphics의 약자예요.
• 이름 그대로 확대·축소해도 깨지지 않는 벡터 방식의 그림 파일이에요.
• 글자·도형·선·색을 수학적 좌표와 코드로 기록하기 때문에, JPG·PNG처럼 픽셀로 저장되는 방식과 달라요.
• SVG(Scalable Vector Graphics) = XML 형식으로 작성된 벡터 그래픽 파일
• XML처럼 <태그>와 속성(x="…", y="…")으로 그림을 정의
즉, **SVG 자체가 하나의 “마크업 언어”**예요.
• HTML이 <div>, <img>, <p> 같은 태그로 웹페이지를 만드는 것처럼
• SVG는 <rect>, <circle>, <text>, <path> 같은 태그로 그림을 만드는 거죠.
⸻
📌 주요 태그
• <rect> : 사각형
• <circle> : 원
• <text> : 텍스트
• <path> : 복잡한 곡선·도형
• <clipPath> : 잘라낼 영역 정의 (마스크 비슷)
• <mask> : 투명도/색상 기반으로 가리기
⸻
📂 특징
1. 무한 확대해도 선명
• 픽셀 단위로 뭉개지지 않음 → 로고, 한자 글자체, 아이콘 제작에 많이 씀.
2. 텍스트처럼 수정 가능
• 메모장/코드 편집기로 열면, <text>, <rect> 같은 태그가 들어 있어서 색상·크기·폰트 등을 직접 고칠 수 있어요.
3. 웹에서 표준 지원
• HTML에 <img src="...svg"> 넣으면 브라우저에서 바로 볼 수 있음.
• 아이콘, 일러스트, 지도 등에 많이 사용돼요.
4. 용량이 작음
• 벡터 데이터만 저장해서, 같은 크기의 PNG보다 파일 크기가 작아요.
⸻
📌 언제 쓰냐?
• 로고, 심볼, 도안, 폰트, 지도, 차트
• 인쇄물이나 간판 제작 (고해상도로 확대해도 깨지지 않아야 하는 경우)
• 웹사이트 아이콘 (화면 크기와 무관하게 선명해야 할 때)
🖌️ SVG를 만들 수 있는 프로그램
1. 일러스트레이터(Adobe Illustrator)
• 업계 표준. 로고/디자인을 그리면 바로 SVG로 내보낼 수 있음.
2. Inkscape (무료, 오픈소스)
• Illustrator 대체 무료 프로그램. SVG를 기본 포맷으로 저장.
3. Sketch / Figma / Gravit Designer
• UI/UX 디자인 툴, 아이콘·앱 화면 디자인 후 SVG 내보내기 가능.
4. MS PowerPoint / Keynote
• 최신 버전은 그림을 SVG로 저장할 수 있음. (단, 제한적)
5. 코드 편집기 (VS Code, 메모장 등)
• SVG는 XML 코드라서 직접 태그(<svg>, <path>, <text>)를 수정해 만들 수도 있어요.
⸻
👀 SVG를 볼 수 있는 프로그램
1. 웹 브라우저 (Chrome, Edge, Safari, Firefox 등)
• 그냥 SVG 파일을 드래그해서 열면 바로 표시됨.
2. 사진 뷰어
• 윈도우 10/11, macOS 기본 사진 앱에서도 SVG 지원.
3. 벡터 편집기 (Illustrator, Inkscape, Figma 등)
• 열어서 수정 가능.
⸻
✏️ SVG를 편집할 수 있는 프로그램
1. Illustrator / Inkscape → 가장 완벽하게 편집 가능
2. Figma, Sketch → 디자인 수정, 색상/선 두께 변경
3. VS Code / Atom / Sublime Text → 코드 수준에서 직접 수정 가능
• 예: <rect>의 색상 바꾸기, <text>의 폰트/크기 변경
4. 온라인 편집기
• vectr.com, boxy-svg.com 같은 무료 웹 에디터
⸻
👉 정리하면,
• 언어 자체는 “SVG 언어” (XML 기반)
• 그 안에서 쓰이는 clipPath, rect, mask는 SVG 태그
• HTML 태그랑 비슷하지만, “웹페이지” 대신 “그림”을 정의하는 역할
• 전문 디자인 → Illustrator (유료) / Inkscape (무료)
• 간단 보기 → 웹 브라우저
• 코드 수정 → 메모장, VS Code
