[CSS, svg] svg, 가로 세로 사이즈 변경하기

SVG 이미지란?

무엇인가?

Scalable Vector Graphics(SVG): 확장 가능한 벡터 그래픽 형식입니다. SVG는 다양한 도형을 그릴 수 있는 명령어 집합을 제공하는 텍스트 기반 이미지 형식입니다.

왜 사용하는가?

1. 확장성: 화면 크기가 변해도 깨지지 않는 선명한 이미지를 제공합니다.
2. 저용량: 큰 이미지도 상대적으로 작은 파일 크기로 저장할 수 있습니다.
3. SEO 친화적: 텍스트 기반이기 때문에 검색엔진에 의해 색인화가 가능하여, SEO에 유리합니다.
4. 빠른 로드 속도: http 요청을 통해 이미지를 불러오지 않아도 되기 때문에 로드 속도가 빠릅니다.

왜 사용하지 않는가?

1. 복잡한 이미지: 이미지의 구성요소가 복잡해지면 파일 크기가 급격히 커질 수 있습니다.

<svg> 이미지의 preserveAspectRatio 속성

preserveAspectRatio 속성은 SVG의 종횡비를 지정하는 데 사용됩니다. 이 속성은 다음과 같은 경우에 유용합니다:

• 가로 세로 비율 유지: 고정 종횡비를 유지하여 이미지를 변형 없이 보이게 할 수 있습니다.
• 비율 무시: 이 속성을 none으로 설정하면 고정 종횡비를 무시하고 지정한 width와 height가 그대로 적용됩니다.

사용 예시

<svg width="100" height="100" preserveAspectRatio="none">
  <rect width="100" height="100" style="fill:blue;" />
</svg>

 

위 예시에서는 preserveAspectRatio="none" 속성을 통해 SVG가 고정 종횡비를 무시하고 지정된 크기로 나타납니다.

결론

SVG는 선명하고 확장 가능한 이미지를 제공하며, 저용량과 SEO 친화적인 특성으로 웹 개발에서 많이 사용됩니다. 그러나 복잡한 이미지를 다룰 때는 파일 크기가 커질 수 있으므로 주의가 필요합니다.

참고 자료

• MDN - preserveAspectRatio

이 글을 통해 SVG의 개념과 활용 방법을 이해하고, 장단점을 파악하여 웹 개발에 유용하게 활용할 수 있기를 바랍니다.