SVG入门笔记（一）

本系列文章是对于走进svg课程的总结

SVG简介

使用XML描述的矢量文件
W3C标准（1.1）：http://www.w3.org/TR/SVG11/
浏览器支持情况：http://caniuse.com/#cats=SVG

SVG实例

<svg xmlns="http://www.w3.org/2000/svg" 
    width="200" height="200">
    <!--Face-->
    <circle cx="100" cy="100" r="90" fill="#39F" />
    <!--Eyes-->
    <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"/>
    <!--Smile-->
    <path d="M 50 140 A 60 60 0 0 0 150 140" 
        stroke="white" stroke-width="3" fill="none" />
</svg>

效果：

SVG使用方式：

• 浏览器直接打开
• 在HTML中使用img（src=sample.svg）标签引用
• 直接在htm中使用SVG标签
• 作为CSS背景（background:url(sample.svg)）