SVG 사이즈 타이틀 SVG란 SVG 정의 SVG 수정

SVG 사이즈 타이틀, SVG란?

SVG란?

Raster vs Vector

 

Scalable Vector Graphics의 줄임말로, 마크업 언어를 가지고 벡터 기반의 그래픽을 표현한다.

 

SVG 사이즈 수정하기

 

<svg width="30px" height="30px" viewBox="0 0 100 100"> 
... 
</svg>

해당 코드는 아이콘 svg 크기의 예시이다.

 

viewBox

 

viewBox="<min-x> <min-y> <width> <height>"

width와 height로 svg 태그의 영역의 넓이를 조절하고, viewBox라는 속성으로 x축, y축, 가로, 세로 길이를 설정할 수 있다. 

 

툴팁 수정하기

<svg viewBox="0 0 20 10" xmlns="http://www.w3.org/2000/svg">
...
    <title>I'm a div with a `title`</title>
...
</svg>

svg title

svg에 title 태그가 있다면, 해당 svg를 마우스 오버로 2초 정도 기다리면 툴팁을 볼 수 있다.

title 태그를 수정하거나 삭제해서 사용하면 된다.

title 태그의 기능이므로 꼭 svg가 아니여도 상관 없다.

 

SVG가 안나온다?

svg가 가지고 있는 태그 중에서 id 혹은 url 값이 같으면 안나올 수 있다.