HTML5 ??? SVG

SVG? ??????

SVG? Scalable Vector Graphics? ?????.

SVG? ?? ?? ?? ???? ???? ? ?????.

SVG? XML ?? ?? ???? ?????

SVG ???? ????? ??? ???? ??? ??? ?? ????

SVG? World Wide Web Consortium? ?????

SVG? ???? ?? ??? ??? ??? ? ????. Canvas API ??? ????? Canvas ??? ???? ?? ? ??? ?? ??? ?????. ???? ???? ??? ?? ??? ??? ??? ?? ??? ??? ??? ??? ??? ? ????. ?? ?? Canvas? ???? ?? ???? ??? ? ??? SVG? ???? ?? ?????. ?? ?? Google? ?? ?? SVG ???? ???? ?? ??? ?????.

SVG? ??

?? ??? ??(?: JPEG, GIF)? ??? ? SVG ??? ??? ??? ????.

SVG ???? ??? ???? ?? ? ?? ??

SVG ???? ??, ???, ???? ?? ?? ??

SVG? ?? ??

SVG ???? ?? ?? ????? ???? ??

??? ?? ?? ?? SVG? ??? ? ????

???? SVG ??

??? ??: ?? ???? ?? HTML, JavaScript ? SVG? ??? ?? ????? ??? ? ?? HTML? ?????.

<body>
    <svg width="200" height="200">
    </svg>
</body>

????? ??: <img> ??? ?? HTML? ?? SVG ??? ?????. ??? SVG ??? ?? ???? ????? ??? ? ??? ????.

??? ??

SVG?? ??? ?? ?? ?? ??? ???? ????. ????, ? ? ??. ?? ??? ??? ??? ???? ?????. ????? ??? ??? ?????. ??? ??? ???? r ????? ????. ??? ?? CSS ??? ???? ??? ????? ???? px, point, em ?? ?????.

????: x="50" y="20"? ????? ???? (50,20)?? ?????.

<body>
    <svg width="200" height="200">
        <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
    </svg>
</body>

SVG ??? ?? ??? ???? ???? ?????. ?? ??. ????? ?? ? ?? ??? ???? ?? ?? ?????.

? ??:

<body>    
<svg width="200" height="200">        
<rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc">
</rect>        
<circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle> 
</svg>
</body>

SVG ?? ??

SVG??? ?? ??? ???? ??? ???? ??? ? ? ????.

<g> ??? "??"? ???? ?? ?? ??? ???? ? ??? ? ????. ?? ???? ID? ??? ? ????. ?? ?? ??? ??? ?? ????. ??? ?? ??? ???? ??? ?? ???? ?????. ?? ???? ??, ??, ?? ?? ? ???? ?????.

 <svg width="200" height="200">
        <g transform="translate(60,0) rotate(30) scale(0.75)" id="ShapeGroup">
            <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
            <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
         </g>
    </svg>

??? ???

SVG? <defs> ??? ?? ??? ?? ??? ???? ???? ? ?????. <use> ??? ???? <defs>? ?? ??? ???? ???? ?? ??? ??? ? ????. ? ? ?? ??? ???? ??? ???? ?? ? ????? ???? ??? ? ????.

<svg width="200" height="200">
        <defs>
            <g  id="ShapeGroup">
                <rect x="50" y="20" width="100" height="80" stroke="red" fill="#ccc"></rect>
                <circle cx="120" cy="80" r="40" stroke="#00f" fill="none" stroke-width="8"></circle>
            </g>
        </defs>
        <use xlink:href="#ShapeGroup" transform="translate(60,0)  scale(0.4)"></use>
        <use xlink:href="#ShapeGroup" transform="translate(120,80)  scale(0.75)"></use>
        <use xlink:href="#ShapeGroup" transform="translate(20,60)  scale(0.25)"></use>
    </svg>

?? ? ?????

<svg>
<defs>
            <pattern id="GravelPattern" patternContentUnits="userSpaceOnUse"
                x="0" y="0" width="100" height="67" viewBox="0 0 100 67">
                <image x="0" y="0" width="100" height="67" xlink:href="gravel.jpg" />
            </pattern>
            <%--漸變--%>
            <linearGradient id="RedBlackGradient">
                <stop offset="0%" stop-color="#000"></stop>
                <stop offset="100%" stop-color="#f00"></stop>
            </linearGradient>
        </defs>
      <rect x="0" y="20" width="100" height="80" stroke="red"
           fill="url(#RedBlackGradient)" />
        <circle cx="120" cy="80" r="40" stroke="#00f"
            stroke-width="8" fill="url(#GravelPattern)" />
    </svg>

Path

<path> ??? ?????.

<path> ??

<path> ??? ??? ???? ? ?????.

?? ????? ?? ??? ??? ? ????.

M = moveto

L = lineto

H = horizon lineto

V = ???to

C = ??to

S = ???? ??to

Q = 2? ??? ??

T = ???? 2? ??? ??

A = ??? ?

Z = closepath

??: ?? ?? ??? ???? ?????. ???? ?? ??? ????, ???? ?? ??? ?????.

SVG?? ??? ??? ?? ?? ??? ???? ????. path ???? ?? ???? ???? d ??? ????. d ??? M? Move to, L? Line to, Q? 2? ??, Z? ?? ??? ?????.

 <svg width="200" height="200">
        <path d="M25,50 L10,80 L20,80 L5,110,L15,110,L20,80 Z"  />
    </svg>

???

SVG? ???? CSS? ??? ??? ?? ????

<svg width="200" height="200">
        <text x="10" y="80" font-family="Droid Sans" stroke="#00f" fill="#00f"
            font-size="40px" font-weight="bold">Hello SVG</text>
    </svg>

? SVG ??

SVG? XML? ??? 2D ???? ???? ?????.

Canvas? JavaScript? ???? 2D ???? ????.

SVG? XML? ???? ?? ?? SVG DOM? ?? ??? ????? ? ??? ?????. JavaScript ??? ???? ??? ??? ? ????.

SVG??? ??? ?? ??? ??? ?????. SVG ??? ??? ???? ????? ???? ???? ??? ? ????.

???? ?? ??? ??????. ?????? ???? ???? ? ?? ????? ??? ? ? ????. ??? ???? ????? ???? ? ?? ??? ???? ?? ??? ?? ??? ???.

???? ??