2012-11-05 72 views
121

我正在爲網站使用SVG徽標 - 使其在所有設備的響應式設計中看起來都很棒。從Illustrator中爲Web導出SVG的最佳設置?

但是因爲there are issues,我想支持儘可能多的設備和瀏覽器。加載速度也是一個重要的考慮因素。 Adobe Illustrator中的導出設置如何適用於所有這些?

在Illustrator中,SVG導出有幾個選項。首先,哪個SVG配置文件最好?

enter image description here

我認爲SVG微型具有較低的文件的大小?很多設備是否支持SVG Tiny?什麼是最重要的區別? (無需閱讀this W3 monster。)

其次,我認爲圖像位置的最佳選擇是「鏈接」? (見感嘆號後說明)。

enter image description here

另外,怎麼是「嵌入」選項的瀏覽器支持?

enter image description here

謝謝!

P.S.將會有一個後備Alpha-PNG選項,但我希望儘可能支持SVG到 。 (來想想吧,一個後備 選項 - 如JPG - 很可能是最好的在這種情況下擔任因爲字母PNG本身需要爲老年人IE的解決方案。)

更新:有還有更多可以配置的選項。我沒有使用文本,所以我看到的唯一相關的是小數位。對於徽標,顯示最大200x200px(因此Retina顯示屏上爲400x400px)的內容是「3」最佳設置?或「2」以最小化文件大小?

enter image description here

+4

這個問題和答案都非常好 - 支持Baumr和Duopixel。 – aendrew

+0

@aendrew,謝謝! – Baumr

+1

非常有用的指導:http://creativedroplets.com/export-svg-for-the-web-with-illustrator-cc/ –

回答

206

SVG型材

  • SVG 1.0:所有的現代桌面和移動瀏覽器支持SVG 1.1,所以不要選擇這個選項。
  • SVG 1.1:你幾乎總是會想要這個。
  • SVG Tiny/Basic:這是用於移動設備的SVG的一個子集。只有少數設備支持SVG Tiny,而不是完整的規範,因此請使用SVG 1.1。

注:SVG Tiny不會減小文件大小,它只是SVG的一個子集,足以適用於低處理能力的設備。它會放棄漸變,不透明度,嵌入字體和過濾器。 ErikDahlström表示:所有SVG 1.1全面觀衆應該能夠顯示所有SVG 1.1 Tiny/Basic內容(根據規格),以及Illustrator生產的所有SVG 1.2 Tiny內容。

字體注意:如果您的圖片中沒有任何文字,則此設置無關緊要。

  • Adob​​e CEF:從不使用此選項,您打算在瀏覽器中顯示它。據我瞭解,這只是Adobe的SVG查看器插件所支持的,它是Adobe將字體嵌入SVG文件的方式。

  • SVG:將字體嵌入SVG,但不支持Firefox,但如果您打算僅支持移動設備(通常運行webkit),那麼這是一個不錯的選擇。

  • 創建輪廓:除非您有大量的文本,否則大多數時候您都會想要這樣做。如果你有大量的文本,你會想要嵌入字體與WOFF,但你將不得不手動這樣做。

子集

  • 無:這將否定以前的設定,不會嵌入任何字體,如果你不在乎,字體回落到在一些其他字體用戶的電腦選擇這個。

  • 只有使用的字形:如果您選擇嵌入字體,大多數情況下都會需要這個字體。它只嵌入使用的字符,所以不會誇大文件大小。

  • [其餘子集]:這很清楚,你可以選擇包含整個字體或其子集。只有當SVG是動態的,並且文本可能會根據用戶輸入而改變時纔有用。

圖片:此的事項,如果要包括位圖圖像

  • 嵌入:這通常是你想要什麼,它的圖像編碼爲數據的URI,這樣你只上傳一個文件,而不是svg文件與它的伴侶位圖圖像。

  • 鏈接:只有當您有幾個引用一個位圖文件的svg文件時才使用它(所以每次渲染svg文件時都不會下載它)。如果通過<img>標籤顯示的SVG

