在網頁設計中，SVG（可縮放矢量圖形）已經成為一種越來越流行的圖像格式。與傳統的圖像格式相比，SVG具有無限放大、保留清晰細節等優點。但是在使用SVG時，如果沒有正確地設置寬度和高度，可能會導致圖像壓縮或拉伸變形。因此，本文將介紹如何使用CSS來設置SVG的寬度和高度。

/*設置SVG的寬度和高度*/
svg {
width: 200px;
height: 100px;
}

上面的CSS代碼設置了SVG的寬度為200像素，高度為100像素。注意，這里的width和height屬性需要與SVG文件中的viewBox屬性配合使用，以確保圖像不被拉伸變形。

viewBox是SVG中的一個重要屬性，它指定了SVG在瀏覽器中顯示的范圍。可以把它理解為一個可縮放的畫布，在這個畫布上繪制了我們需要的圖形。如果設置了viewBox屬性，那么SVG的寬度和高度將自動調整以適應指定的范圍。

例如，下面的SVG代碼繪制了一個寬度和高度都為100的正方形：

<svg viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" fill="blue" />
</svg>

在上面的代碼中，viewBox屬性的值為"0 0 100 100"，表示SVG的范圍從左上角開始，寬度為100像素，高度也為100像素。因此，無需設置寬度和高度，圖像會自動適應。

當然，有時候我們需要在一個已經存在的SVG上添加樣式，這時候就需要手動設置寬度和高度了。使用CSS設置寬度和高度時，可以使用像素、百分比等單位來表示。可以通過以下代碼來實現SVG寬度和高度的自適應：

/*設置SVG寬度和高度自適應*/
svg {
width: 100%;
height: auto;
}

上面的CSS代碼將SVG的寬度設置為父容器的100%，高度自動適應。這樣，無論父容器的寬度和高度如何變化，SVG都會保持自適應。

綜上所述，如果想要正確地顯示SVG圖像，就需要正確地設置寬度和高度。可以使用CSS來設置寬度和高度，同時也需要注意SVG文件中的viewBox屬性，以確保圖像不會變形。