SVG 표현하는 5가지 방법 - 아임웹 전문가찾기

웹팁

글 등록하기 | 내글 관리하기 | 연재글 | 보관함

SVG 표현하는 5가지 방법

2015.11.26 15:36 조회 수

174

이온디

첨부파일 https://imweb.eond.com/coding/365297

svg 파일도 css에서 background 속성을 img와 똑같이 사용할 수 있습니다.

.svg_css{background: url('./ico.svg') no-repeat;}

출처 : http://iview83.tistory.com/entry/SVG를-표현하는-5가지-방법

1. svg Element Inside HTML

	
			1
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		
			2
			    <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/>
		
			3
			</svg>

2. img

`1`	`<img` `src="./svg.svg"` `/>`

3. iframe

`1`	`<iframe` `src="./svg.svg"></iframe>`

4. css background

`1`	`<div` `style="width:102px;height:102px;background:url(./svg.svg) no-repeat 0 0"></div>`

5. embed

`1`	`<embed` `src="./svg.svg"` `width="300"` `height="220"` `type="image/svg+xml"` `pluginspage="http://www.adobe.com/svg/viewer/install/"` `/>`

svg.svg 파일 내용

	
			1
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
		
			2
			    <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/>
		
			3
			</svg>

Content Type 변경필요

image/svg+xml

Total 8 articles in 1 / 1 pages

	제목	날짜
	코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP)	2018/01/03
	jQuery를 배울수 있는 동네들입니다.	2013/08/09
	관련 링크 [1]	2010/05/23
	[svg] SVG 표현하는 5가지 방법	2015/11/26
7	[svg] SVG 소개	2015/11/26
6	[svg] 점점점 more 아이콘 svg 파일	2015/11/26
5	[svg] svg 제공 사이트, thenounproject.com	2015/11/26
4	[svg] 간단한 예제, 네모난 박스 svg	2015/11/26
3	[svg] jenkov svg tutorial	2015/11/27
2	[svg] svg 색깔 칠하기	2015/11/27
1	[svg] SVG PATH EDITOR (코드로 SVG 패스 만들기)	2022/04/21