注意,鏈接位圖圖像無法顯示,因爲img不允許加載外部資源。此外:webkit有一個錯誤,即使您嵌入它們,也不會在svg文件中顯示位圖圖像。簡而言之:如果您打算嵌入或鏈接位圖圖像,請使用普通<svg>標記,請勿使用<img>

保留Illustrator編輯功能

我寧願保存。愛文件作爲我的源圖像,並認爲SVG文件作爲Export for web功能。這樣你就可以專注於縮小文件大小,並且擁有所有編輯功能的矢量文件的原始副本。所以不要選擇這個。

小數位數

默認3是一個健全的設置,可大多是忘掉它。

但是,如果你有一個非常複雜的路徑,許多點將此設置降低到1或甚至0會大大減小文件大小。但是你必須小心,因爲貝塞爾細分對這個設置非常敏感,並且它們可能看起來有點扭曲。所以如果你降低這個設置,一定要確保它在瀏覽器中看起來可以接受。

編碼

後面的字符編碼的解釋是相當的技術,並且只關注文本的SVG文件。 你需要的最可能的編碼是UTF-8,除非你知道你在做什麼,否則不要改變它。

優化爲Adobe SVG瀏覽器

的Adobe SVG瀏覽器是時候,瀏覽器不支持SVG原生瀏覽器插件。我不知道它是幹什麼的,但它是無關緊要的,不檢查這個

包括切片數據

這增加了元數據膨脹到您的SVG文件,除非你打算在Illustrator後打開您的SVG文件並找到您的切片(如果有的話),不檢查這個

包括有關文件,可以read on XMP here XMP

更多的元數據。 不選中此

輸出較少的<tspan>元素

這將顯示爲灰色,如果你沒有文字。 SVG不支持字距表,因此,某些字符序列看起來間隔太多,即AVA。 Illustrator通過添加tspan元素和調整字符位置來解決問題。這增加了一點膨脹到文件不檢查這一點,除非你更關心文件大小比文本出現更多。

使用路徑

這對<textpath>元素的文字會顯示爲灰色,如果你沒有一個路徑上的文本。在將文本放在路徑上時,瀏覽器往往會有很大差異,所以Illustrator會嘗試通過將旋轉和位置應用於角色而不是將作業留給瀏覽器來幫助。 不檢查此內容,除非您關心的文件大小多於文本外觀


一般情況下,我建議你尋找到SVG在一般情況下,你會發現,它看起來很像HTML,它允許您調整的事情,不能在Illustrator中完成。

+0

**謝謝!**詳細的回覆!我認爲SVG Tiny的文件較小?當你說,「只有少數設備支持SVG Tiny而不是完整規範」,你的意思是說,沒有多少設備支持SVG Tiny?**我想我真正想問什麼**最重要的區別是什麼?**(不必閱讀[這個W3怪物](http://www.w3.org/TR/SVGMobile/)。)再次感謝! **更新:**如果您有興趣,我在原始問題中增加了一個關於小數位**的額外**部分。我在文本編輯器中打開了SVG - 任何需要了解的內容**要取出哪個XML ** – Baumr

+3

SVG Tiny不會減小文件大小,它只是SVG的一個子集,足以適用於低處理能力的設備。它會放棄漸變,不透明度,嵌入字體和過濾器。我不確定每個支持SVG的瀏覽器是否也支持SVG Tiny,但我認爲這是事實。我建議你只是忘記SVG Tiny,因爲你只能獲得老黑莓手機的覆蓋範圍。我還更新了答案,以涵蓋有關小數位的問題。 – Duopixel

+0

再次感謝。不要說「你只能獲得老黑莓手機的覆蓋範圍」 - 這讓我想看看它,不管它有多麼過時:P – Baumr