jpg와 svg 차이

 

 

🎨 JPG는 뭐야?

👉 JPG는 사진처럼 생긴 그림이야!

• 예: 네가 스마트폰으로 찍은 강아지 사진
• 📷 사진, 배경화면, 풍경 그림 등에 많이 써요
• 🔍 확대하면? 점점 흐려지고 뿌옇게 돼요
• 그림이 '점(dot)'들로 이루어진 퍼즐이라고 생각하면 돼요

---

✏️ SVG는 뭐야?

👉 SVG는 컴퓨터가 그리는 선과 도형이야!

• 예: 동그라미, 세모, 네모로 만든 캐릭터 그림
• 🧑‍🎨 간판, 로고, 아이콘에 많이 써요
• 🔍 확대하면? 아무리 크게 해도 선이 깨끗해요!
• 그림이 '수학 공식'처럼 그리는 방법이 적혀 있는 파일이에요

---

🥇 쉽게 비교하면?

 

비교	JPG	SVG
모양	사진처럼 생김	도형처럼 생김
확대하면?	흐려짐 😵	선명함 😍
어디에 써?	사진, 배경	로고, 아이콘
어떻게 그려져?	점으로 그림	선과 공식으로 그림

 

---

📌 한 줄 요약!

• JPG = 사진처럼 생긴 그림 (확대하면 흐릿해져요)
• SVG = 선으로 그린 그림 (확대해도 깨끗해요)

 

홈페이지 만들 때 SVG를 많이 써요, 특히 아이콘, 로고, 버튼 그림 같은 데요.

---

왜 홈페이지에서 SVG를 많이 쓸까?

🟢 1. 아무리 확대해도 깨끗해서!

• SVG는 선으로 그리니까, 크기를 아무리 키워도 뿌옇지 않고 선명해요.
• 다양한 화면 크기(PC, 태블릿, 핸드폰)에서도 딱 맞게 보여줄 수 있어요.

🟢 2. 파일이 가벼워서!

• 같은 그림이라도 JPG보다 SVG가 더 작을 수 있어요.
• 그래서 웹페이지가 더 빨리 열려요!

🟢 3. 색깔도 쉽게 바꿀 수 있어서!

• 코딩으로 SVG 그림의 색깔이나 크기를 바로바로 바꿀 수 있어요.

🟢 4. 애니메이션도 가능해서!

• 버튼을 누를 때 SVG 아이콘이 움직이게 만들 수도 있어요.

---

📌 언제는 JPG가 더 나을까?

• 사진이나 진짜 사람 얼굴, 풍경처럼 복잡하고 생생한 이미지는 JPG가 더 적합해요.

---

✅ 한 줄 요약

홈페이지에서 로고, 아이콘, 버튼 같은 건 SVG로!
사진이나 배경처럼 생생한 건 JPG로!