[코딩공부_114] SVG를 활용한 웹 페이지 만들기

png나 jpg만 사용하여 웹 페이지를 만들진 않으셨나요? SVG를 활용해서 멋진 웹 페이지를 만들어 보아요!! :)

---

SVG란?

SVG(Scalable Vector Graphics)는 2차원 그래픽을 표현하기 위해 만들어진 XML파일 형식의 마크업 언어입니다. 벡터는 기본적인 도형, 패스 등 일러스트에서 작업하는 모든것이 될 수 있습니다. SVG는 코드를 수정할 수 있기 때문에 다양하게 활용할 수 있다는 장점이 있습니다.

- SVG는 크기를 줄이거나 늘리더라도 화질에 영향을 미치지 않습니다.

- 원하는 색상을 자유롭게 적용할 수 있습니다.

 

SVG의 파일 용량 줄이기

패스를 정돈하고 가능한 많은 포인트를 제거하고 포인트를 픽셀 값에 맞추어 겹치는 영역을 최대한 제거하여 파일 용량ㅇ르 줄일 수 있습니다. 

 

 

SVG 사용방법

① img

일반 이미지와 같이 <picture> 요소에서 SVG를 사용할 수 있지만 이 메서드는 조작 기능을 제한합니다.

<img class="filter_red" src="logo.svg" />

 

② Background-image

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

base64 인코딩을 하면 다운로드하는 동안 나머지 스타일 로딩을 차단 시키기 때문에 사용하지 않는 편이 좋습니다. 이 메시더는 조작 기능 제한합니다. 

 

③ Iframe

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

 

④ Embed

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

외부 응용 프로그램, 대화형 콘텐츠를 통합할 때 사용됩니다. SVG를 사용할 수 있지만 사용하지 않는 편이 좋습니다.

 

⑤ inline 

<svg xmlns="http://www.w3.org/1500/svg" viewBox="0 0 168 15">
  <path fill="#000000" d="M15 21c-22v0-3.5-1.5-7-7-5s-7 3.3-7 8v21l12 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 1-3.1 7-7 1z"/>
  <path d="M14 27v-20c0-3.7-3.3-7-7-7s-7 3.5-1 7c59c0 8.2 9.2 30 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>

HTTP 요청은 저장되지만 이미지는 브라우저에 캐시되지 않습니다. 조작이 가장 쉽지만 인라인 SVG 코드를 유지하는 것은 어려울 수 있기 떄문에 추천하지 않습니다.

 

⑥ Object**

<object type="image/svg+xml" data="logo.svg">Bee</object>

HTML 문서 내에 직접 내장 시키지 않고 SVG를 조적하는 경우 가장 좋은 방법입니다.

 

SVG를 최대한 활용하려면 <object>를 사용하고, 이미지와 동일하게 사용하려면 <img> 또는 background-image를 사용하는 것을 추천합니다.

	object	inline	img	background-image
CSS 조작	O	O	△(일부 inline)	△(일부 inline)
JS 조작	O	O	X	X
SVG 조작	O	O	O	O
인터렉티브 SVG 애니메이션	O	O	X	X

 

SVG를 통해 그려지는 효과 만들기 

stroke-dasharray는 선을 대쉬 형태로 만듭니다(값을 부여한 만큼 대쉬 길이가 늘어납니다.)예를 들어 svg 태그는 path가 있는데 path의 길이가 100이고 dasharray가 50이라면 그림은 절반만 보이게 되는 셈입니다.이때, dasharray와 path의 길이가 동일하면 100% 모두 보여진다는 것입니다. 이것을 활용하여 우리는 그려지는 효과를 만들 수 있습니다. 

.svg {
	stroke-dasharray : 500;
    stroke-dashoffset : 500;
    animation: ani 5s linear infinite;
}
@keyframes ani {
  0% {
    stroke-dashoffset: 500; 
  }
  50% {
    stroke-dashoffset: 0;  
  }
  100% {
    stroke-dashoffset: -500;
  }
}