TIL-20220802

khundi·2022년 8월 2일

SVG(Scalable Vector Graphics, 확장성 있는 벡터 그래픽)

SVG는 이미지 형식이다.
'벡터'라는 단어는 이 이미지가 픽셀 값 행렬로 이루어진 GIF, JPEG, PNG 같은 비트맵 이미지와는 다름을 알 수 있다.
SVG '이미지'는 원하는 그래픽을 원하는 표현하는 데 필요한 단계들을 해상도와 상관없이 정밀하게 표현하는 일종의 언어이다.
HTML과 아주 비슷한 XML 마크업 언어를 사용해 텍스트 파일로 작성한다.
단순한 도형 외에도 임의의 곡선, 텍스트, 애니메이션도 지원한다.

오디오API

Audio() 생성자

HTML 문서에 <audio> 태그를 삽입하지 않아도 웹 페이지에서 사운드 효과를 이용할 수 있다.
DOM의 document.createElement() 메서드로 <audio> 요소를 동적으로 생성하거나 Audio() 생성자를 사용하면 된다.
생성한 요소를 문서에 추가할 필요 없이 play() 메서드를 호출하기만 해도 된다.

let soundeffect = new Audio("soundeffect.mp3"); // 사용할 사운드 효과를 미리 불러온다.

document.addEventListener("click", () => {
  soundeffect.cloneNode().play();			// 사용자가 버튼을 클릭할 때마다 사운드를 재생한다.
});