SVG는 무엇인가?

SVG(Scalable Vector Graphics)는 2차원 벡터 그래픽을 서술하는 XML 기반의 마크업 언어입니다. SVG는 텍스트 기반의 열린 웹 표준 중 하나로, 모든 사이즈에서 깔끔하게 렌더링 되는 이미지를 서술하며 CSS, DOM, JavaScript, SMIL (en-US) 등 다른 웹 표준과도 잘 동작하도록 설계됐습니다. SVG는 달리 말하자면 HTML과 텍스트의 관계를 그래픽에 적용한 것입니다. -MDN

SVG는 많은 양의 애니메이션 또는 사용자 정의 디자인이 쓰이는 프로젝트에서 개발속도를 향상시켜줄 수 있는 강력한 파일 포맷입니다.

장점은?

우리가 주로 알고 있는 레스터화 이미지 혹은 비트맵 이미지(JPG, GIF, PNG)와 비교했을때 SVG가 가져다주는 장점은 다음과 같습니다.

• 웹사이트 로딩 속도가 빠르다. 💨
  SVG는 XML코드이기 때문에 파일의 크기가 작습니다. 사용 사례에 따라서 SVG는 60%에서 80%정도의 대역폭을 절감한다고 합니다. SVG는 HTML파일에 작성이 될 수 있기때문에 외부 이미지를 가져오기 위해서 HTTP request를 할 필요가 없습니다.
• 어떤 크기에서든 재활용이 가능 (Future Proof) ♻️
  SVG는 크기에 따라 이미지가 왜곡되거나 품질이 떨어져 보이지 않습니다. 그렇기 때문에 하드웨어 해상도가 높은 디바이스에서도 품질 저하없이 볼 수 있습니다.
• SEO 친화적이다. 💻
  XML코드에는 키워드, 설명, 링크 등이 포함될 수 있습니다. 그래서 해당 콘텐츠를 검색 엔진에서 더 쉽게 인실할 수 있도록 할 수 있습니다.
• 개발 효율 증대 효과
  디자이너들은 Figma, Sketch 등에서 디자인한 작업물들을 SVG로 내보낼 수 있습니다. 직접 개발자가 SVG로 다운받을 수도 있습니다. 번거로운 작업을 줄일 수 있습니다.
• CSS로 디자인 수정이 가능하다.
  또한 개발자는 SVG파일을 코드로 직접 변경할 수 있기때문에 디자이너에게 재요청 및 기다릴 필요가 없어지고 디자이너는 이미지를 수정할 필요가 없습니다.

단점은?

• 너무 복잡한 SVG는 비효율적일 수 있다.
  많은 모양, 색상, 그라디언트를 포함하여서 파일 크기가 JPG나 PNG 보다 커지는 경우가 종종 있기 때문에 단점이 될 수 있습니다.
• 최적화
  다양한 편집툴에서 내보내진 SVG 파일에는 중복되고 쓸모없는 정보가 많이 포함되어 있습니다. 예를 들어, 편집기의 메타 데이터, 주석, 숨겨진 요소가 있습니다. 최적화 되지 않은 경우에는 PNG보다 파일 크기가 커질 수 있기때문에 최적화를 할 수 있는 도구의 도움을 받는 것이 좋을 수 있습니다.