:::

怎麼將SVG向量圖插入到Word中?開放格式與專有格式的轉換 / How to insert SVG vector images into Word? Convert between Open Format and Proprietary Format

image

前一篇我們介紹了如何將Word中使用的EMF向量圖片轉換成開放格式的SVG向量圖,這篇我們來反過來談談如何將開放格式SVG向量圖用在Word上。簡單來說,這個做法就是使用Inkscape開啟SVG向量圖,再轉存成EMF格式,這樣就可插入到Word中以向量模式運作了。最後我會整理一下SVG向量圖、EMF微軟專用向量圖、高解析度PNG圖片檔之間轉換的做法與用途,希望讓大家能夠更順利在辦公室軟體中使用向量圖片。


Word對向量圖片的支援 / Vector images support in Word

Bitmap_VS_SVG.svg

(圖片來源:Wikipedia)

講到向量圖片格式,在網頁開發中最為人熟知的就是SVG格式。上圖展現了SVG向量圖片的特色,因為向量圖片是即時運算,而非用點陣保存圖片上的每個像素資料,因此放大的時候也能夠維持線條和圖片的清晰度,而且通常對大圖來說,向量圖片的檔案大小更是遠遠的少於點陣圖。

現在許多常見的圖庫都提供了SVG的格式,像是有各種圖示的Icon Ninja、美工圖案(clipart)的OpenClipart、免費圖庫Pixabay的向量圖,都是向量圖片很豐富的來源。

然而,現在主流的幾種辦公室編輯工具,像是Microsft WordLibreOffice Writer或是Google Doc他們對SVG的支援程度都不太好。雖然Microsoft Office 2016終於支援了SVG,但還是有人的Word 2016不能使用SVG。Writer能夠直接插入SVG,但是SVG檔案名稱只能用英文與數字,而且有時候SVG的格式也不太正確。至於Google Doc更是完全不支援SVG

image

別說新版的Office 2016,我的舊版Word 2013是完全不能支援SVG。直接用SVG拖曳進入Word,只會看到這樣的檔案連結圖示。用插入圖片的方式插入SVG,也只會出現「目前無法顯示此圖像」的叉燒包

那到底要如何讓SVG的向量圖片能夠正確地在Word中使用呢?最簡單的做法,就是用Inkscape將SVG轉存成EMF格式,然後就能在Word中以向量圖片模式使用這張圖了。以下我們就來看看這整個做法吧。


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

cat, black png icon

(圖片來源:Icon Ninja)

這張圖片是來自於Icon Ninja的黑貓圖,這整張圖是由線條與圖形所組成,結構上看起來挺複雜的,讓我們以這張圖片作為例子吧。

Step 2. 用Inkscape開啟 / Open file in Inkscape

image

要處理SVG的話,最推薦的工具還是使用Inkscape啦。如果你還沒有Inkscape的話,請到下面的連結下載免安裝版本:

使用Inkscape開啟黑貓圖,就成了上面的樣子。讓我們繼續下一步吧。

Step 3. 將檔案儲存成EMF格式 / Save as EMF format

image

進入選單列的「File」,點選「Save As」另存新檔。

image

下面的「Save as type:」選擇「Enchanced Metafile (*.emf)」,也就是Windows增強型中繼檔。

image

接下來會跳出一個EMF Output的對話視窗,裡面有SVG轉換成EMF的時候可以調整的一些細節。我也不是很清楚這些細節的用法,總之就讓它用預設值打勾前四個選項,按下右下角的「OK」繼續吧。

image

這樣子就將原本的SVG檔案儲存為EMF格式了。讓我們繼續下一步。

Step 4. 在Word中插入EMF檔案 / Insert the EMF in Word

image

接下來我們到Word中插入剛剛轉換而成的EMF檔案。你可以直接將EMF拖曳到Word中,或是用「插入」索引標籤中的「圖片」,選擇EMF檔案。

image

好的,我們插入了黑貓圖片了。這樣看起來好像只是個普通的圖片啊?

image

讓我們把黑貓放到超級大來看看,黑貓的眼神依然犀利,完全不會出現鋸齒狀的馬賽克,這就是向量圖片的威力。

image

當然,EMF檔案也可以插入到Power Point等Office系列的其他軟體中,運作一樣正常喔。


風險:格式可能會有錯誤 / SVG converting EMF: Incorrect layout

