CSS可以使用SVG（矢量圖形標記語言）來增加網頁的視覺效果和交互性。SVG是由W3C創建的一種開放標準，在網頁設計中有很大的作用。

<svg width="100" height="100">
<rect x="10" y="10" width="80" height="80" fill="red" />
</svg>

上述代碼表示一個100*100像素的SVG矩形，矩形的邊距坐標為（10,10），寬高為80像素，填充顏色為紅色。這個SVG圖形可以被CSS樣式設計，比如在:hover狀態時變成藍色：

<style>
svg {
transition: fill 0.3s;
}
svg:hover rect {
fill: blue;
}
</style>

上述代碼使SVG圖形在鼠標懸浮時變成藍色。transition屬性在CSS3中定義了過渡效果，fill屬性用于設置SVG形狀的填充顏色。

SVG還可以用于創建動畫，比如下面的代碼表示一個循環旋轉的SVG矩形：

<svg width="50" height="50">
<rect x="10" y="10" width="30" height="30" fill="blue">
<animateTransform attributeName="transform" type="rotate" from="0 25 25" to="360 25 25" dur="2s" repeatCount="indefinite" />
</rect>
</svg>

上述代碼中，animateTransform標簽定義了SVG矩形的動畫屬性，包括從0度旋轉到360度、以中心點坐標（25，25）為旋轉點、旋轉速度為2秒、重復次數為無限。這個SVG矩形可以添加CSS樣式來更好的展示。

CSS使用SVG矢量圖形非常方便，可以讓網頁設計更加炫酷和生動。我們可以通過學習SVG標識語言，來為網頁添加更豐富的視覺效果。