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