[HTML] svg 태그란 무엇인가?

안녕하세요. 개발자 드리머즈입니다.

현재 Bootstrap을 이용해서 웹페이지 개발을 공부하고 있습니다.

Brackets와 bootstrap을 이용한 웹 페이지 만들기

공개된 Examples 중에서 Album 을 공부중입니다.

https://getbootstrap.com/docs/4.0/examples/album/

이 홈페이지에 보면

상단 왼쪽에 카메라 모양의 아이콘이 있습니다. 처음에는 당연히 작은 png 이미지일 거라고 생각했습니다.

근데 코드로 범위를 좁혀가면서 테스트 해보니 svg 태그로 생성된 것이네요. svg는 Scalable Vector Graphics의 약자로 벡터 이미지를 만드는 코드입니다.

<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2">
    <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path>
    <circle cx="12" cy="13" r="4"></circle>
</svg>

위의 코드가 카메라 모양의 벡터 이미지를 생성한 것입니다.

<svg>에 대해 공부를 좀 더 해보려고 합니다.

https://image.online-convert.com/convert-to-svg

https://inkscape.org/en/

참고

http://edyoon.tistory.com/831

http://edyoon.tistory.com/832