프로그래밍/JavaScript

SVG 추가 방식 비교 & CSS 접근 & JavaScript 내부 객체 접근 방법

카이(KAi) 2025. 2. 10. 07:30

목차

  1. SVG 추가 방식에 따른 차이점
  2. SVG 추가하는 방법
  3. CSS 접근 방법
  4. JavaScript로 SVG 안의 객체 접근

 

 

1. SVG 추가 방식에 따른 차이점

방법 DOM 접근 가능 CSS 접근 SVG
애니메이션		 DOM 접근시
CORS 제한		 비고 추천
<embed> 가능 가능 가능 보안정책(CORS) 제한 가능성 getSVGDocument()로 접근  X
<object> 가능 가능 가능 보안정책(CORS) 제한 가능성 contentDocument로 접근 O
<iframe> 가능 가능 가능 보안정책(CORS) 제한 가능성 contentDocument로 접근 X
인라인 <svg> 가능 가능 가능 - 이미지가 브라우저에
캐시되지 않음		 O
fetch() + innerHTML 가능 가능 가능 보안정책(CORS) 제한 가능성  동적 로딩 가능 O
background-image 불가능 일부 inline 불가능 - 이미지로 렌더링 O
<img> 불가능 일부 inline 불가능 - 이미지로 렌더링 O

참고사항

  • 인라인(inline) <svg> 란?
    • HTML 파일에 SVG 코드를 HTML 코드와 같이 작성해 두는 것
  • CSS 접근
    • <img>, background-image 사용시  일부 inline 가능한 부분은, SVG 파일내에 인라인(inline) 스타일 사용시 스타일이 적용되어 이미지로 렌더링 됨 (외부 스타일은 안됨)
  • 보안 제한 (CORS 이슈)
    • 외부 서버의 SVG를 불러오는 경우, 보안 정책(CORS) 때문에 JavaScript로 해당 이미지의 내용을 읽는 것이 제한된다
  • <embed>는 특정 목적이 아닌 이상 일반적으로는 비추천

 

 

2. SVG 추가 하는 방법

<img>

<img src="image.svg" width="100" height="100"/>

 

인라인(inline) <svg>

<div>
	<svg id="mySVG" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
		<circle id="myCircle" cx="50" cy="50" r="40" fill="blue" />
	</svg>
</div>

 

 

<embed>, <object>, <iframe>

  • embed, iframe보다 object를 추천
<!-- embed로 삽입 : src로 경로 지정, type 지정 -->
<embed id="svg_embed" src="image.svg" type="image/svg+xml"/>

<!-- object로 삽입 : data로 경로 지정, type 지정 -->
<object id="svg_object" data="image.svg" type="image/svg+xml"></object>

<!-- iframe으로 삽입 : src로 경로 지정 -->
<iframe id="svg_iframe" src="image.svg"></iframe>

 

 

fetch() + innerHTML

<div id="container"></div>

<script>
fetch('image.svg')
.then(response => response.text())
.then(svgText => {
	document.getElementById('container').innerHTML = svgText;
});
</script>

 

 

background-image

[참고]
SVG 파일을 data URI scheme 코드로 변환해주는 사이트
https://bloggerpilot.com/en/tools/svg-to-css/
/* (1) url 경로 지정하는 방법 */
.image {
	background-image: url('image.svg');
	width: 100px;
	height: 100px;
	background-position: center;
}

/* (2) data URI scheme */
.image_ {
	background-image: url('data:image/svg+xml,<svg id="mySVG" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle id="myCircle" cx="50" cy="50" r="40" fill="blue" /></svg>');
	width: 100px;
	height: 100px;
	background-position: center;
}

 

 

 

3. CSS 접근 방법

일반적으로 CSS 사용하는 것과 마찬가지로 동일하게 사용할 수 있다

 

인라인(inline) 스타일

  • XML 파서가 특정 문자와 충돌할 수 있어서 <![CDATA[ ]]> 로 감싸는 걸 추천
