[問題] SVG檔做網頁的問題 aaron7962 PTT批踢踢實業坊

[問題] SVG檔做網頁的問題

作者: aaron7962 (W fish~) 2016-06-05 11:53:02

以往做網頁都是AI畫好平面圖稿
把圖轉存PNG 一塊塊切版
但最近作了一個大圖視覺得頁面用到2000px * 1600px的PNG圖檔當作背景
因為考慮裝置縮放,所以把圖的尺寸做超大
但隨著不同螢幕瀏覽器縮放發現PNG圖檔還是略有些模糊
於是想嘗試用AI存成SVG格式來切版
但發現SVG檔案都好幾M,比PNG圖檔大好幾倍
網頁載入也比較慢
在來就是... AI做圖如果用到透明度、外光暈、高斯模糊、網屏效果、置入圖片
存成SVG會不知什麼原因導致圖跑版、錯位
造成跟源檔AI看到的視覺不一樣
所以想問大大這是什麼問題造成的呢?
SVG適合用在什麼地方呢? 如果大圖背景為了不讓他失真會建議用SVG代替嗎?
對了我背景是用 background-size：cover這個屬性來撐滿全螢幕

作者: hijkxyzuw (i,j,k) ×(x,y,z) 2016-06-06 23:08:00

你可以手寫 svg 看看，再和 ai 的輸出比較。www.oxxostudio.tw/articles/201410/svg-tutorial.html

作者: femlro (母豬教謀神異端審問官1.5) 2016-06-08 13:46:00

因為svg特性特效最好用程式碼刻Svg是使用數學計算繪圖適合線條少的圖案

作者: eaeao (eaeao) 2016-06-08 17:41:00

png模糊的話，裝置上要讀取2倍大的圖才對

作者: heavenbetula (綠草) 2016-06-25 11:18:00

你就最大做2000X1600就好了呀pc解析度寬度1920夠大了吧...只要考慮以下就好..

繼續閱讀

[問題] wordpress上傳限制修改問題arcing [問題] 提供一個idea : 這個要怎麼做? (ptt相關)pizzafan [問題] 關於付費的模板?gamesame7711 [問題] 所謂wordpress被駭客入侵的情況dudeboy [請益] 請教網站企劃的工作內容l66289 Re: [問題] Wix所架出來的站名是否可以更改demolish [問題] 滾到指定的地方才跑eventfifi82726 [問題] PHP SESSION ARRAY要如傳陣列索引值出去?HAmakers [請益] 請教購物網站.引導頁.後臺資料管理gogigi9 [問題] 請問wix選定templates之後是不是不能修改slightwing