Hello,

kok nae-ga ha-myun an-dweneun MAGIC...🧚

웹 프로그래밍

SVG ( Scalabe Vector Graphic ) 이미지를 사용해보자!

✿도담도담 2018. 9. 22. 10:57

/* Di it! 프런트엔드 웹 디자인 입문 책을 참고로 작성한 글입니다.*/


매번 이용하는 아이콘 사이트에는 PNG뿐만 아니라 SVG도 있었는데

드디어 무슨 친구인지 알아냈다. 😠

별로 어려운 것도 아닌데 왜 알아볼 생각을 안했지...


우선 SVG는 Scalabe Vector Graphic의 약자로 역시 직관적으로 느낌이 온다.

확장을 해도 깨지지 않는 친구구나!


SVG는 아래와 같은 장점을 가지고 있다.

* 스타일 수정이 쉽다.

* XML 기반의 문서다.

* 애니메이션이나 CSS3효과를 적용할 수 있다.


필자는 XML을 안드로이드 스튜디오를 사용하면서 많이 접해봤는데 여기서도 활용이 되는구나 알았다.


그렇다면 SVG는 어디에서 사용 이 될까?

요즘 웹 트랜드인 반응형 웹을 만들다보면 로고나 아이콘 이미지를 축소했다가 확대했다가 하는 경우가 많다.

이런 경우 SVG를 사용하면 화질에 영향을 받지 않는다.

필자도 png쓸 때 너비가 너무 커지면 화질이 깨질까봐 큰 사진을 다운받아 쓰고 그랬는데...( 수치.. )

또한 데이터의 시각화라고 하는 그래프등을 그릴때 사용되는 것도 SVG다.


이런 SVG이미지를 다운하는 곳은 책에서는 material.io/icons 를 추천하고 있고, 

개인적으로는 https://www.flaticon.com/  사이트를 사용하고 있다.

만약 포토샵이나 일러스트레이터에서 SVG파일로 저장했다면 용량이 크기 때문에 최적화 과정이 필요하다.

최적화는 SVG optimiser 사이트를 추천하고 있다. ( 책에서 😉 )




이제 본격적으로 SVG이미지 파일을 사용해보자.

첫번째로 SVG파일을 다운 받은 후 이미지 태그를 사용해서 넣어주는 방법이 있다. ( 간단 ! )

<img src="carrot.svg" width="300" height="300"/>

▼ 나타난 웹 화면


두번째는 XML문법을 사용한 소스이기 때문에 SVG소스를 그대로 웹 문서에 삽입해도 된다. 실행결과는 동일하다.

* 메모장에서도 열립니다 :)

<body>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 56.538 56.538" style="enable-background:new 0 0 56.538 56.538;" xml:space="preserve">
<g>
<path style="fill:#88C057;" d="M34.685,22.808c0,0,12.342-7.316,20.178,3.022c0,0,2.032,2.35,0.47,4.6
c-1.537,2.212-4.968,1.742-6.676-0.603C47.116,27.712,43.403,25.027,34.685,22.808z"/>
<path style="fill:#88C057;" d="M34.685,22.808c0,0,7.506-12.152-2.145-19.301c0,0-3.185-2.863-6.062-1.844
c-2.676,0.947-2.746,4.678-0.284,6.089C28.892,9.299,32.588,13.163,34.685,22.808z"/>
<path style="fill:#88C057;" d="M54.604,26.466c0,0,0.067,0.086,0.155,0.205c0.257-0.23,0.506-0.478,0.732-0.768
c2.084-2.67,0.414-4.736,0.414-4.736c-6.186-9.306-20.584,0.807-20.584,0.807c0.693,0.048,1.341,0.11,1.968,0.176
C41.406,20.648,49.11,19.218,54.604,26.466z"/>
.
.
.
</svg>
</body>

세번째는 SVG이미지를 소스 형태로 사용하는 방법이다.

SVG이미지를 더블클릭해서 F12번을 누른뒤 보이는 <sgv>태그를 복사해 붙이는 방법이다.

파란색으로 표시된 부분을 복사에서 내 html에 원하는 곳에 붙여넣기 하면된다.

이렇게 SVG소스를 사용해서 이미지를 삽입하면 CSS를 사용해 이미지 크기또는 색상을 변경할 수 있다.


색상은 fill 속성을 사용해서 바꿀 수 있다.

style="fill= ... "이라고 되어있는 부분을 수정해보자. ( 필자는 티가 나게끔 검정으로 해봤다. )

1
2
<path style="fill:#000000;" d="M34.685,22.808c0,0,12.342-7.316,20.178,3.022c0,0,2.032,2.35,0.47,4.6
        c-1.537,2.212-4.968,1.742-6.676-0.603C47.116,27.712,43.403,25.027,34.685,22.808z"/>
cs


원하는 부분에 클래스를 지정 해 주어서 변경 할 수도 있다. ( hover시 색상 변경 등등 )




SVG파일을 쓸 때 한가지 주의 해야 할 점이 있다.

바로 SVG파일을 지원하지 않는 하위 버전을 대응해야한다 ! ( png로 대체 해주어야 한다. )

인터넷 익스플로러 8이하 또는 안드로이드 2.3이하 버전에서는 SVG파일을 표시할 수 없다.

이렇게 브라우저에서 특정 기능을 지원하는지 여부를 테스트 해주는 도구가 따로 있다.

바로 Modernizer 이라는 스크립트인데 사이트에서 다운받아 폴더에 넣어 사용하면 된다. ( 해더 부분에 당연히 경로를 적어주고 ! )

이 부분은 다음에 계속해서 다루도록 하겠다 ! 😖