SVG는 기본적으로 XML 기반이다. 그러면서 SVG와 HTML은 설계적으로 공통된 개념을 가지고 있다. 따라서 HTML 내에서 SVG는 이식성이 매우 좋다. 하지만 HTML 내에서 가져오는 몇가지 방식이 존재하는데 어떠한 방식을 선택했냐에 따라서 코드에 의한 제어와 성능면에서 차이가 발생할 수 있다.
HTML 내에서 SVG를 사용하는 방법과 차이점은 다음과 같다.
인라인 코드 삽입은 HTML상의 다른 코드와 함께 융합되어 작성되는 방식이다. SVG 만의 코드 작성 규칙이 HTML 문서내의 SVG 컨테이너 안에서 적용된다.
HTML 코드와 완벽하게 융합될 수 있으며 Javascript, CSS 코드를 통한 제어가 가능하다.
캐시(cache)가 안되므로 삽입된 SVG 코드의 양이 상당한 경우에는 HTML 성능에 영향을 줄 수 있다.
SVG 문서 타입을 그대로 사용하며 코드를 별도로 분리할 수 있기에 코드의 가독성이 좋고 캐시(cache)가 가능해서 속도 성능에서 뛰어날 수 있다. 그리고 동일출처(same origin)라면 Javascript 코드를 통한 제어가 가능하다.
CSS를 외부에 두고 SVG에 반영할 수 없다. 그리고 Javascript 코드를 통한 SVG 하위 요소의 접근이 인라인 방식보다 복잡하다.
<iframe src="character.svg"></iframe>object 태그를 사용하는 것과 동일한 장점을 가지고 있다. 추가적으로 동일출처(same origin)라면 부모창 객체에 접근이 가능하다.
object 태그를 사용할 때의 단점이 그대로 적용된다. 그리고 SVG 크기 조절시 다양한 문제를 만날 수 있다.
비트맵 이미지처럼 SVG를 다루므로 매우 단순하고 쉽다. 그리고 캐시(cache)도 가능하다.
SVG 내부의 스타일은 동작하지만 스크립트는 무시된다. 모든 웹브라우저가 이 방식을 지원하지 않을 수 있다.