Illustrator制作SVG的操作流程
為什么是這個(gè)版本呢,原因有以下幾點(diǎn):一是illustrator2019運(yùn)行穩(wěn)定,無需登陸即可使用全部功能。二是此版本為綠色版本,精簡了無用的組件,下載解壓即可使用,省去用戶注冊的麻煩。三是軟件只有275m大小,方便攜帶,可以滿足大部分用戶的設(shè)計(jì)要求,歡迎免費(fèi)下載收藏。

Adobe Illustrator 2019(Ai cc2019) v23.1.0.670 綠色中文版 64位
- 類型:圖像處理
- 大?。?/span>275MB
- 語言:簡體中文
- 時(shí)間:2019-11-04
在這篇文章中,我們將講解如何設(shè)置和使用Adobe Illustrator來快速高效的壓縮優(yōu)化SVG圖像。
設(shè)置配置參數(shù)和畫板

第一部是要為你的工作選擇正確的配置參數(shù)。大多數(shù)時(shí)候,我們都使用像素為單位,尤其是你想將位圖合成到SVG矢量圖中的時(shí)候。
如果是為了制作打印內(nèi)容或某種現(xiàn)實(shí)生活中的需要精準(zhǔn)尺寸的東西,你可能需要英寸、厘米或毫米為單位。在Illustrator的單位參數(shù)配置面板中設(shè)置你需要的尺寸單位。
如果你要制作響應(yīng)式的SVG圖像,最終的圖像尺寸并不重要,重要的是你要知道你為畫布選擇什么尺寸,那里將成為默認(rèn)的SVG視圖區(qū)。如果你的SVG畫板設(shè)置的太大,在顯示圖像的時(shí)候?qū)?huì)留出很大的空白區(qū)域。

如果留出的空白區(qū)域太大也有解決的方法,這里在文章的最后給出解決的方法。
SVG圖像通常是用于屏幕顯示的,還有CSS不支持CMYK模式,所以在選擇顏色模式時(shí)要選擇RGB模式。由于我們是使用XML來處理元素,所以識(shí)別對象的ID也是有意義的。
使用命名規(guī)范
記?。耗阍谥谱鱏VG的時(shí)候不僅僅是在制作圖像,而且還是在創(chuàng)建數(shù)據(jù)。如果你想在以后通過CSS或javascript來操作這些數(shù)據(jù)的話,你需要某種方法來標(biāo)識(shí)好你創(chuàng)建的數(shù)據(jù)。異常,給每一個(gè)相關(guān)的對象取一個(gè)名字是非常重要的。名稱要小寫,沒有任何的空白符,這個(gè)名稱在導(dǎo)出SVG文件的時(shí)候?qū)⒊蔀樵氐腎D。如果你現(xiàn)在不為對象取名字,你也可以在后面來做這個(gè)動(dòng)作,但是在編輯圖像的時(shí)候取好名稱是最好最不容易出錯(cuò)的方法。
簡化
最為一個(gè)規(guī)則,我們應(yīng)該使用最少的點(diǎn)來創(chuàng)建矢量圖像,這將產(chǎn)生最佳的矢量圖??梢允褂?Smooth 或 Simplify 工具(對象/路徑/簡化)來減少矢量圖的點(diǎn)數(shù)。
應(yīng)該避免使用 filters,Adobe Illustrator 目前還沒有能很好的將它們轉(zhuǎn)換為SVG。同樣的blending(混合)模式也沒有被很好的支持。在后期你可以通過CSS來為SVG添加blend(混合)模式和 filters,
非不得已不要為元素或文本使用描邊效果。一個(gè)描邊效果(即使是合并背景)會(huì)繪制兩次,因?yàn)樗袃蓷l邊。如果你這么做了,也有補(bǔ)救的方法。(往下看:合并圖像)
盡量保持多邊形和圓形為幾何對象,不要將他們轉(zhuǎn)換為路徑。一個(gè)多邊形占用較少的文件空間,使渲染速度加快。
創(chuàng)建背景圖像
SVG繪制的都是透明圖像,它們沒有一個(gè)body元素可以讓你來填充顏色。如果你想在SVG文件中創(chuàng)建一個(gè)背景圖像,你可以有三個(gè)選擇:
如果SVG圖像是被用來作為頁面中的一張圖片,你可以在CSS中為它提供一個(gè)background-color。
畫一個(gè)和畫板一樣大小的矩形,為它填充一個(gè)顏色。然后把這一層放置到Illustrator文檔的最底層,用它來作為背景層。
如果實(shí)在HTML頁面直接使用SVG代碼,你可以給<svg>根元素添加樣式。例如下面的代碼:
合并圖像

