목차
- <svg> 예제 - 그림 그리기 (예: 원 모양)
- <svg> 정의
- <svg> vs. <canvas> 비교
- <svg> 예제 - 열쇠 모양 아이콘
- <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> 비교
| |
<canvas> |
<svg> |
| 특징 |
1.
2차원 그래픽 표현 위한 HTML 언어
2.
HTML5에서 새로 도입
3.
픽셀 단위로 렌더링 되며,
한번 이미지가 그려지면, 브라우저는 잊어 버림.
그 결과, 위치 바뀔 경우 다시 그려야 함.
|
1.
2차원 그래픽 표현 위한 XML 기반 언어
2.
HTML5에서 새로 도입
3.
그려진 이미지는 객체로 인식되며,
객체 속성이 변하면 자동으로 반영 됨.
그 결과, 위치나 모양 변화면 자동 반영됨.
|
| 차이점 |
1. 해상도에 영향 받음
2. 이벤트 핸들러 지원 안 함.
3. 텍스트 출력 지원 안 함. (오직 그래픽만 지원)
4. 이미지를 png나 jpg 형식으로 저장 가능
5. 그래픽 기반의 게임에 적합 |
1. 해상도에 영향 안 받음
2. 이벤트 핸들러 지원 함.
3. 큰 렌더링 갖은 애플리케이션에 최적화
4. 복잡하면 렌더링이 늦을 수 있음.
5. 게임 애플리케이션에 부적합
|
<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/
