:::

如何將SVG向量圖插入到Google文件中? / How to insert SVG vector images into Google Doc?

image

繼前一篇我們介紹了如何將SVG向量圖插入到桌面版辦公室工具軟體Office Word中之後,接下來我們換來挑戰現在最知名的辦公室工具軟體:Google文件(包含Google文件、Google試算表與Google簡報)。整體做法前半部跟前一篇很像,也是將SVG轉換成EMF格式,但後半部則是要藉助Google Drawings的功能才能EMF插入Google文件中。這篇的做法來自於Hacker's ramblings,但其實網路上相關教學早已多不勝數,不過中文的教學卻還是十分欠缺。所以特別整理成這一篇供大家參考。


Step 1. 取得SVG圖片 / Prepare a SVG image

cat, black png icon[3]

(圖片來源:Icon Ninja)

這次的圖片使用的是跟上次一樣的黑貓,圖片來自於Icon Ninja的黑貓圖。本張黑貓圖算是向量圖片的代表,主要是由線條和圖形色塊所組成,而且結構複雜,作為測試轉檔呈現的測試案例來說相當合適。

image

讓我們把這張圖片上傳到Google Drive (Google雲端硬碟),然後進行下一步吧。


Step 2. 使用CloudCovert將SVG轉換成EMF格式 / Convert SVG to EMF format via CloudConvert

前一篇我們使用的是Inkscape來將SVG轉換成EMF,這次我們使用的是雲端轉檔服務CloudConvert。CloudConvert能夠跟Google Drive整合,在Google Drive直接開啟需要轉檔的檔案、轉檔、存回Google Drive,非常方便。必須注意的是,方便的代價會讓你的SVG傳送到CloudConvert的伺服器,如果很注重隱私的話,我還是建議你在本機端自己用Inkscape將SVG轉換成EMF比較好。

接下來讓我們來看看怎麼操作CloudConvert吧。

2-1. 初次使用CloudCovert:連接、註冊與轉換 / CloudConvert Beginner: Connect APP, register and conversion

如果你從來沒在Google Drive使用過CloudConvert,那我們需要先進行連接應用程式與註冊的操作。

image

首先,在剛剛上傳的SVG檔案上按滑鼠右鍵,進入「選擇開啟工具」,然後選擇「連結更多應用程式」。

image

在「將應用程式連接到雲端硬碟」視窗中的搜尋框輸入「cloudconvert」並按下Enter,下面搜尋結果就會會出現CloudConnect,然後按下「連結」。

image

將CloudConvert作為開啟該檔案類型的應用程式的設定取消打勾,然後按下「確定」。

image

然後在對SVG檔案按右鍵進入「選擇開啟工具」時,應用程式選單就會出現「CloudConvert」。點選「CloudConvert」進入下一步註冊吧。

image

CloudConvert會要求Google帳戶的相關權限,請選擇要登入的帳戶,也就是現在使用這個Google Drive的帳戶。

image

接下來會敘述CloudConvert要求的權限,沒特別問題的話請按下「允許」。

image

然後跳到CloudConvert的註冊畫面,我們需要設定一個使用者名字,只能接受英文、數字、橫線「-」跟底線「_」。我們還需要打勾接受使用者條款與隱私政策,然後按下右下角的「Register」註冊。

image

註冊成功後會跳到CloudConvert的轉換列表畫面。這邊可以看到黑貓SVG圖已經在列表中,我們需要在此將它設定為轉換成EMF。點選後面的下拉選單,選擇「vector (向量)」中的「emf」。

image

確認目標格式是「emf」之後,按下右下角的「Start Conversion」開始轉換。

image

CloudConvert很快就把SVG轉換成EMF,並且存回到Google Drive了。讓我們回到Google Drive看看。

image

黑貓SVG圖的EMF格式已經出現在Google Drive囉。

2-2. 再次使用CloudConvert轉換 / Conversion SVG to EMF with CloudConvert normally

image

如果你已經經過上述操作註冊並在CloudConvert轉換的話,那下次再用CloudConvert開啟SVG檔案的時候,就會直接進入CloudConvert的操作畫面。我們只要選擇轉檔目標格式為vector > emf,按下「Start Conversion」,這樣就能直接將SVG轉換成EMF囉。

好,經過上述的步驟後,我們就在Google Drive中保存了EMF向量圖檔案,接下來我們就要將這個EMF向量圖檔案用於Google文件之中囉。


Step 3. 用Google繪圖開啟EMF檔案 / Open EMF with Google Drawings

image

在EMF格式檔案上按右鍵,進入「選擇開啟工具」,然後選擇「Google繪圖」(Google Drawings)。

