-
웹 개발에서 svg 형식의 이미지 파일을 활용해보자Dev 2020. 10. 4. 23:28
안녕하세요.
오늘은 웹 개발 중 자주 사용하는 이미지 파일 포맷 중 하나인 svg에 대해 포스팅합니다.
일반적으로 웹 개발에서 사용하는 jpg,png 혹은 인코딩된 jpeg 이미지 파일 등에 비해, svg는 다소 생소할 수 있습니다.
하지만 svg 파일의 장점은, 웹 개발시에 CSS, Javascript, HTML 등과 함께 동작할 수 있다는 점입니다.
이게 무슨 뜻인지 알아보기 전에 svg 파일은 다른 파일과 어떤 차이가 있는지 부터 알아봅시다.
svg 파일은 우리가 잘 아는 픽셀로 구성되는 비트맵 방식의 png 파일과는 다릅니다. svg는 XML 기반의 파일 형식으로 이루어진 벡터 이미지로, 수학을 기반으로 하는 점, 선, 곡선 등으로 이미지를 표현하는 형태입니다.
즉 비트맵 방식의 파일은 일정 수의 픽셀로 이루어져 있어 이미지를 확대하면 깨지게 되지만, svg 파일은 그렇지 않습니다.
이미지를 표현하는 방식이 텍스트 파일로 모두 정의가 되어 있다는 뜻이죠. 이게 무슨 뜻인지 알아보기 위해 svg 파일을 직접 뜯어봅시다.
아무 svg 파일 하나만 구해봅시다. 이미지의 패턴(선, 곡선, 점의 형태)가 단순할 수록 svg 파일을 표현하는 XML 텍스트도 단순해지게 됩니다. 저는 flaticon 사이트를 이용하여 다음과 같은 svg 파일을 구해왔습니다.
이제 이 파일을 텍스트 편집기에서 열어봅시다.
아주 긴 코드가 나타납니다. HTML스러운데? 라고 느끼는 것은 위에서 설명했듯 XML 기반의 파일 형식이기 때문입니다.
이 긴 코드가 이 이미지 파일의 점, 선, 패턴 등을 표현하는 벡터 이미지를 나타내며, 이렇게 코드 형식으로도 제공이 되기 때문에 CSS, HTML, Javascript에서도 동작 가능한 것입니다.
이제 아무 HTML 파일이나 만들어서 저 코드를 갖다 붙여 봅시다.
<!DOCTYPE html> <html lang="ko"> <body> <svg height="512pt" viewBox="-2 0 511 512" width="512pt" xmlns="http://www.w3.org/2000/svg"> <path d="m85.5 60c0-11.027344 8.972656-20 20-20h174.890625v71.109375c0 33.085937 26.914063 60 60 60h71v118.890625h40v-147.144531l-142.132813-142.855469h-203.757812c-33.085938 0-60 26.914062-60 60v230h40zm234.890625 51.109375v-43.207031l62.886719 63.207031h-42.886719c-11.03125 0-20-8.96875-20-20zm186.109375 289.890625v20c0 50.054688-40.707031 90.800781-90.816406 91h-.367188c-50.109375-.199219-90.816406-40.945312-90.816406-91 0-50.179688 40.800781-91 90.945312-91 12.867188 0 25.320313 2.644531 37.007813 7.859375l-16.296875 36.527344c-6.527344-2.910157-13.496094-4.386719-20.710938-4.386719-28.089843 0-50.945312 22.878906-50.945312 51 0 28.058594 22.863281 50.898438 51 51 21.023438-.074219 39.101562-12.847656 46.898438-31h-42.898438v-40zm-361 55.5c0 30.601562-24.898438 55.5-55.5 55.5h-89.5v-40h89.5c8.546875 0 15.5-6.953125 15.5-15.5s-6.953125-15.5-15.5-15.5h-34c-30.601562 0-55.5-24.898438-55.5-55.5s24.898438-55.5 55.5-55.5h68.5v40h-68.5c-8.546875 0-15.5 6.953125-15.5 15.5s6.953125 15.5 15.5 15.5h34c30.601562 0 55.5 24.898438 55.5 55.5zm125.621094-126.5h42.316406l-62.792969 182h-30.445312l-63.699219-182h42.378906l36.382813 103.949219zm0 0"/> </svg> </body> </html>
잠깐!😳
img src="file.svg" 형태로 붙여넣어도 똑같이 이미지가 나타나지만 스타일을 적용하거나, 벡터 이미지 내부 코드를 건드릴 수 없습니다.
굳이 그런 식으로 사용할 거라면, 사용 환경에 맞는 다른 이미지 파일 형식을 사용하는 게 옳겠습니다.
모든 이미지 파일 포맷은 장단점을 갖고 있으며, svg 파일은 코드 내에서 동작 가능하다는 것을 제외하면 단점도 많으니까요!
이미지가 잘 띄워집니다. 근데 좀 이미지가 크네요. 이 벡터 이미지가 기본적으로 큰 사이즈로 작성되어 있기 때문입니다. 직접 수정해 보아요! <svg> 태그의 height, width 값을 다음과 같이 바꿔볼까요?
<!DOCTYPE html> <html lang="ko"> <body> <svg height="50pt" viewBox="-2 0 511 512" width="50pt" xmlns="http://www.w3.org/2000/svg"> <path d="m85.5 60c0-11.027344 8.972656-20 20-20h174.890625v71.109375c0 33.085937 26.914063 60 60 60h71v118.890625h40v-147.144531l-142.132813-142.855469h-203.757812c-33.085938 0-60 26.914062-60 60v230h40zm234.890625 51.109375v-43.207031l62.886719 63.207031h-42.886719c-11.03125 0-20-8.96875-20-20zm186.109375 289.890625v20c0 50.054688-40.707031 90.800781-90.816406 91h-.367188c-50.109375-.199219-90.816406-40.945312-90.816406-91 0-50.179688 40.800781-91 90.945312-91 12.867188 0 25.320313 2.644531 37.007813 7.859375l-16.296875 36.527344c-6.527344-2.910157-13.496094-4.386719-20.710938-4.386719-28.089843 0-50.945312 22.878906-50.945312 51 0 28.058594 22.863281 50.898438 51 51 21.023438-.074219 39.101562-12.847656 46.898438-31h-42.898438v-40zm-361 55.5c0 30.601562-24.898438 55.5-55.5 55.5h-89.5v-40h89.5c8.546875 0 15.5-6.953125 15.5-15.5s-6.953125-15.5-15.5-15.5h-34c-30.601562 0-55.5-24.898438-55.5-55.5s24.898438-55.5 55.5-55.5h68.5v40h-68.5c-8.546875 0-15.5 6.953125-15.5 15.5s6.953125 15.5 15.5 15.5h34c30.601562 0 55.5 24.898438 55.5 55.5zm125.621094-126.5h42.316406l-62.792969 182h-30.445312l-63.699219-182h42.378906l36.382813 103.949219zm0 0"/> </svg> </body> </html>
이미지가 작게 출력이 되네요. 하지만 이 정도로 코드로서 이미지 파일을 제어한다고 하기는 근거가 부족합니다.
이번엔 한번 스타일을 입혀 볼까요? 기본적으로 svg 파일은 <svg> 태그로 작성이 되어 나오기 때문에 우리가 <button> 등의 태그에 스타일을 입혔던 것 처럼 똑같이 사용할 수 있습니다!
<style> svg{ width: 40px; height: 40px; fill: red; } </style>
이미지에 색깔이 칠해집니다. 다른 jpg, png 파일에서는 픽셀 단위로 이미지를 구성하고 있기 때문에 이렇게 직접 색깔을 입히는 것은 불가능했죠. 따라서 텍스트와 함께 hover, checked 등의 상태에서 스타일을 따로 구현하려면 이미지를 따로 제작해서 이벤트 상태에 맞는 이미지를 띄워주는 것 밖에 할 수 없었습니다. 하지만 그럴 때 svg 파일을 이용하면 코드 상으로 충분히 구현할 수가 있죠.
이게 웹 개발에서 svg 파일을 잘 사용하면 효율적인 이유입니다. 한번 hover 스타일도 입혀볼까요?
<style> svg{ width: 40px; height: 40px; fill: red; } svg:hover { fill: blue; } </style>
마우스를 올리면 스타일이 잘 적용되는 것을 볼 수 있습니다. 사실 이러한 간단한 스타일 적용 외에도, 모든 이미지 패턴이 코드로 작성되어 있기 때문에 일정 선만 움직이게 애니메이션을 넣거나, 일정 부분만 사라지게 하거나 하는 등으로 활용성도 무궁무진합니다.
웹 개발에서 많은 곳이 svg 파일로 갈아타고 있는 이유기도 하죠. 하지만 구버전 브라우저에서는 작동을 하지 않는 경우도 있기 때문에, 개발 환경에 맞게 사용하는 편이 맞겠습니다.
이상으로 포스팅을 마칩니다.
'Dev' 카테고리의 다른 글
내 맘대로 추천하는 프론트엔드/리액트 개발자를 위한 편리한 VSCode Extension(확장 프로그램) 모음 (0) 2020.12.15 [django] shell 스크립트를 이용해 배포 자동화하기 (0) 2020.11.30 크롬 개발자도구를 잘 활용해보자! 1) Network 활용하기 (0) 2020.09.15 [django] SEO를 위한 사이트맵(sitemap.xml)을 장고 프로젝트에 등록하기 (3) 2020.08.14 [django + s3] 장고에서 정적 파일 반영 후에도 바로 적용되지 않는 오류 해결하기 (0) 2020.08.05
