網設必知-Illustrator轉存網頁SVG向量檔,圖像放大縮小不失真

梅問題-網設必知-Illustrator轉存成網頁向量檔SVG放大縮小影像不失真
  在網頁中常用的影像格式不是gif就是jpg或png檔,而無論那一種格式都是點陣影像,因此若一個網站中,有多個影像尺寸時,就得儲存多個影像尺寸,但最近網頁出現一個新寵兒就是SVG檔,而什麼是SVG檔呢?簡單的來說就是向量檔,而該格式是由W3C所制定的開放性的網路標準之一,且SVG並不是一個圖像檔,而是用XML的方式來標記圖像,因此無論怎麼縮放,都不用怕影像會失真,但怎麼產生SVG檔呢?其實方法很簡單,只要需利用Illustrator繪製好向量檔,就可另存成SVG檔,至於怎麼用呢?現在就一塊來看看吧!!

ai轉SVG:
適用版本:Adobe Illustrator CS3+

Step1
當繪製好向量檔後,選擇 檔案/另存新檔
梅問題-網設必知-Illustrator轉存成網頁向量檔SVG放大縮小影像不失真
Step2
接著檔案格式選擇SVG
梅問題-網設必知-Illustrator轉存成網頁向量檔SVG放大縮小影像不失真
Step3
描述檔的部分,選擇SVG1.1
梅問題-網設必知-Illustrator轉存成網頁向量檔SVG放大縮小影像不失真
Step4
當儲存完畢後,可看到影像縮圖,接著按滑鼠右鍵,選擇文字編輯器,將它開啟。
梅問題-網設必知-Illustrator轉存成網頁向量檔SVG放大縮小影像不失真
Step5
可看到裡面一堆密密碼碼的數字,這些數字就是記錄圖檔的座標與位置。
梅問題-網設必知-Illustrator轉存成網頁向量檔SVG放大縮小影像不失真
Step6
接下來立馬來實用看看,分別設定影像的尺寸大小。
梅問題-網設必知-Illustrator轉存成網頁向量檔SVG放大縮小影像不失真
Step7
傑克~真是太神了,無論怎麼變更尺寸大小,影像都不失真。
梅問題-網設必知-Illustrator轉存成網頁向量檔SVG放大縮小影像不失真
[範例預覽]

相關文章

「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線稿圖示簡潔又具設計感

「100+ ET-Line Icons」用膩了扁平圖示嗎?改用線稿圖示簡潔又具設計感

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

「CSS3:target選擇器」免程式!純CSS就可實現Tab頁籤式的互動切換

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

Bootstrap教學-「Bootstrap Navbar導覽列強化!」支援多層級下拉選單

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

jQeury外掛「imagesLoaded」解決瀑布流圖片未載入完造成區塊覆蓋問題

Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流排版

Bootstrap教學-「Bootstrap+Masonry」讓網格系統也支援瀑布流排版





回應本篇 »

(姓名)*必填
(信箱)*必填
(網站)

※PS: 因梅干時間有限,教學網中所分享的主題繁多(所遇狀況也很多),可能無法一一回答各位,不便之處還請見諒。
※PS: 本教學網不提供「破解檔」、「註冊機」或「註冊碼」等資訊,請勿利用留言索取檔案。

共 4 梅留言

  • 第1梅
    bluefly24 說道:

    想請問一下SVG轉出後,使用嵌入卻無法顯示!
    只有跟可以正常顯示,
    但這兩者無法讓圖加上Link變成Button >"<
    可以請問一下梅干有遇過這樣的情況嗎?

    回覆:
    svg要用embed

近期講座

2017 (二月講座)

更多講座