使用Inkscape將SVG轉換成EMF的這個方法雖然可以讓SVG向量圖能夠順利在Word中顯示,但必須注意的是,這並不是一個完美的方案。SVG儲存成為EMF的時候,仍然可能會造成一些格式上的錯誤。

image

上圖是我用前一篇EMF轉換SVG教學中最後產生的SVG結果,再用上述的方法轉換成EMF後插入Word,結果仍然有一些細節並沒有完整的轉換。上圖的「High Anxiety」的橢圓框的灰色背景跑出了橢圓框的範圍,蓋住了後面的深灰色陰影。

image

在SVG中則是正常地呈現。

我不確定這是否是因為這張SVG原本就是來自EMF的關係,還是可能某些特殊的形狀就是會讓Inkscape無法完整地將SVG轉換成EMF。總之,使用的時候,請你務必注意一下可能格式轉換不正確的風險,謹慎地使用。


向量圖片之間的轉換與用法 / Vector image format: Convert and usage

image

這一系列以來我也講過不少關於SVG向量圖片的相關用法。接下來我們用上面這張圖來說明這四個主要的相關流程與做法。

首先是左上角的「1. SVG <-> Inkscape」。因為SVG是成熟的標準開放格式,因此很適合作為向量圖片最終保存與分享的格式。只要是向量圖片,最好都能夠讓它轉換成SVG,以避免未來可能會有打不開的窘境。很遺憾的是,Windows在排斥開放格式以增加專有軟體限制的商業考量下,像是SVG或是TIFF都是Windows預設不能支援的開放格式。因此在Windows上若要瀏覽、編輯、處理SVG圖檔,最適合的工具就是Inkscape

接下來是左下角的「2. Inkscape -> PNG」。能在Inkscape中開啟向量圖檔SVG之後,我們就可以進行編輯、調整,最後依據需求來匯出高解析度的PNG檔案。關於這部分的做法,請看我之前寫的「將向量圖檔SVG轉換成高解析度的PNG圖檔:Inkscape教學」。

然後是右上方的「3. Inkscape -> EMF -> Word」。儘管Word無法直接使用SVG,但我們仍然可以透過Inkscape將SVG儲存為EMF格式,這樣就能夠在Word中順利使用。這個做法也就是前面介紹的內容。

最後是右下角的「4. Word -> PDF -> Inkscape」。如果要將Word中的向量圖片,不僅是EMF檔案,或甚至是你用繪圖畫布所畫的圖案,全部匯出儲存成SVG格式,以確保長久保存或傳送的話,那做法就是用Word轉存為PDF,再用Inkscape的「Import」功能將PDF匯入,就能夠在Inkscape中將之儲存為SVG格式。關於這部分的做法,請看我之前寫的「EMF圖檔怎麼用?微軟專用向量圖EMF轉開放向量圖SVG教學」。

Google文件與SVG圖片 / Extract SVG format image from Google Doc

如果你的辦公室軟體是使用Google Doc (Google文件)或Google Spreadsheet (Google試算表),想要將你在文件內的繪圖或圖表轉換成SVG,那請看以下的教學:

image

至於Google Presentation (Google投影片),它能夠直接將投影片儲存成SVG格式,就不用再多做任何介紹了吧。

PDF也是相容性極高的向量格式 / PDF as a vector image

image

最後值得一提的是,雖然很多向量繪圖工具都不能將向量圖儲存成SVG,但卻可以將向量圖儲存為PDF,再到Inkscape中用「Import」功能匯入成為向量圖片。舉例來說,我會用Pencil來繪製操作介面的草圖(wireframe),它雖然可以匯出成PNG,但解析度非常低。這時候我們可以選擇將它匯出成為PDF,再到Inkscape中「Import」並刪除多餘的文字,就能夠將草圖儲存成SVG檔案或匯出成高解析度的PNG

事實上,就連前一篇「EMF圖檔怎麼用?微軟專用向量圖EMF轉開放向量圖SVG教學」也是藉助PDF的相容性,才能將EMF轉換成SVG呢。PDF真是泛用的標準格式啊!


結語:開放格式與使用之間的矛盾 / In closing: Open format or use convenience

這幾篇這樣講下來,不知道大家有沒有意識到一個問題:為什麼我要做這樣的轉換呢?

舉例來說,幾乎沒有人知道Word裡面有EMF格式的向量圖,大家也通常都沒必要知道,因為每個人都用Word,每個人都開啟Word來編輯就好,沒必要要把它轉換成SVG或什麼高解析度圖片吧?

