漸變的使用：

    <svg width="400" height="300" viewBox="0 0 400 300">
        <defs>
            <linearGradient id="linear" x1="0%" x2="100%" y1="0%" y2="100%">
                <stop offset="0%" stop-color="#000"></stop>
                <stop offset="50%" stop-color="#fff"></stop>
                <stop offset="100%" stop-color="#000"></stop>
            </linearGradient>
            <radialGradient id="radial" cx="0%" cy="0%" r="100%" fx="50%" fy="50%">
                <stop offset="0%" stop-color="#000"></stop>
                <stop offset="50%" stop-color="#fff"></stop>
                <stop offset="100%" stop-color="#000"></stop>
            </radialGradient>
        </defs>
        <rect x="0" y="0" width="100" height="80" rx="5" ry="5" fill="url(#linear)"></rect>        
        <rect x="50" y="50" width="100" height="80" rx="5" ry="5" fill="url(#radial)"></rect>        
    </svg>
 

筆刷的使用：

    <svg width="400" height="300" viewBox="0 0 400 300">
        <pattern id="pattern" x="0" y="0" width="50" height="50" patternUnits="userSpaceOnUse">
            <rect x="0" y="0" width="50" height="50" rx="0" ry="0" stroke="red" fill="none"></rect>
        </pattern>
        <rect x="0" y="0" width="400" height="300" rx="0" ry="0" fill="url(#pattern)"></rect>
    </svg>
 

圓弧的繪製：

    <svg width="400" height="300" viewBox="0 0 400 300">
        <path d="M10,10 V100 A100,100,0,0,0,110,10 Z" stroke="red" fill="none"></path>
    </svg>

文字的使用：

    <svg width="400" height="300" viewBox="0 0 400 300">
        <text x="50" y="50" dx="20 40 60" dy="20 40 60" stroke="red" fill="green" font-size="30" font-family="Microsoft YaHei" base-line="top">你好啊</text>
    </svg>
 

路徑文字：

    <svg width="400" height="300" viewBox="0 0 400 300">
        <path id="textPath" d="M10,50 Q30,100 50,50 T80,70" stroke="red" fill="none"></path>
        <text x="-30" dy="10">
            <textPath xlink:href="#textPath">你好啊我很好謝謝</textPath>
        </text>
    </svg>

裁剪示例：

    <svg width="100%" height="100%" viewbox="-100 -100 200 200">
        <defs>
            <clipPath id="clipPath">
                <polygon points="0,-10 2,-2 10,0 2,2 0,10 -2,2 -10,0 -2,-2"></polygon>
            </clipPath>
        </defs>
        <circle cx="15" cy="0" r="20" clip-path="url(#clipPath)" fill="yellow"></circle>
    </svg>

蒙板示例：

    <svg width="400" height="300" viewBox="0 0 400 300">
        <g id="shape">
            <linearGradient id="linear" x1="0%" x2="100%" y1="0%" y2="100%">
                <stop offset="0%" stop-color="#fff"></stop>
                <stop offset="70%" stop-color="#000"></stop>
            </linearGradient>
            <mask id="mask">
                <circle cx="50" cy="50" r="20" fill="url(#linear)"></circle>
            </mask>
            <circle cx="50" cy="50" r="20" fill="yellow" mask="url(#mask)"></circle>
        </g>
    </svg>

基本動畫：

    <svg width="400" height="300" viewBox="0 0 400 300">
        <rect x="0" y="0" width="100" height="80" rx="5" ry="5">
            <animate id="animate" attributeType="XML" attributeName="fill" begin="0; animate2.end+1s" from="red" to="blue" dur="2s" fill="freeze"></animate>
            <animate id="animate2" attributeType="XML" attributeName="x" begin="animate.end+1s" from="0" to="100" dur="2s" fill="freeze"></animate>
        </rect>
    </svg>

多個動畫是可以同時進行的；repeatCount="indefinite"可以讓動畫永遠進行下去。

    <svg width="400" height="300" viewBox="0 0 400 300">
        <rect x="0" y="0" width="100" height="80" rx="5" ry="5">
            <animateTransform  attributeType="XML" attributeName="transform" type="rotate" from="0" to="45" dur="2s" fill="freeze"></animateTransform>
        </rect>
    </svg>

    <svg width="400" height="300" viewBox="0 0 400 300">
        <rect x="0" y="0" width="30" height="40" rx="5" ry="5">
            <animateMotion  path="M0,0 L20,100 L80,100 Z" rotate="auto" dur="2s" fill="freeze"></animateMotion>
        </rect>
        <path d="M0,0 L20,100 L80,100 Z" stroke="red" fill="none"></path>
    </svg>

動畫響應事件：

    <svg width="400" height="300" viewBox="0 0 400 300">
        <circle id="circle" cx="50" cy="50" r="20"></circle>
        <rect x="0" y="0" width="30" height="30" rx="5" ry="5">
            <animate id="animate1" attributeName="x" begin="circle.mouseover; accesskey(s)" end="circle.mouseout" from="50" by="100" dur="2s" repeatCount="indefinite" repeatDur="5"></animate>
            <animate id="animate2" attributeName="fill" begin="animate1.repeat(2)" from="red" to="blue" dur="2s"></animate>
        </rect>
    </svg>