600+ HTML5 響應式模板免費下載 
目前位置: 首頁 > HTML5、CSS3、其他 > 使用 SVG 讓網頁圖片縮放不失真

使用 SVG 讓網頁圖片縮放不失真 超大 稍大 正常

發表於: 2016-10-24 最後更新: 現在時間:2022-06-29 23:49:47
很多時候在桌上型電腦或手機檢視的圖片明顯模糊,由於手機載入速度比PC慢很多,通常遇到大圖就會拖垮網頁開啟速度,然而一個網頁內通常有很多小 ICON,若要保持其清晰度,有的網站會製作多種尺寸的圖片,但這對以後的管理維護無疑是個麻煩,一般點陣圖只能縮小無法放大,一放大就變得模糊,因此建議使用向量格式的SVG圖片來改善這個情況...

SVG圖片並非一張圖片,而是一個向量圖片描述檔,因此不論圖片如何縮放依然能夠保持其清晰度,因為使用文字描述圖片的色彩位置等資訊,比較適合使用向量圖直接輸出或色彩比較單純的點陣圖,至於色彩豐富或含有漸層的圖片轉成SVG後反而爆肥多,至於如何使用SVG來作為網頁圖片,請看以下圖文教學:

1、建立SVG檔案

SVG為向量格式的圖檔,因此必須使用像 Illustrator 之類的向量繪圖軟體,我記得 CorolDraw 好像也是...
1-1、開啟 Illustrator 後可以輸出已經繪製好的向量圖,建議使用此種方式檔案比較小
使用 SVG 讓網頁圖片縮放不失真

1-2、也可以使用現有圖片來轉為SVG,方法如下:
A、載入要轉換的圖片,格式沒有限制,如果尺寸太大記得先縮小一點:
使用 SVG 讓網頁圖片縮放不失真

B、點擊「物件」「影像描圖」「製作」
使用 SVG 讓網頁圖片縮放不失真

C、選擇預設集:「高保真度相片」
使用 SVG 讓網頁圖片縮放不失真

D、點擊「展開」按鈕
使用 SVG 讓網頁圖片縮放不失真

E、在輸出SVG之前,先對圖片節點進行修飾編輯,更改顏色等...以免輸出SVG後檔案過大
使用 SVG 讓網頁圖片縮放不失真


1-3、不管使用哪種方式,現在請點擊「檔案」「另存新檔」或快速鍵「Shift + Ctrl S」
使用 SVG 讓網頁圖片縮放不失真

1-4、在「另存新檔」的對話框中輸入檔名,類型選擇「SVG」,然後按「儲存」
使用 SVG 讓網頁圖片縮放不失真

1-5、SVG選項視窗的SVG描述檔選擇「SVG1.1」,然後按「確定」
使用 SVG 讓網頁圖片縮放不失真

2、使用SVG圖片:

1、當作容器的背景,直接設定CSS即可,如:
使用 SVG 讓網頁圖片縮放不失真
使用 SVG 讓網頁圖片縮放不失真

2、作為一般圖片顯示,如:
圖片不指定寬度時,則使用SVG描述當內的尺寸(原始大小)
使用 SVG 讓網頁圖片縮放不失真
使用 SVG 讓網頁圖片縮放不失真
對於本站文章有任何問題或建議歡迎到 : 討論區寫信給我
本站提供ECSHOP技術支援, 是網路開店最佳選擇 ,最後更新時間: 現在時間:2022-06-29 23:49:47