很遺憾的是,這個世界並不只有Word,也不是所有人都用Word編輯文件。前一篇最後有提到出版社編輯的例子,就是因為他們不是用Word來排版書籍內容,所以作者不能直接將Word的向量圖給他們用。此外,Word在Mac與Linux等其他作業系統上,通常也會遭遇排版錯亂的問題。而且Word本身版本也是個問題,之前在Word 2007的時候從doc過度到docx時所帶來的慘痛經驗,直到現在仍然隨處可見。

為什麼?以往微軟的商業考量採取了排外的策略,在Windows和Word這種專有軟體上使用專用格式很正常,像是沒人聽過的EMF檔,但到其他作業系統上就無法處理,這樣子使用者就會綁定在專有軟體上,無法離開這個微軟宇宙。反之,別人使用的開放格式,就盡量不要讓它能在Windows和Word使用,以減少大家使用開放格式的機會,大家就不會意識到還有格式這種檔案,腦袋裡面只知道要編輯文件就只能用Word,這樣更進一步的打壓開放格式、就能助長自家產品的存在感。

雖然現在微軟逐漸不採用這種商業策略,而有逐漸迎接開放原始碼的轉變,但是這種商業策略對許多人造成了根深蒂固的影響。讓我講一個非常諷刺的故事。

大家都知道我是圖書資訊相關科系的學生,這個領域其中一個知名的研究主題叫做數位典藏 (digital archive,雖然最近有老師很喜歡稱他為數字人文)。數位典藏領域大多都鼓吹使用開放格式,因為它的標準、非專有特性,可以確保數位檔案能夠長久典藏與使用,不會像Word換個版本之後新舊版之間就有各種問題一樣。

這個科系的老師們大多也都是教學生要使用開放格式,像是儲存圖片時要用開放格式TIFFF,做數位典藏計劃也要用TIFF保存所有格式。但是真的用TIFF來典藏所有圖片之後,問題就來了:

「布丁,為什麼我們數位典藏的圖片在網頁上打不開?」

「老師,因為瀏覽器不能開啟TIFF。」

「布丁,我下載了TIFF圖片,但為什麼我的電腦打不開?」

「老師,因為Windows沒有內建能夠開啟TIFF的格式。」

「那你想想辦法啊,怎麼會這樣呢?」

嗯……

最後我就弄了個大型圖片瀏覽器Zoomify,用Flash來讀取TIFF轉換的專有格式圖片,以達到在網頁上瀏覽大型圖片的效果。這個功能備受老師們讚賞,甚至延續到後面的開放課程典藏中還繼續改進了這個功能。

直到現在,Flash被淘汰了,Zoomify不能用了(除非你重新打開Flash功能並安裝合適的套件,但這個Flash套件可能也是病毒),以往專有格式的圖片瀏覽器已經只是投影片演講上的截圖。

開放格式TIFF呢?有誰在乎嗎?使用者甚至不能在數位典藏網站上下載TIFF圖檔呢。(題外話,在我國,許多人都認為不能下載的數位典藏才是有符合當地風情的數位典藏,這很有臺灣Style)

嗯……

總之,支持開放格式不能嘴巴說說,還是要身體力行來實作。我唯一欽佩的就只有開放格式宗師毛慶禎老師!至於小的我就盡量在blog上寫一些這樣的教學,試著幫助大家擺脫專有格式、迎向開放格式的新世界吧。


這篇將SVG插入到Word中的教學就到此為止了。你知道SVG開放格式的價值嗎?你有想過不是使用Word的情況嗎?你的老師是不是也都跟你說繳報告要上傳Word (還只能用doc)、算統計要用Excel (還只能用xls)跟SPSS的sav檔案,不然老師不收呢?你有想過Google Doc其實也是一種專有格式嗎?對於開放與專有格式之間的問題,你有什麼想法嗎?

好啦扯遠了,你也有想要把SVG插入到Word中嗎?除了這篇的做法之外,你通常都是怎麼處理呢?你還有其他的建議嗎?希望這篇介紹SVG如何插入到Word的教學能對你有些幫助,如果你覺得我整理的不錯的話,請幫我在AddThis分享工具按讚、將這篇分享到Facebook等社群媒體吧!感謝你的耐心閱讀,讓我們下一篇見。

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

  1. 我是把SVG貼到Visio上存檔,然後再把該Visio檔複製到Word上

    回覆刪除
    回覆
    1. 哈哈,不錯。

      不過Visio也是付費的商業軟體
      站在自由軟體的開放角度,我還是推薦Inkscape

      刪除