/* 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.6c-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.844c-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.768c2.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.176C41.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 이라는 스크립트인데 사이트에서 다운받아 폴더에 넣어 사용하면 된다. ( 해더 부분에 당연히 경로를 적어주고 ! )
이 부분은 다음에 계속해서 다루도록 하겠다 ! 😖
'~ 2024.08' 카테고리의 다른 글
| 웹 페이지의 랜더링 과정 2편 (1) | 2018.09.25 |
|---|---|
| 웹 페이지의 랜더링 과정 1편 (2) | 2018.09.23 |
| 캐러셀 ( carousel ) 만들기 / 반응형 슬라이드 만들기 (8) | 2018.09.19 |
| [ HTML / CSS ] 배경 고정 스크롤 (5) | 2018.09.02 |
| [ One Hour One Life ( 원아월 원라이프 ) ] 스프 만들기 🍲 (1) | 2018.08.31 |