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

看板Web_Design作者 (W fish~)時間8年前 (2016/06/05 11:53), 編輯推噓4(403)
留言7則, 4人參與, 最新討論串1/1
以往做網頁都是AI畫好平面圖稿 把圖轉存PNG 一塊塊切版 但最近作了一個大圖視覺得頁面 用到2000px * 1600px的PNG圖檔當作背景 因為考慮裝置縮放,所以把圖的尺寸做超大 但隨著不同螢幕 瀏覽器縮放 發現PNG圖檔還是略有些模糊 於是想嘗試用AI存成SVG格式來切版 但發現SVG檔案都好幾M,比PNG圖檔大好幾倍 網頁載入也比較慢 在來就是... AI做圖如果用到透明度、外光暈、高斯模糊、網屏效果、置入圖片 存成SVG會不知什麼原因導致圖跑版、錯位 造成跟源檔AI看到的視覺不一樣 所以想問大大 這是什麼問題造成的呢? SVG適合用在什麼地方呢? 如果大圖背景為了不讓他失真會建議用SVG代替嗎? 對了我背景是用 background-size:cover這個屬性來撐滿全螢幕 -- ※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 118.165.195.32 ※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1465098784.A.487.html

06/06 23:08, , 1F
你可以手寫 svg 看看,再和 ai 的輸出比較。
06/06 23:08, 1F

06/06 23:09, , 2F
www.oxxostudio.tw/articles/201410/svg-tutorial.html
06/06 23:09, 2F

06/08 13:46, , 3F
因為svg特性 特效最好用程式碼刻
06/08 13:46, 3F

06/08 13:47, , 4F
Svg是使用數學計算繪圖 適合線條少的圖案
06/08 13:47, 4F

06/08 17:41, , 5F
png模糊的話,裝置上要讀取2倍大的圖才對
06/08 17:41, 5F

06/25 11:18, , 6F
你就最大做2000X1600就好了呀
06/25 11:18, 6F

06/25 11:19, , 7F
pc解析度寬度1920夠大了吧...只要考慮以下就好..
06/25 11:19, 7F
文章代碼(AID): #1NKw8WI7 (Web_Design)