1，直接打开simple.svg
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <circle cx="100" cy="100" r="90" fill="#39F" /> <circle cx="70" cy="80" r="20" fill="white" /> <circle cx="130" cy="80" r="20" fill="white" /> <circle cx="65" cy="75" r="10" fill="black" /> <circle cx="125" cy="75" r="10" fill="black" /> <path d="M 50 140 A 60 60 0 0 0 150 140" stroke="white" stroke-width="3" fill="none" /> </svg>
2，在html中使用img标签引用 img.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>use img ref SVG</title> </head> <body> <h1>Hello SVG with <img></h1> <p><img src="simple.svg" alt="">原始大小</p> <P><img src="simple.svg" alt="" width="50" height="50">50X50</P> <p><img src="simple.svg" alt="" width="400" height="400">400X400</p> </body> </html>
3，在html中直接使用svg标签 nest.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>nest</title> </head> <body> <h1>Hello Nested SVG</h1> <p> <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <circle cx="100" cy="100" r="90" fill="#39F" /> <circle cx="70" cy="80" r="20" fill="white" /> <circle cx="130" cy="80" r="20" fill="white" /> <circle cx="65" cy="75" r="10" fill="black" /> <circle cx="125" cy="75" r="10" fill="black" /> <path d="M 50 140 A 60 60 0 0 0 150 140" stroke="white" stroke-width="3" fill="none" /> </svg> </p> </body> </html>
4，使用css作为背景 css.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css by SVG</title> <style> body{ background: #EFEFEF; } #bg{ width: 400px; height: 400px; background: white url(simple.svg) repeat; box-shadow: rgba(0,0,0,.5) 2px 3px 10px; border-radius: 10px; } </style> </head> <body> <h1>Hello SVG with CSS</h1> <div id="bg"></div> </body> </html>