SVG 이해가 잘 안됩니다
본문
부트스트랩5에서 모바일 3줄 메뉴가 SVG로 되어있던데
코드를 봐도 이해가 안됩니다
SVG를 잘 설명한 사이트는 없을까요?
.navbar .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
답변 2
SVG 는 벡터 좌표값과 색상환을 담는 코드입니다.
<img src=*.svg /> 로도 호출이 가능하고, <svg ~></svg> 코드입력도 가능한 다재다능한 녀석입니다.
파일로써 등록하여 사용하는 방식과 페이지에서 직접 그리는 바리에이션이 있으니 가능성이 무한대.
따라서 드로잉도 가능하기에 단순한 로고부터 화려한 일러스트레이션까지 jpg, png 파일의 사용없이
<svg> 코드만으로 구현이 가능합니다.
일러스트레이터, 포토샵(*psd 원본), figma 등에서 코드를 추출해서 사용 할수도 있습니다.
최근 작업시 svg 로 포함시킨 로고이미지의 초반부분만 인용하여 설명드리자면
<svg width="168" height="62" viewBox="0 0 168 62" fill="none" xmlns="http://www.w3.org/2000/svg" style="margin-top:10px;">
<rect y="0.521744" width="168" height="61.4783" rx="10" fill="#fff"/>
<path d="M131.45 45.0257C136.634 45.0257 141.458 41.0657 141.458 34.2977C141.458 27.4937 136.634 23.5337 131.45 23.5337C126.23 23.5337 121.406 27.4937 121.406 34.2977C121.406 41.0657 126.23 45.0257 131.45 45.0257ZM131.45 39.8417C129.038 39.8417 127.958 37.6817 127.958 34.2977C127.958 30.8777 129.038 28.7177 131.45 28.7177C133.826 28.7177 134.906 30.8777 134.906 34.2977C134.906 37.6817 133.826 39.8417 131.45 39.8417Z" fill="#E2B100"/>
</svg>
svg 의 width, height 와 같은 기본반찬을 제외하고 viewBox, Fill 이 눈에 띄네요.
viewBox 의 0 0 168 62 에 width 와 height 의 값인 168, 62 가 포함된것으로 추정해본다면
canvas 혹은 screen 크기를 제한하는 녀석인걸로 상식적인 추론이 가능하고,
path 는 파스 혹은 펜툴로써의 역할을 하고 있다는 너낌을 쎄게 받을 수 있습니다.
rect 는 정식방법은 아닐수도 있지만 생략되어도 작동은 할겁니다... 상세설정에 해당할수 있겠네요.
Fill 의 경우 이미지의 배경색을 제어하는데, 어쩌면 svg 활용에 가장 자주 이용될 속성으로 생각합니다.
배경색을 의미하지만, 한글로 말하면 채움색의 개념인것이라 배경색은 #fff, 채움색은 #E2B100 를 사용하게 되었다는것을 알 수 있습니다.
CSS 로 이를 제어하려 한다면 마찬가지로
svg path { fill : #ccc; } 와 같은 형태로 채움색을 변경하거나
svg, svg rect { fill : #000; } 를 사용 할 수 있습니다.
마찬가지로 width, height 의 변화를 줄 수 있지만 % 가 아닌 절대값이 입력되어야 정확한 이미지가 표현될 수 있는 불편한점은 있습니다.
단 질문주신내용처럼 repeat 되는 배경이미지라면 또 다른 이야기이지만 이제 적어도 저 코드의 시작이
30 * 30 짜리 테두리 이미지를 호출되고 어떤 색을 띄고 있는지는 알 수 있습니다.
자세한 설명 감사합니다.
감사합니다!
