CMS솔루션마켓, 이온디 - 워드프레스, 라이믹스, 카페24, 그누보드, 엑셀

프리랜서 커뮤니티

SVG 표현하는 5가지 방법

2015년 11월 26일

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

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

 

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

1. svg Element Inside HTML

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 파일 내용

2     <rect x="10" y="10" height="100" width="100" style="stroke:#ff0000; fill: #0000ff"/>
3 </svg>

Content Type 변경필요

image/svg+xml

추천한 사람