[image] HTML - <svg> 태그 - 그림그리기 (= 동적그림 = svg태그 = 에스브이지태그)

목차

1. <svg> 예제 - 그림 그리기 (예: 원 모양)
2. <svg> 정의
3. <svg> vs. <canvas> 비교
4. <svg> 예제 - 열쇠 모양 아이콘
5. <svg> 관련 참고사이트

<svg> 예제 - 그림 그리기 (예: 원 모양)

 

<svg width="100" height="100">

  <circle cx="50" cy="50" r="40" stroke="red" stroke-width="10" fill="yellow" />

  svg 지원 않는 브라우저는 개나 줘버려.

</svg>

 

결과보기

<svg> 정의

 

웹상에서 2차원 벡터 그래픽을 표현하는 XML 기반의 마크업 언어.

 

※ 벡터 : 크기와 방향을 동시에 나타내는 물리량
※ XML : HTML의 단점 (=특수 문자 표현 제약)을 보완위해 등장한 마크업 언어
※ 마크업 언어 : 활자 크기라든가 색깔 등 웹 문서를 표현하기 위한 언어

 

---

 

1. 

• SVG : (Scalable Vector Graphics : 가변 벡터 도형 처리)의 약자. 
• 원, 삼각형, 사각형, 별 모양, 로고 등 다양한 그래픽 이미지 구현 가능

2. 

IE9 이상 주요 최신 브라우저 지원.

3. MDN <svg> 예제보기

https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg
 

<svg> vs. <canvas> 비교

<svg> 예제 - 열쇠 모양 아이콘

프라이머리키 (Primary Key)

 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7 14c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2m5.6-4c-.8-2.3-3-4-5.6-4-3.3 0-6 2.7-6 6s2.7 6 6 6c2.6 0 4.8-1.7 5.6-4H16v4h4v-4h3v-4H12.6Z"></path></svg>

 

결과보기

---

포린키 (Foreign Key)

 

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M7.5 3C5 3 3 5 3 7.5S5 12 7.5 12c2 0 3.6-1.2 4.2-3H15v3h3V9h3V6h-9.3c-.6-1.8-2.2-3-4.2-3m0 3C8.3 6 9 6.7 9 7.5S8.3 9 7.5 9 6 8.3 6 7.5 6.7 6 7.5 6m2.5 8c-1.6 0-4 1.1-4 4s2.4 4 4 4h1v-2h-1c-.3 0-2-.1-2-2 0-1.8 1.5-2 2-2h1v-2m2 0v2h1c.3 0 2 .1 2 2 0 1.8-1.5 2-2 2h-1v2h1c1.6 0 4-1.1 4-4s-2.4-4-4-4m-5 3v2h6v-2H9Z"></path></svg>

 

결과보기

<svg> 관련 참고사이트

 

thenounproject ★

https://thenounproject.com/

※ png, svg 포맷 형태의 다양한 이미지 다운 가능.

※ <img> 태그 이용해 노출 가능. 

 

svg 배우기

http://tutorials.jenkov.com/svg/index.html

 

svg 예제들

https://codepen.io/search/pens?q=svg

 

mdn svg 강의

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial

https://developer.mozilla.org/ko/docs/Web/SVG/Tutorial

 

svg 모양 생성기

https://getwaves.io/

https://www.blobmaker.app/