2018-05-27_191458

好的,我們已經在Google繪圖中開啟了EMF向量圖檔案。

image

讓我們把畫面放大看看,黑貓的眼神依然犀利,這果然是向量圖。

不過我們的任務還沒結束,接下來我們還要把它插入到Google文件中,讓我們來看看怎麼操作吧。


Step 4. 插入到Google文件中 / Insert the vector image into Google Doc

將Google繪圖插入到Google文件、Google試算表跟Google簡報的方法各不相同。一開始都是要先在Google繪圖中複製整張圖片,然後我再來介紹如何插入到Google簡報、Google文件跟Google試算表。

4-1. 複製向量圖 / Copy vector image in Google Drawings

image

首先,我們在Google繪圖中用「Ctrl + A」選取整張圖片。你也可以在編輯選單中按下「全選」來選取。

2018-05-27_191524

待整張圖片有藍色的選取狀態時,按下「Ctrl + C」複製圖片。

然後我們就要將複製的內容用於其他Google文件中囉。

4-2. 插入到Google簡報 / For Google Slides

image

開啟一個Google簡報來看看。

image

直接按下Ctrl + V貼上的快速鍵,黑貓向量圖就已經出現在Google簡報中。

image

放大來看,絲毫沒有模糊,這的確是向量圖。

有興趣的人可以看看下面的共享連結成果:

4-3. 插入到Google文件(Google試算表) / For Google Docs (and Google Sheets)

接下來我們來看看怎麼將向量圖插入到Google文件中。因為向量圖不能直接貼在這兩種編輯器中,這邊的步驟必須要藉助插入中的繪圖功能。這個做法同樣適用於Google試算表,因此我只用Google文件來說明。

image

首先準備一個Google文件。

image

進入選單中的「插入 > 繪圖」。

2018-05-27_191813

接下來會開啟一個繪圖視窗,這時候我們按下貼上的快速鍵Ctrl + V。

image

黑貓向量圖已經出現在繪圖的畫布中。讓我們按下「儲存並關閉」來關閉繪圖視窗。

2018-05-27_191833

Google文件中已經出現黑貓圖。有興趣的人可以看看下面的共享連結成果:

2018-05-27_192006

不過放大來看的時候,會發現黑貓其實只有72dpi的低解析度,並非是以向量圖模式運作。

image

但不用擔心,它骨子裡還是向量圖,如果我們把它儲存成docx格式再用Word開啟,又可以看到清晰的黑貓向量圖了。

這是因為Google文件的編輯器預設只會使用低解析度的點陣圖片,不會用向量模式來處理向量圖。但我們還是能在Google文件中直接匯出向量圖,做法可以參考我之前的文章「如何從Google文件中的繪圖匯出高解析度的圖片」。


結語 / In closing

整理完這篇之後,向量圖片格式在各種辦公室軟體中的應用操作就更加全面了。上次介紹的是如何在Word中使用SVG,這次介紹的是如何在Google文件中使用SVG,那另外一個知名的開放軟體LibreOffice呢?

image

LibreOffice直接支援SVG,不需要任何轉換,插入圖片就是了。害我不能寫成blog教學佔個一篇廢文。

我甚至可以直接在LibreOffice Draw裡面直接畫全向量圖的海報跟傳單,不需要假手付費軟體Illustrator。LibreOffice真心好用,極力推薦啊。

之後有時間的話,我也會來製作開放格式檔案Open Document Format的線上編輯工具,這時候將會使用線上編輯ODT文件的WebODF函式庫、能夠分析與儲存ODS試算表的JS-XLSX、以及線上顯示與編輯試算表的Tabulator。這樣就可以讓大家不需要安裝LibreOffice也能夠處理ODF開放格式文件囉。


好啦,這次將SVG向量圖片插入到Google文件的教學就到這邊了。你會有在Google文件中使用向量圖片的需求嗎?你以前都是怎麼做的呢?你用過CloudConvert來轉換文件格式嗎?你會擔心使用人家伺服器轉換檔案格式時會有隱私外洩的問題嗎?歡迎在下面的留言處跟我們分享你的想法。如果你覺得我這篇教學寫的不錯的話,請幫我在AddThis分享工具按讚、將這篇分享到Facebook等社群媒體吧!感謝你的耐心閱讀,讓我們下一篇見。

總共1 則留言 ( 我要發問 , 隱藏留言 顯示留言 )

  1. 記錄一下。現在Google Drive不能用Google Drawing開啟EMF,因此這個方法就不能使用了。
    雖然很遺憾,但在Google Drive裡使用向量圖真的是意外地困難orz

    回覆刪除