SVG 可以包含可編輯形狀、普通圖片,或兩者都有。如果只能移動整張圖,先看選中的是不是一組形狀;如果是圖片圖層,可能還需要轉換。

在繪圖軟體裡檢查

  1. 用 Figma、Inkscape 或 Illustrator 開啟檔案副本。
  2. 在圖層或物件面板展開分組,選中裡面一個部分。
  3. 試著改顏色,再用編輯節點的工具移動一個點,然後撤銷。
  4. 檢查圖中另一個部分,避免把形狀和圖片混合的檔案誤判為全向量。

一個選擇框不等於一張點陣圖,多個形狀的分組也只有一個框。關鍵是能否進入分組修改需要的部分。

為什麼文字也改不了?

字母可能已經變成輪廓,可以調整邊緣,卻不能用打字替換。以後還要改內容,就在編輯器裡重新建立文字。

可選:看看 SVG 程式碼

用文字編輯器開啟副本,搜尋 <image。它的 href 可能引用外部圖片,或包含圖片資料,這不等於把圖片轉成形狀。path、circle、rect 和 polygon 可以描述形狀,但找到一個路徑也不能證明整個檔案都是向量。

試著修改這個信封

開啟下面的小狗 SVG,展開分組,選中紅色信封的一部分改色,再撤銷。信封可能包含多個形狀,折線也要檢查。再選中一個藍色區域看看節點,這比單純放大更有用。

原圖
原圖
轉換後的 SVG
轉換後的 SVG
原圖細節
原圖細節
轉換後細節
轉換後細節
原圖 · 轉換後的 SVG · 檢視示例的製作過程

如果 SVG 只裝了一張圖,可以向設計者要原始向量檔案,或轉換清楚的原始圖片。ImageSVG 不會把點陣圖裝進 SVG,但也不會把圖片裡的文字識別為可輸入的文字。

試著檢查同時含有圖形和圖片的檔案

下載這份教學 SVG,用繪圖軟體開啟並展開群組。左邊的三角形可以編輯各個點,右邊則是一張 PNG 圖片。先修改左邊的顏色,再試試右邊:兩者看起來都很清晰,但只有左邊是向量圖形。這是專門製作的反例,不是 ImageSVG 的轉換結果。

下載這份教學 SVG,用繪圖軟體開啟並展開群組。左邊的三角形可以編輯各個點,右邊則是一張 PNG 圖片。先修改左邊的顏色,再試試右邊:兩者看起來都很清晰,但只有左邊是向量圖形。這是專門製作的反例,不是 ImageSVG 的轉換結果。

SVG ↓