<!-- image.svg -->
<?xml version="1.0" encoding="utf-8"?>
<svg id="mySVG" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
	<style type="text/css">
	<![CDATA[
		#myCircle { fill: red; }
	]]>
	</style>
	<circle id="myCircle" cx="50" cy="50" r="40" fill="blue" />
</svg>

 

 

외부 스타일

  • SVG 파일 내에서 외부 style.css 파일을 참조
<!-- image.svg --->
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<svg id="mySVG" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
	<circle id="myCircle" cx="50" cy="50" r="40" fill="blue" />
</svg>
/* style.css */
#myCircle { stroke: white; stroke-width: 5px; }

 

 

인라인(inline) <svg> 사용시 좀 더 자유롭게 접근 가능

<html>
<head>
<style>
	#myCircle { stroke: white; stroke-width: 5px; }
</style>
</head>
<body>
	<svg id="mySVG" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
		<circle id="myCircle" cx="50" cy="50" r="40" fill="blue" />
	</svg>
</body>
</hthml>

 

 

4. JavaScript로 SVG 안의 객체 접근

<object>, <iframe>

- 외부 도메인에서 불러온 경우, 보안 정책(CORS)으로 인해 접근이 차단될 수 있음
- 대신, 같은 출처(Same-Origin)에서 불러온 SVG 파일은 DOM 접근이 자유롭다
- 테스트는 로컬 서버를 열어서 가능 (로컬 서버 구축 방법 : xampp)
<object id="svg_object" data="image.svg" type="image/svg+xml" width="100" height="100"></object>

<script>
const obj = document.getElementById('svg_object');// SVG 객체 ID
obj.addEventListener('load', () => {
        const svgDoc = obj.contentDocument;// SVG DOM 접근
        const circle = svgDoc.getElementById('myCircle');
        circle.setAttribute('fill', 'green');
});
</script>

 

 

<embed>

- 외부 도메인에서 불러온 경우, 보안 정책(CORS)으로 인해 접근이 차단될 수 있음
- 대신, 같은 출처(Same-Origin)에서 불러온 SVG 파일은 DOM 접근이 자유롭다
- 테스트는 로컬 서버를 열어서 가능 (로컬 서버 구축 방법 : xampp)
<embed id="svg_embed" src="image.svg" type="image/svg+xml" width="100" height="100">

<script>
const obj = document.getElementById('svg_embed');// SVG 객체 ID
obj.addEventListener('load', () => {
        const svgDoc = obj.getSVGDocument();// SVG DOM 접근
        const circle = svgDoc.getElementById('myCircle');
        circle.setAttribute('fill', 'green');
});
</script>

 

 

인라인(inline) <svg>

<svg id="svg-circle" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
	<circle id="myCircle" cx="50" cy="50" r="40" fill="blue" />
</svg>

<script>
	const svg = document.getElementById('svg-circle');
	const circle = svg.getElementById('myCircle'); // 바로 객체 접근 가능
	circle.setAttribute('stroke', 'white'); // attribute 또는 style 모두 접근 가능
	circle.style.setProperty('stroke-width', '5px');
</script>

 

 

fetch() + innerHTML

<div id="container"></div>

<script>
fetch('image.svg')
.then(response => response.text())
.then(svgText => {
	const container = document.getElementById('container')
	container.innerHTML = svgText;
	const svg = container.children[0];
	const circle = svg.getElementById('myCircle');
	// 또는 바로 SVG 안의 객체를 검색 가능하지만 ID가 중복 되는 경우도 고려
	//const circle = document.getElementById('myCircle');
	circle.setAttribute('stroke', 'red'); // attribute 또는 style 모두 접근 가능
	circle.style.setProperty('stroke-width', '15px')
});
</script>

참고

  • 챗 GPT (답변 내용 일부 인용, 답변 내용 체크 및 테스트 완료)
  • 웹에서 SVG 사용하기 - 실습 가이드 : https://svgontheweb.com/ko/
  • 커버 이미지 : Copilot 이미지 생성
저작자표시 비영리 변경금지 (새창열림)