몽땅뚝딱 개발자

SVG(Scalable Vector Graphics) 본문

Something Useful/또 다른 정보

SVG(Scalable Vector Graphics)

레오나르도 다빈츠 2021. 12. 17. 19:25

◽ SVG(Scalable Vector Graphics)란?

확장가능한 벡터 그래픽을 SVG라고 한다.

2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어이다.

 

 

◽ SVG의 주요 속성

- 뷰박스(viewbox)

좌표와 가로, 세로의 비율을 결정하는 svg의 특성이다. viewBox="0 0 0 0"으로 사용할 수 있으며, 각 자리는 순서대로 x, y, width, heigth를 의미한다. 영화관에 비추는 영상이라고 생각하면 된다.

 

- 뷰포트(viewport)

svg의 가시영역으로 해당 요소의 너비와 높이를 의미한다. width="100px", height="100px"으로 사용할 수 있다. 영화관에서 스크린보다 큰 영상을 비추면 화면에 보이지 않게 되는 것 처럼 영화관의 스크린 영역이라고 생각하면 된다.

 

 

◽ SVG 구현 방법: <svg> 태그

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 65">
  <path fill="#1A374D" d="M42 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v21l12 15-7 15.7c14.5 13.9 35 2.8 35-13.7 0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
  <path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.3-7 7v41c0 8.2 9.2 17 20 17s20-9.2 20-20c0-13.3-13.4-21.8-26-18zm6 25c-3.9 0-7-3.1-7-7s3.1-7 7-7 7 3.1 7 7-3.1 7-7 7z"/>
</svg>

 

 

◽ SVG 구현 방법: 그 외의 방법들

[img]

<img src="img.svg" alt="logo" height="65" width="68">

 

[Background-image]

.logo {
	background-image: url(img.svg);
}

 

[Iframe]

<iframe src="img.svg"></iframe>

 

[Embed]

<embed type="image/svg+xml" src="img.svg" />

≤

[Object]

<object type="image/svg+xml" src="img.svg"></object>

 

 

 

참조 및 출처

 

개발자를 위한 svg 크기 변경하기

 너무 깊은 내용은 다루지 않는다. 사실 나도 모른다. 적어도 개발자가 svg를 다룰 때 알면 도움이 될만한 정도로 내용을 정리해 보려고 한다. 일반적으로 래스터 이미지의 크기를 변경하는 경우

code-masterjung.tistory.com

 

 

웹에서 SVG 사용하기

들어가며 우리는 픽셀의 시대를 살아가고 있습니다. 웹 디자이너와 웹 개발자들에게 픽셀이란 뗄레야 뗄 수 없는 친구이면서 골치덩어리입니다. 완벽한 웹 사이트를 위해서는 파일 용량을 줄여

svgontheweb.com

저작자표시

'Something Useful > 또 다른 정보' 카테고리의 다른 글

개발 시 버전관리 규칙  (0) 2022.02.14
로컬 스토리지와 세션 스토리지의 차이점  (0) 2022.01.10
반응형과 적응형  (0) 2021.12.15
release, deploy의 차이  (0) 2021.12.14
WAS와 Web의 차이  (0) 2021.11.18
'Something Useful/또 다른 정보' Related Articles more
Comments

티스토리툴바