위키
포럼
도구
바뀐글
랜덤

SVG 인라인 vs 별도 파일 장단점

1 개요[ | ]

SVG 인라인 vs 별도 파일 장단점
  • 최근 프론트엔드 예시에서 SVG를 별도 파일이 아니라, 소스코드 내에서 svg 태그로 넣는 경우가 많이 보인다.
  • 성능 측면에서는 "HTTP 요청 수 × 캐시" 트레이드오프가 있어서 어느 한쪽이 무조건 좋은 것은 아니다.
  • 개발 생산성 측면에서는 스타일 분석·수정이 간편한 인라인 방식이 더 좋아 보인다. 그래서 사례가 점점 많이 보이는 것으로 보인다.
구분 인라인(소스코드에 포함) 별도 파일
장점
  • HTTP 요청 수가 적어진다.
  • IDE 또는 개발자 도구에서 분석·조작할 수 있다.
스타일(색상 등)을 간단히 바꿔볼 수 있다.
  • SVG 파일이 캐시된다.
  • 별도 서버(예: 오브젝트 스토리지)로 분리할 수 있다.
  • 소스코드에서 장황한 SVG 내용을 보지 않아도 된다.
단점
  • 소스코드가 장황해진다.[1]
  • SVG 파일이 캐시되지 않는다.
즉, HTML을 읽을 때마다 SVG 내용을 읽게 된다.[2]
  • HTTP 요청 수가 많아진다.[3]
  • 서버 구성에 따라 스타일(색상) 변경이 다소 번거로울 수 있다.

2 같이 보기[ | ]

3 참고[ | ]

  1. ↑ 컴포넌트로 분리하면 별도로 관리할 수 있긴 하다.
  2. ↑ 모듈화된 js 내부에 들어있는 경우라면, js가 캐시되므로 캐시될 수 있다.
  3. ↑ 일단 SVG 파일들이 캐시되고 나면, HTTP 요청 수는 줄어든다. 별도 서버로 분리한 경우, 메인 서버에 전혀 부담이 없다(캐시되기 전의 최초 요청조차도 그쪽으로 가지 않는다.)
원본 주소 "https://zetawiki.com/w/index.php?title=SVG_인라인_vs_별도_파일_장단점&oldid=806840"
문서 댓글 ({{ doc_comments.length }})
{{ comment.name }} {{ comment.created | snstime }}