[HTML+CSS] [이미지와 하이퍼링크] 03

[HTML+CSS] [이미지와 하이퍼링크] 02 - 링크 태그

[HTML+CSS] [이미지와 하이퍼링크] 01 - 이미지 태그 [HTML+CSS] [텍스트 관련 태그] 04 - 표를 만드는 태그 [HTML+CSS] [텍스트 관련 태그] 03 - 목록을 만드는 태그 [HTML+CSS] [텍스트 관련 태그] 02 - 인라인..

onelight-stay.tistory.com

기본적인 이미지들을 <img> 태그를 통해서 삽입하는 방법을 알았으니

SGV 이미지를 삽입하는 방법을 알아보자.

SVG(Scalable Vector Graphics)

-자연스럽게 크기 조절이 가능한 이미지-

기존에 jpg, png, gif 파일 같은 경우엔 작은 이미지를 크게 확대할 경우

이미지 테두리 부분이 울퉁불퉁 해지면서 화질이 깨지는 듯한 이미지가 나오는데,

SVG 이미지는

이미지를 아무리 확대하거나 축소해도 원래의 깨끗한 상태 그대로 유지된다.

이처럼, jpg, png, gif 같은 파일들을 비트맵 이미지라고 하고,

SVG이미지 같은 경우를 벡터 이미지라고 한다.

SVG 이미지를 웹문서에 넣는 방법은 간단하다.

그냥 기존에 사용하는 <img> 태그를 이용해서 넣어주면 된다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG 파일 삽입하기</title>
</head>
<body>
    <h1>SVG 이미지 삽입하기</h1>
    <img src="images/automobile.svg">
</body>
</html>

SVG 파일을 옮기는건 <img>에서 jpg 파일을 옮기는 거나 별반 다를 게 없었다.

하지만 만약 svg 파일이 옮겨지지 않을 경우도 대비해서 시도해 봐야 겠다.

< 참고 >

Do it! HTML5+CSS3 웹 표준의 정석

※ 해당 글은 습득 목적으로 작성된 글입니다 ※

저작자표시

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

[HTML+CSS][폼 관련 태그들] 01 - 폼(form) (0)	2020.06.16
[HTML+CSS] [이미지와 하이퍼링크] 04 - 연습문제 (0)	2020.06.15
[HTML+CSS] [이미지와 하이퍼링크] 02 - 링크 태그 (0)	2020.06.13
[HTML+CSS] [이미지와 하이퍼링크] 01 - 이미지 태그 (0)	2020.06.12
[HTML+CSS] [텍스트 관련 태그] 05 - 연습문제 (0)	2020.06.11

IT Information Notebook

[HTML+CSS] [이미지와 하이퍼링크] 03 - SVG 이미지

SVG(Scalable Vector Graphics)

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

댓글

티스토리툴바

[HTML+CSS] [이미지와 하이퍼링크] 03 - SVG 이미지

SVG(Scalable Vector Graphics)

'개인공부 > HTML5 + CSS3' 카테고리의 다른 글

관련글

댓글

티스토리툴바