網站首頁 教育 學前教育 精緻生活 飲食養生 命理 科普教育 金融 歷史 影視 數碼 熱門資訊
當前位置:生活百科站 > 數碼 > 

Illustrator製作SVG的操作流程

欄目: 數碼 / 釋出於: / 人氣:2.07W

為什麼是這個版本呢,原因有以下幾點:一是illustrator2019執行穩定,無需登陸即可使用全部功能。二是此版本為綠色版本,精簡了無用的元件,下載解壓即可使用,省去使用者註冊的麻煩。三是軟體只有275m大小,方便攜帶,可以滿足大部分使用者的設計要求,歡迎免費下載收藏。

在這篇文章中,我們將講解如何設定和使用Adobe Illustrator來快速高效的壓縮優化SVG影象。

設定配置引數和畫板

Illustrator製作SVG的操作流程

第一部是要為你的工作選擇正確的配置引數。大多數時候,我們都使用畫素為單位,尤其是你想將點陣圖合成到SVG向量圖中的時候。

如果是為了製作列印內容或某種現實生活中的需要精準尺寸的東西,你可能需要英寸、釐米或毫米為單位。在Illustrator的單位引數配置面板中設定你需要的尺寸單位。

如果你要製作響應式的SVG影象,最終的影象尺寸並不重要,重要的是你要知道你為畫布選擇什麼尺寸,那裡將成為預設的SVG檢視區。如果你的SVG畫板設定的太大,在顯示影象的時候將會留出很大的空白區域。

Illustrator製作SVG的操作流程 第2張

如果留出的空白區域太大也有解決的方法,這裡在文章的最後給出解決的方法。

SVG影象通常是用於螢幕顯示的,還有CSS不支援CMYK模式,所以在選擇顏色模式時要選擇RGB模式。由於我們是使用XML來處理元素,所以識別物件的ID也是有意義的。

使用命名規範

記住:你在製作SVG的時候不僅僅是在製作影象,而且還是在建立資料。如果你想在以後通過CSS或javascript來操作這些資料的話,你需要某種方法來標識好你建立的資料。異常,給每一個相關的物件取一個名字是非常重要的。名稱要小寫,沒有任何的空白符,這個名稱在匯出SVG檔案的時候將成為元素的ID。如果你現在不為物件取名字,你也可以在後面來做這個動作,但是在編輯影象的時候取好名稱是最好最不容易出錯的方法。

簡化

最為一個規則,我們應該使用最少的點來建立向量影象,這將產生最佳的向量圖。可以使用 Smooth 或 Simplify 工具(物件/路徑/簡化)來減少向量圖的點數。

應該避免使用 filters,Adobe Illustrator 目前還沒有能很好的將它們轉換為SVG。同樣的blending(混合)模式也沒有被很好的支援。在後期你可以通過CSS來為SVG新增blend(混合)模式和 filters,

非不得已不要為元素或文字使用描邊效果。一個描邊效果(即使是合併背景)會繪製兩次,因為它有兩條邊。如果你這麼做了,也有補救的方法。(往下看:合併影象)

儘量保持多邊形和圓形為幾何物件,不要將他們轉換為路徑。一個多邊形佔用較少的檔案空間,使渲染速度加快。

建立背景影象

SVG繪製的都是透明影象,它們沒有一個body元素可以讓你來填充顏色。如果你想在SVG檔案中建立一個背景影象,你可以有三個選擇:

如果SVG影象是被用來作為頁面中的一張圖片,你可以在CSS中為它提供一個background-color。

畫一個和畫板一樣大小的矩形,為它填充一個顏色。然後把這一層放置到Illustrator文件的最底層,用它來作為背景層。

如果實在HTML頁面直接使用SVG程式碼,你可以給<svg>根元素新增樣式。例如下面的程式碼:

合併影象

Illustrator製作SVG的操作流程 第3張

將影象合併到一個單一的圖形同是一種非常好的做法。選擇你需要合併的影象,然後在選單中選擇:物件/擴充套件...,引數勾選填充和描邊。在影象仍然被選擇的時候,開啟路徑選擇器,選擇“聯集”。該操作會將旋轉的影象合併為一個單一的影象,並且沒有描邊。

文字處理

如果你需要文字是可搜尋、定製和編輯的,那麼你就需要在網頁中書寫文字,然後通過CSS來渲染它們。

如果你需要的是可修改外形的文字,例如logo文字,你可以將你的文字修改為輪廓,(文字/建立輪廓),將文字轉換為純向量圖形。你也可以在匯出SVG檔案的時候選擇文字轉換選項。

剪裁畫板

如果你發現你的畫板尺寸不正確,你需要裁減掉多餘的空白部分來減少SVG檔案的大小。Illustrator很容易做到這一點:

1、選擇所有你需要保留在SVG檔案中的元素。

2、選擇 物件/畫板/適合圖稿邊界 ,即可完成畫板的處理。

另外,你還可以通過畫板工具來調整畫板尺寸。

以上就是Illustrator製作SVG的操作流程的詳細內容,更多關於illustrator軟體下載的資料請關注百科書網其它相關文章!