網設必知-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放大縮小影像不失真
[範例預覽]

相關文章

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

Bootstrap滾動頁籤加入hash動態變換網址,更有助於SEO

「W3layouts」上千個免費可商用RWD自適應版型下載

「W3layouts」上千個免費可商用RWD自適應版型下載

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Bootstrap教學-利用Bootstrap網格系統製作出flickr相片牆效果

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

Facebook Message臉書訊息網頁版,暗藏了許多經典的小遊戲

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用

加入微軟聯盟行銷!不但荷包賺飽飽,Office還可免費用





回應本篇 »

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

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

共 4 梅留言

  • 第1梅
    bluefly24 說道:

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

    回覆:
    svg要用embed