SVG 의 이해 및 배치 관련 내용

SVG 이해

SVG(Scalable Vector Graphics)는 확장 가능한 벡터 그래픽을 표현하기 위한 XML 기반의 마크업 언어로, 웹에서 그래픽을 표현하는 데 사용되는 형식입니다.

SVG는 XML 형식을 사용하여 그래픽 요소들을 정의하고 조작할 수 있는 벡터 그래픽 포맷으로, 화면 크기에 독립적이며 고해상도 그래픽을 지원하며, 확대/축소가 가능하고 품질 손실 없이 크기를 조절할 수 있습니다.

svg 에 많은 내용이 있지만 디자인에 관련된 내용도 있고 모두 알필요 없이 핵심적인 내용만 알아도 개발하는 입장에서 충분할 것 같다.

SVG의 주요 특징

1. 벡터 그래픽: 화면 크기에 독립적인 벡터 기반 그래픽을 사용하여 고해상도 디스플레이에 적합하며, 확대/축소에도 품질 손실이 없다.
2. XML 기반: XML 형식을 사용하여 그래픽 요소들을 정의하고, 수정, 조작할 수 있습니다.
3. 스타일링과 애니메이션: CSS 를 사용하여 SVG 요소들을 스타일링하고, JavaScript를 통해 동적으로 애니메이션을 추가할 수 있습니다.
4. 상호작용: 마우스 이벤트나 터치 이벤트 등을 사용하여 사용자와 상호작용이 가능합니다.
5. 다양한 그래픽 요소: 직선, 곡선, 다각형, 텍스트, 이미지 등 다양한 그래픽 요소들을 지원합니다.

SVG 의 viewPort, viewBox 개념

viewPort

• 이미지가 브라우저에서 실제로 보이는 영역을 의미
• SVG가 렌더링되는 영역을 의미

viewBox

• 이미지의 종횡비를 의미
• 모든 길이와 좌표를 사용 가능한 전체 공간에 맞게 조정하는 방법을 정의
• viewBox 속성에 좌표 및 크기 정보를 설정하여 구현할 수 있다
  • viewBox = "x, y, width, height"

SVG 이미지 배치 관련 이슈

위에서 설명한 것 과 같이 다른 래스터 이미지와 달리 요소의 크기를 정의하는 방식이나 조정하는 방식이 조금 다르다

일반적으로 래스터 이미지에 적용하는 css 를 적용하다가는 원하는 결과가 나타나지 않을 수 있다.

그 중 이미지가 제한된 공간에서 어떻게 배치되고 조정되는지 여부를 래스터 이미지에서는 css 에 object-fit 속성을 활용해서 조정했지만 SVG 이미지는 제대로 적용되지 않는다. (별의 별 짓을 해봤는데 일부 css 속성은 아예 적용이 안 되는 듯 하다)

preserveAspectRatio 속성

• 뷰박스(ViewBox) 내부의 요소들이 화면(viewPort) 상에서 어떻게 배치될지를 정의
• preserveAspectRatio 속성을 활용 함으로써 기존 레스터 이미지를 배치할 때 사용하던 css 속성인 object-fit, object-position 등 의 효과를 낼 수 있다

※ viewBox 속성과 함께 사용해야 원하는 결과를 얻을 수 있다.

preserveAspectRatio="<align> [<meetOrSlice>]"

• <align> : Alignment value

  • none : 종횡비 무시 화면에 맞춰버림
  • x[Min or Mid or Max]Y[Min or Mid or Max] : 배치 위치 지정
    • ex) "xMinYMax" 일 경우 좌상단쪽을 기준으로 내용이 보여짐 (position:absolute, left:0; top:0; 같은 모양새)

• [<meetOrSlice>] : Meet or slice reference

  • meet : 요소를 뷰박스 내에 가장 크게 보이게 하되, 뷰박스를 벗어나지 않도록 크기를 조절합니다.
  • slice : 요소가 뷰박스에 맞도록 축소되는 대신, 뷰박스를 벗어나지 않도록 요소를 잘라내어 보여줍니다.

참고

https://code-masterjung.tistory.com/108
https://css-tricks.com/scale-svg/