[HTML] HTML 문서 내에서 SVG 이용

 

SVG란?

: 벡터 기반 그래픽

: 이미지 크기에 상관없이 선명하게 유지가 가능하고 아이콘 같은 단순한 이미지에 사용

: 확대해도 깨지지않고 절대 늘어나지 않음.

: 모양이 복잡하고 그림을 구성하는 포인트가 많을 수혹 용량 증가

 

 

SVG 사용해 HTML 파일에 넣는 방법

<img> 이용해 넣기

<img src = "icon.svg" />

 

svg를 직접 HTML에 inline으로 넣기

<div>
            <svg
              viewBox="0 0 20 20"
              style="
                width: 20px;
                height: 20px;
                display: block;
                fill: rgba(55, 53, 47, 0.85);
                flex-shrink: 0;
                backface-visibility: hidden;
              "
              class="topbarUpdate"
            >
              <path
                d="M10.0781 18.1562C14.5078 18.1562 18.1641 14.5 18.1641 10.0781C18.1641 5.65625 14.5 2 10.0703 2C5.64844 2 2 5.65625 2 10.0781C2 14.5 5.65625 18.1562 10.0781 18.1562ZM10.0781 16.5469C6.49219 16.5469 3.625 13.6641 3.625 10.0781C3.625 6.49219 6.49219 3.61719 10.0703 3.61719C13.6562 3.61719 16.5391 6.49219 16.5469 10.0781C16.5547 13.6641 13.6641 16.5469 10.0781 16.5469ZM6.14062 11.0625H10.0703C10.4297 11.0625 10.7031 10.7891 10.7031 10.4375V5.32812C10.7031 4.97656 10.4297 4.70312 10.0703 4.70312C9.72656 4.70312 9.45312 4.97656 9.45312 5.32812V9.8125H6.14062C5.78906 9.8125 5.51562 10.0859 5.51562 10.4375C5.51562 10.7891 5.78906 11.0625 6.14062 11.0625Z"
              ></path>
            </svg>
</div>