[HTML] svg 태그

svg

svg(Scalable Vector Graphics): 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어

Vector Data vs. Bitmap Data

• Vector Data: 그래픽이 어떤 부분에서 채워지는지 등의 정보를 담고 있기 때문에 이미지를 확대해도 이미지가 깨지지 않음
• Bitmap Data: 격자 하나하나마다 정보를 담고 있어 확대를 하면 이미지가 깨질 수 있음

<svg> 태그

• svg 이미지를 웹에 구현하기 위해 사용하는 마크업 태그
• html에서 이모티콘 같은 이미지를 넣을 수 있는 태그는 svg 태그(벡터 데이터를 시각화시켜줌)

svg 이모티콘 파일을 html에 import 하는 방법

1. 새로운 파일 속에 이모티콘 고유의 svg 태그 코드를 저장한 후, html body 태그 안에 img 태그를 사용하여 파일을 불러오는 방법
2. 새로운 파일 속에 이모티콘 고유의 svg 태그 코드를 저장한 후, html의 head 태그 안에 style 태그를 사용하여 파일을 불러오는 방법
3. 이모티콘 고유의 svg 태그 코드를 그대로 html의 body 태그 안에 저장하는 방법