코밍이의 하루

[HTML5] SVG 이미지 본문

웹언어 공부/HTML5

[HTML5] SVG 이미지

코밍이 2021. 8. 16. 14:23

1. 개발 환경

구분 내용
사용 언어 HTML5, JS
개발환경 Visual Studio Code
참고 도서 [Do it] HTML5 + CSS3 웹 표준의 정석
웹브라우저 Chrome

 

2. 주요 문법

1) SVG 이미지

- 이미지를 확대하거나 축소해도 원래의 깨끗한 상태를 유지하는 이미지(=벡터 이미지)

- 로고나 아이콘에서 많이 사용되며 데이터 시각화에서 차트나 다이어그램, 지도 등 구현할 때도 많이 사용

 

3. 소스 코드 및 실행 화면

- insert-svg.html

<!doctype html>
<html lang="ko">
  <head>
      <meta charset="utf-8">
      <title>Insert SVG</title>
  </head>
  <body>
      <h1>SVG 이미지 삽입하기</h1>
      <img src="images/muffin.svg">
  </body>
</html>

 

insert-svg.html

- check-svg.html

<!doctype html>
<html lang="ko">
  <head>
      <meta charset="utf-8">
      <title>Insert SVG</title>
      <script src="modernizr-custom.js"></script>
  </head>
  <body>
      <h1>SVG 이미지 삽입하기</h1>
      <img src="images/muffin.svg">
      <script>
          if (!modernizr.svg) {
              $("img").attr("src", "images/muffin.png");
          }
      </script>	
  </body>
</html>

check-svg.html

저작자표시 비영리 변경금지

'웹언어 공부 > HTML5' 카테고리의 다른 글

[HTML5] 사용자 입력을 위한 <input> 태그  (0) 2021.08.19
[HTML5] 폼 만들기  (0) 2021.08.19
[HTML5] 링크 만들기  (0) 2021.08.16
[HTML5] 이미지  (0) 2021.08.16
[HTML5] 표를 만드는 태그(2)  (2) 2021.08.12
'웹언어 공부/HTML5' Related Articles more