網站建設

作為杭州網頁設計師，您應該知道如何在網站中實施SVG（可縮放矢量圖形）。現在讓我們來看看SVG的基礎知識，以及更復雜的設計，如徽標或圖標。

我們將要創造什么

分辨率獨立

最近在WWDC 2012上， Apple宣布發布新的視網膜顯示器MacBook Pro。Retina顯示器具有比普通屏幕或顯示器更高的像素密度（220.5ppi），并且Apple聲稱他們的視網膜技術像素密度非常高，以至于眼睛在典型的觀看距離處無法注意到像素化。如果你親眼目睹了視網膜顯示，那么我相信你會同意他們看起來很棒。然而，這些視網膜顯示器可能開始給我們的網頁設計師帶來問題。

以前保存為72ppi的圖像現在開始在視網膜顯示器上看起來扭曲時出現問題。這個問題的解決方案仍未100％解決，設計人員正在尋找嘗試解決此問題的新方法。

一種可能的解決方案（在某些情況下）是使用SVG。你為什么要使用SVG？SVG被渲染為矢量，因此可以擴展到我們正在查看它們的任何屏幕分辨率，同時保持我們在設計它們時所預期的清晰度和晶體質量。

這不會解決所有問題; 我們無法使用SVG渲染基于像素的圖像，例如.jpg或png（但是，為此我們總是可以使用canvas標記）。當涉及到插圖圖標或徽標之類的東西時，SVG證明非常有用。今天，我將向您展示使用SVG的基礎知識，以及演示如何使用您在Adobe Illustrator中設計的向量并輕松地在您的網站中實現它們。

SVG總結為十分

在我們進入之前，我將簡要介紹一下SVG：

• SVG代表可縮放矢量圖形。

• SVG用于在Web上定義矢量圖形。

• XML格式用于定義矢量圖形。

• SVG在調整大小或縮放時不會失去質量。

• SVG可以動畫。

• SVG與dom集成，可以與JavaScript和CSS一起使用。

• SVG可以被編入索引，這意味著如果你在SVG中有文本，那么搜索引擎會選擇它。

• SVG可以任何分辨率打印。

• SVG目前是W3C的推薦。

• SVG適用于所有現代瀏覽器，但在IE 8或更低版本中不支持。插件可以用于任何低于該值的插件。

讓我們創建一些SVG形狀

行

讓我們開始吧。我們將創建一條線。我們通過將以下代碼添加到HTML文檔來完成此操作。

首先我們使用'svg'標簽然后在里面添加xml標記。這是我們定義的內容：

• X1： x軸上線的起始位置

• Y1： y軸上線的起始位置

• X2： x軸上線的終點位置

• Y2： y軸上線的終點位置

因此，例如，如果我們想要創建一條對角線，那么我們可以將y2屬性設置為200，這將使該行的終點減少200，從而創建一條對角線。我們也可以應用一些樣式，我們用CSS做到這一點。這里我們使用了一些內聯樣式，但如果您愿意，可以在外部樣式表中使用它們。

界

除了一些屬性之外，可以以與線類似的方式創建圓。在這里，我們將創建一個銀色圓圈，黑色邊框，半徑為50。

cx和cy屬性是我們可以設置圓圈中間的x和y坐標的屬性。如果我們錯過了這些屬性，那么圓圈的中心將被設置為“0”，這將導致圓圈從頁面中被切除。最后，標記為“r”的屬性設置圓的半徑。

矩形

正如您現在所看到的，使用SVG創建形狀非常簡單。創建矩形也不例外。

與在CSS中設置元素的寬度和高度類似，我們也使用svg'rect'屬性。

橢圓

橢圓的工作方式與創建圓的方式幾乎相同，但是，這次而不是只有一個固定的半徑，我們有x和y半徑的單獨屬性。

多邊形

多邊形變得有點棘手（但只有一點點）。我們首先給多邊形一個填充顏色，一個橙色的筆劃和一個10的筆觸寬度。然后我們將點屬性傳遞給它。每對坐標定義多邊形的每個角點的x和y坐標。在這個演示中，我創造了一個明星。

文本

如前所述，SVG很棒，因為當我們包含文本時，搜索引擎能夠對其進行索引 - 與其他渲染引擎（如Flash）不同。

這是我們添加文字的方式：

在上面的代碼中，您可以看到我們添加了x和y坐標。然后設置一些CSS樣式，如字體系列，重量，大小和顏色。

路徑

在路徑標記內，我們需要專注于'd'屬性。此“d”屬性描述了要創建的路徑。'd'屬性中的每個命令都是以下命令字母之一，后跟其參數。'd'屬性的命令如下：

• M：搬到

• L： lineto

• H：水平線

• V：垂直線

• C： curveto

• S：平滑曲線

• 問：二次貝塞爾曲線

• T：平滑的二次貝塞爾曲線

• 答：橢圓弧

• Z：近路

這是一些示例代碼：

我們甚至可以從上面設置我們的文本以遵循這樣的路徑：

我們基本上在'defs'標簽中定義了路徑，并給它一個id為'path1'。然后，我們可以使用'textPath'屬性將其應用于文本。

創建可擴展的SVG徽標和圖標

杭州網頁設計現在我們已經介紹了使用SVG創建形狀的基礎知識，現在是時候進行一些更復雜的事情了。幸運的是，雖然它并沒有成為那個復雜，其實它實際上是非常簡單的感謝Adobe Illustrator中。對于那些不了解Illustrator的人，可以描述為：

業界首屈一指的矢量繪圖環境，用于創建可跨媒體擴展的圖形。

打開Illustrator并創建徽標或圖標。大多數專業徽標都應該使用矢量創建，這樣您就可以從客戶那里獲得它們。如果沒有，那么您可以嘗試自己重新創建它們。如果您不熟悉在Illustrator中工作，那么Vectortuts +上會提供大量信息

獲得徽標或圖標后，轉到“文件>另存為”，然后從“保存類型”下拉列表中選擇“SVG”。為文件命名，然后單擊“保存”。然后應打開SVG選項對話框。從那里選擇“顯示SVG代碼”。然后，這將在瀏覽器中打開代碼。你只需要在svg標簽之間復制并包含svg標簽就可以了。這有多簡單？

您還可以使用Illustrator創建路徑。只需在Illustrator中繪制一條線，就可以獲取可用于路徑的“d”屬性數據，如前所述。例如，我為上面的'webdesigntuts +'文本創建的路徑是在Illustrator中創建的，然后導出到我的文檔中。

然后，您可以使用標準CSS方法將SVG標記設置或定位到文檔中。您還可以將其包裝在錨標記中以創建鏈接，或使用JavaScript將其定位以添加額外的功能。

結論

杭州網頁設計現在，視網膜和像素密度是我們使用的每個設備和屏幕的一部分只是一個時間問題，并且這將繼續以更大的密度推進。通過使用SVG，我們能夠創建可縮放的圖形，使屏幕清晰，隨著屏幕分辨率的提高，它將為未來做好準備。當然，SVG在各種情況下并不實用，但對于網絡上基于矢量的插圖而言，它絕對是最好的前進方式。