10.5 SVG

벡터(Vector) 이미지를 표현하기 위한 포맷

Vector vs Bitmap

svg도 다른 비트맵 이미지 처럼 img 태그를 이용해서 삽입한다.

<!-- png 파일 삽입 -->
<img scr="image.png">

<!-- svg 파일 삽입 -->
<img src="image.svg">

배경 이미지로 svg파일을 사용

<body>
    <div class="svg"></div>
</body>

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

svg 파일을 텍스트 에디터로 열어보면 몇 개의 태그와 태그 속성 값으로 되어있다. (XML 마크업 이용)

빈 svg 파일을 만든 뒤 svg 태그 안에 만들고 싶은 도형과 속성을 적어서 svg 파일을 만든다.

<svg width="210" height="210">    
    <rect x="5" y="5" width="200" height="200" style="fill:blue; stroke:red;stroke-width=10px">
</svg>

rect: 직사각형
style 속성 값이 직사각형을 시각적으로 보이게 하는 부분
테두리(stroke)를 지정한 경우 stroke 두께에 맞춰서 위치를 지정해주어야 한다.
stroke-width=10px 이므로 x="5" y="5"지정.
도형이 잘리지 않도록 <svg>의 width, height 모두 200+10로 지정.