將圖像合并到一個(gè)單一的圖形同是一種非常好的做法。選擇你需要合并的圖像,然后在菜單中選擇:對象/擴(kuò)展...,參數(shù)勾選填充和描邊。在圖像仍然被選擇的時(shí)候,打開路徑選擇器,選擇“聯(lián)集”。該操作會(huì)將旋轉(zhuǎn)的圖像合并為一個(gè)單一的圖像,并且沒有描邊。
文本處理
如果你需要文本是可搜索、定制和編輯的,那么你就需要在網(wǎng)頁中書寫文字,然后通過CSS來渲染它們。
如果你需要的是可修改外形的文本,例如logo文字,你可以將你的文字修改為輪廓,(文字/創(chuàng)建輪廓),將文字轉(zhuǎn)換為純矢量圖形。你也可以在導(dǎo)出SVG文件的時(shí)候選擇文本轉(zhuǎn)換選項(xiàng)。
剪裁畫板
如果你發(fā)現(xiàn)你的畫板尺寸不正確,你需要裁減掉多余的空白部分來減少SVG文件的大小。Illustrator很容易做到這一點(diǎn):
1、選擇所有你需要保留在SVG文件中的元素。
2、選擇 對象/畫板/適合圖稿邊界 ,即可完成畫板的處理。
另外,你還可以通過畫板工具來調(diào)整畫板尺寸。
以上就是Illustrator制作SVG的操作流程的詳細(xì)內(nèi)容,更多關(guān)于illustrator軟件下載的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章

Illustrator怎樣讓圖形沿著路徑復(fù)制?ai如何讓圖形圍繞路徑復(fù)制
這篇文章主要介紹了Illustrator怎樣讓圖形沿著路徑復(fù)制?ai如何讓圖形圍繞路徑復(fù)制的相關(guān)資料,需要的朋友可以參考下,借助這款行業(yè)標(biāo)準(zhǔn)的矢量圖形軟件,您可以制作適用于印刷2021-12-20
ai高光怎么做?Illustrator拱形紫色高光效果制作教程
我們在使用Ai軟件進(jìn)行平面效果制作的時(shí)候,為了圖案元素質(zhì)感,有時(shí)需要給圖案添加效果,本文主要為大家?guī)淼氖茿i拱形紫色高光效果制作教程,需要的朋友可以參考下2019-10-16
Illustrator繪制2.5D風(fēng)格守望先鋒游戲場景插畫
這篇文章主要為大家介紹了使用Illustrator繪制2.5D風(fēng)格守望先鋒游戲場景插畫的方法過程,教程一步步講解的很詳細(xì),打造的守望先鋒2.5D插畫效果非常精致漂亮,感興趣的朋友2018-07-27
這篇教程將給大家分享使用ILLUSTRATOR繪制神奇寶貝小磁怪的方法,教程難度一般,打造的小磁怪效果非常形象,喜歡的朋友歡迎前來一起分享學(xué)習(xí)2018-07-16
這篇教程將教腳本之家的各位Illustrator教程學(xué)習(xí)者如何使用ILLUSTRATOR繪制葉子LOGO?教程簡單粗暴,只要幾步即可完成葉子logo的設(shè)計(jì),非常適合新手入門學(xué)習(xí)2018-07-16
Illustrator制作創(chuàng)意十足的階梯效果立體字
這篇文章將教腳本之家的Illustrator教程學(xué)習(xí)者使用Illustrator制作階梯效果的英文立體字,教程打造的文字效果創(chuàng)意十足,是我們還沒有學(xué)習(xí)過的階梯效果,感興趣的朋友歡迎前2018-06-21
Illustrator繪制一個(gè)漂亮的iPhone x叮當(dāng)貓手機(jī)殼教程
本教程將教腳本之家的Illustrator教程學(xué)習(xí)者們使用Illustrator繪制一個(gè)非常漂亮的iPhone x叮當(dāng)貓手機(jī)殼,教程一步步講解的非常詳細(xì),繪制的手機(jī)殼效果逼真又好看,感興趣的2018-06-19
ai如何裁剪圖片 illustrator里把圖像裁剪為任意形狀的技巧
最近,有很多網(wǎng)友問小編ai如何裁剪圖片?今天小編就給大家分享一個(gè)在illustrator里把圖像裁剪為任意形狀的技巧,當(dāng)然這里所說的圖片或者圖像都是位圖哦,好了,話不多說,2018-06-19
Illustrator繪制2.5D風(fēng)格精致小房子插畫
本教程教腳本之家的Illustrator教程學(xué)習(xí)者如何使用Illustrator繪制2.5D風(fēng)格精致小房子插畫?教程繪制出的小房子非常精致,現(xiàn)在這種2.5等距風(fēng)格非常的流行,推薦給腳本之家2018-06-01
有一種字體叫樂高體,是用樂高積木拼的中文或英文字體,這篇教程就教大家如何使用Illustrator制作樂高積木拼的像素字體,效果非常漂亮,感興趣的朋友不妨跟著教程制作一個(gè)2018-05-14











