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

티스토리 뷰

프로그래밍/JavaScript

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

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

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 이미지 생성

저작자표시 비영리 변경금지

'프로그래밍 > JavaScript' 카테고리의 다른 글

[JS] 정규식으로 URL 추출하기 v0.2 - URL 추출 및 분석/검사 (8)	2010.03.12
[JS] jQuery, 속성 셀렉터 표현식(Attribute Selector Expressions) (0)	2010.02.12
[JS] 현재 URL 주소값에 해당하는 메뉴들을 제어하기 (0)	2009.05.19
[JS] 정규식으로 URL 추출하기 (0)	2009.04.10
[JS] 메모리 누수 막기 팁! - Finally (1)	2008.10.21
[JS] escape(), encodeURI(), encodeURIComponent() 차이 (0)	2008.07.23
PNG를 사용하여 자바크스립트 소스 대폭 압축하기 (0)	2008.07.05

공지사항

글 퍼가실때 꼭 읽어주세요.

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2025/02 »
일	월	화	수	목	금	토
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28

글 보관함

Kingdom

티스토리 뷰

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

목차

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

참고사항

2. SVG 추가 하는 방법

<img>

인라인(inline) <svg>

<embed>, <object>, <iframe>

fetch() + innerHTML

background-image

3. CSS 접근 방법

인라인(inline) 스타일

외부 스타일

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

4. JavaScript로 SVG 안의 객체 접근

<object>, <iframe>

<embed>

인라인(inline) <svg>

fetch() + innerHTML

'프로그래밍 > JavaScript' 카테고리의 다른 글

티스토리툴바