在使用jQuery Mobile開發移動應用時，SVG是一種非常有用的圖形圖像。SVG是可縮放矢量圖形，它們可以根據屏幕大小調整大小而不會失真。在這篇文章中，我們將了解如何在jQuery Mobile中使用SVG。

首先，我們需要向我們的HTML頁面中添加SVG元素。我們可以在HTML中使用<svg>標簽來創建一個SVG元素。

<svg width="100" height="100">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>

上面的代碼將創建一個100像素寬、100像素高的SVG元素，其中有一個半徑為40像素（r="40"）的圓。圓心的坐標為（50,50），描邊的顏色為黑色（stroke="black"），寬度為3像素（stroke-width="3"），填充顏色為紅色（fill="red"）。

在jQuery Mobile中，我們可以使用data-role="none"來防止jQuery Mobile渲染SVG元素，并確保SVG元素的原樣加載。

<div data-role="page">
<div data-role="content">
<svg width="100" height="100" data-role="none">
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
</div>
</div>

上面的代碼創建了一個jQuery Mobile頁面并在其中添加了一個SVG元素。請注意，SVG元素的data-role="none"屬性防止了jQuery Mobile對SVG元素進行任何樣式或行為修飾。

最后，我們可以使用jQuery Mobile中的CSS框架為SVG元素進行樣式設置。例如，我們可以使用以下CSS來為圓形添加邊框樣式：

.circle {
stroke: black;
stroke-width: 3px;
}

然后，我們可以在SVG元素中添加一個class="circle"以使用我們剛剛定義的樣式：

<svg width="100" height="100" data-role="none">
<circle cx="50" cy="50" r="40" fill="red" class="circle" />
</svg>

現在，我們已經學會了在jQuery Mobile中使用SVG的基礎知識。SVG是一種非常強大的圖像類型，可用于在移動應用中創建漂亮的圖形和視覺效果。