HTML5에서 SVG 이미지 사용하기
HTML5에서 SVG(Scalable Vector Graphics) 이미지를 화면에 표시하려면 <img> 요소 또는 <svg> 태그를 활용할 수 있습니다. 별도의 SVG 파일을 웹 페이지에 삽입할 때는 HTML 문서 안에서 <img>, <object>, <embed> 중 하나를 선택해 사용하면 되며, 프로젝트의 요구 사항에 맞는 방식을 고르는 것이 좋습니다.
삽입 방식별 특징
- <img>: 가장 간단하고 널리 쓰이는 방법으로, 일반 이미지처럼
src속성에 SVG 파일 경로를 지정합니다. - <object>: SVG를 객체 형태로 삽입하며, 자바스크립트와의 상호작용이 필요한 경우에 유용합니다.
- <embed>: 콘텐츠를 임베드 방식으로 삽입하며, 특정 브라우저 환경을 지원할 때 사용됩니다.
SVG가 파일 형태로 저장되어 있다면 일반 이미지처럼 직접 불러와 사용할 수 있습니다. 아래는 SVG 파일을 추가하는 기본적인 방법입니다.
예제
다음 코드를 실행하면 HTML5에서 SVG 이미지를 표시하는 과정을 직접 확인할 수 있습니다.
<!DOCTYPE html>
<html>
<head>
<style>
#svgelem {
position: relative;
left: 50%;
-webkit-transform: translateX(-20%);
-ms-transform: translateX(-20%);
transform: translateX(-20%);
}
</style>
<title>HTML5 SVG Image</title>
</head>
<body>
<h2 align="center">HTML5 SVG Image</h2>
<img src="https://www.tutorialspoint.com/html5/src/svg/extensions/imagelib/smiley.svg" alt="smile" height="100px" width="100px" />
</body>
</html>