SVG製作

一、製作SVG的特點

SVG（Scalable Vector Graphics） 是一種XML類型的圖形格式，只要使用SVG標記描述圖形即可，因此可以很好地實現從多個角度放縮而且不失真的效果。此外，SVG圖形也可以與JavaScript進行交互，因此可以使用代碼操縱SVG圖形。

以下是一個簡單的SVG示例，它描述了由兩個圓形組成的一個笑臉。這個SVG可以在任何瀏覽器中直接查看。

<svg width="100" height="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="yellow"/>
    <circle cx="30" cy="30" r="10" stroke="black" stroke-width="2" fill="black"/>
    <circle cx="70" cy="30" r="10" stroke="black" stroke-width="2" fill="black"/>
    <line x1="30" y1="70" x2="70" y2="70" stroke="black" stroke-width="2"/>
</svg>

二、製作SVG動圖

除了基本的形狀，SVG還可以使用動畫來呈現更加生動的效果。下面是一個SVG動畫示例，展示了一個紅色圓點在一個矩形框中移動。當圓點到達矩形框的任一邊緣時，就會以相反的方向來回彈跳。

<svg width="300" height="200">
    <rect x="10" y="10" width="280" height="180" fill="#eee" stroke="#444" stroke-width="2"/>
    <circle cx="40" cy="50" r="10" fill="red">
        <animate attributeName="cx" from="40" to="260" dur="2s" repeatCount="indefinite" begin="0s" calcMode="spline" keyTimes="0;0.5;1" keySplines="0 0.5 0.5 1;0.5 0 1 0.5"/>
        <animate attributeName="cy" from="50" to="160" dur="2s" repeatCount="indefinite" begin="0s" calcMode="spline" keyTimes="0;0.5;1" keySplines="0 0.5 0.5 1;0.5 0 1 0.5"/>
    </circle>
</svg>

三、製作SVG表格

與HTML一樣，SVG也可以用於創建表格。以下是一個簡單的示例，展示了如何使用SVG來創建一個兩列兩行的表格。

<svg width="200" height="80">
    <rect x="0" y="0" width="100" height="40" fill="#eee" stroke="#444" stroke-width="2"/>
    <text x="50" y="25" text-anchor="middle" font-family="Arial" font-size="14" fill="#000">Cell 1</text>
    <rect x="100" y="0" width="100" height="40" fill="#fff" stroke="#444" stroke-width="2"/>
    <text x="150" y="25" text-anchor="middle" font-family="Arial" font-size="14" fill="#000">Cell 2</text>
    <rect x="0" y="40" width="100" height="40" fill="#fff" stroke="#444" stroke-width="2"/>
    <text x="50" y="65" text-anchor="middle" font-family="Arial" font-size="14" fill="#000">Cell 3</text>
    <rect x="100" y="40" width="100" height="40" fill="#eee" stroke="#444" stroke-width="2"/>
    <text x="150" y="65" text-anchor="middle" font-family="Arial" font-size="14" fill="#000">Cell 4</text>
</svg>

四、製作SVG圖片格式

SVG不僅可以描述基本的形狀和文本，還可以通過嵌入外部圖像文件來呈現更加複雜的圖形。下面是一個使用SVG來顯示PNG圖片文件的示例。這個示例使用了SVG的image元素，該元素允許我們在SVG文檔中顯示位圖圖像。

<svg width="400" height="300">
    <image x="0" y="0" width="400" height="300" xlink:href="sample.png"/>
</svg>

五、製作SVG圖標

SVG圖標可以在不失真的前提下在多種分辨率的屏幕上呈現出符合預期的效果。而且，SVG圖標比較小，適合用於網頁或者移動應用程序等地方。

以下是一個簡單的示例，展示了一個紅色的心形圖標。你可以使用類似於這樣的圖標展示特別的符號或者小圖標等。

<svg width="24" height="24">
    <path fill="#ff0000" d="M12,21.07c-0.42,0-0.84-0.16-1.16-0.47L1.47,11.66c-0.64-0.64-0.64-1.64,0-2.28c0.64-0.64,1.64-0.64,2.28,0l7.45,7.45l7.45-7.45c0.64-0.64,1.64-0.64,2.28,0c0.64,0.64,0.64,1.64,0,2.28l-9.37,9.37C12.84,20.91,12.42,21.07,12,21.07z"/>
</svg>

六、製作成長紀念冊

除了動畫、表格、圖片格式、圖標等等，SVG還可以用於製作更為複雜的圖形，比如成長紀念冊。使用SVG可以輕鬆地製作出一個美麗的成長紀念冊，記錄孩子成長的點滴足跡。

七、製作活動日曆

另外，SVG也可以用於製作活動日曆。使用SVG可以很好地展示活動日曆的信息，比如哪一天有什麼活動，以及活動的時間和地點等信息。