Class LLL / 設計星團教材目錄編輯與來源

Illustrator 教材 / Class LLL

輸出比較：格式、裁界與像素分開

SVG／PNG、工作區域與資產各自保留什麼

同一份稿換成SVG或PNG，先核輸出範圍、真像素尺寸和透明，再分向量路徑、文字與內嵌點陣；保母稿，按收件用途檢查實際檔案。

撰寫與維護：Class LLL · Lab Light Label｜預估閱讀 30 分鐘

開啟互動教材查看參考來源

閱讀目標

適用條件與學習範圍

同一張稿換格式、倍率與範圍後，哪些是真正改變的資料，哪些只是觀看方式？

能按收件尺寸與媒介選SVG或PNG，核板界／資產、真像素與透明通道，指出SVG仍可含點陣和字型依賴；保留可編母稿並重開結果。

本頁到螢幕資產輸出、SVG選項與有限像素取樣；原生AI/PDF母檔及封裝沿交付頁，印刷色版另查。網站產生自有靜態SVG與瀏覽器PNG，不是Illustrator匯出器、任意檔案轉換、Adobe反鋸齒或跨設備保真測試。

原理與判斷

輸出不是把副檔名改掉。先選內容範圍，再決定如何表示及取樣：向量路徑可重新取樣，點陣內容仍受來源像素限制；SVG的座標矩形也不是PNG像素寬高。外觀相同仍可能有不同的字型、影像與互動依賴。 先存可編母稿，對外結果獨立命名，於實際使用位置重開檢查。本站上床是固定原稿、左床是計畫裁界、右床是已建立結果；調計畫不自動改舊檔，必須重新建立。

先走一次：同稿、格式、倍率與裁界

先在輸出比較窗選A工作區域與PNG，建立得到48×48真像素；2x是96×96。換B為56×48本站單位，2x得到112×96。這是本站固定幾何與瀏覽器取樣，不替Illustrator保證分數板界取整。 再換SVG：PNG倍率停用，viewBox改為B的64 8 56 48。SVG保向量命令，也含既有RGB卡的內嵌點陣；放大不會找回卡片原本沒有的細節。改計畫後舊結果保持，重新建立才接受新條件；母稿未因裁界被刪。

轉存為螢幕適用：先選工作區域或資產

檔案 > 轉存 > 轉存為螢幕適用開螢幕資產輸出。工作區域針對工作區域，資產針對已收集資產；先核縮圖與要交的項目，再選格式、倍率及位置；G481另列進階與轉存至，可本機資料夾或Adobe 雲端儲存，雲端需核帳號、連線與存取，本站僅本機下載。適合多尺寸圖示和多板交付，不等於儲存可編AI母稿。 漏圖先查目前分頁與選取，而不是重畫內容。需要續改文字、效果、連結和板界，另存母檔；本站只建自有SVG／PNG，沒有原生檔案選取或磁碟批次匯出。

直接輸出選中工作區域：畫布和面板先核對

工作區域工具或Shift+O，在畫布選一或多板，右鍵／macOS 按住控制面板鍵並按一下 > 轉存，進轉存為螢幕適用設定格式、位置與其他選項，按轉存工作區域。只將選中各板分成獨立檔，不需再手填板號清單。先在工作區域面板確認哪些真的被選到。 少一板或多一板，先回選取和面板核對；板框顯示不等於當前選取。本站A與B各一檔真產生48×48和56×48兩份，資產RGB卡另按24×16裁界，不用一張拼圖假稱多板結果。

工作區域：全部、範圍與完整文件

在轉存為螢幕適用的工作區域核全部、範圍與完整文件：全部涵蓋所有工作區域，範圍指定板號，完整文件以文件圖稿整體為一份。它們不是「選某物件」的同義選項。多板選取按板分檔，不應把兩板拼成一張卻仍稱逐板輸出。 先對照工作區域名稱與編號、圖稿超界及背景，再建檔。若某板少內容，回板界／內容位置查，不盲目提高倍率；若收到一張過大整稿，核是否選完整文件。本站A/B範圍是明示比較，不能推斷所有原生取整規則。

縮放、寬度／高度與多格式輸出

轉存為螢幕適用可加入多組縮放／格式與後綴；PNG可用1x、2x等或按寬度／高度指定輸出尺寸，縮放不直接改母稿板界。2026-06-11官方網頁版圖示教學用PNG、寬度／高度及齒輪中的圖稿最佳化；需看目標像素，而非只記倍率。 SVG與PDF不支援這種PNG 縮放選項；不要因SVG旁有同列設定就宣稱2x會增加向量精度。檔案大小不對先核格式、倍率／指定尺寸及範圍，再查原圖。本站停用不適用倍率，不用CSS放大冒充新PNG。

輸出位置、命名、後綴與設定

螢幕輸出可指定轉存至、prefix及每組suffix，依格式／倍率建立子資料夾；建立 Subfolders可關。資產轉存保留設定，轉存為螢幕適用統整資產與板界。適合讓同一名稱的1x／2x結果不互相覆蓋。 輸出後找不到先核位置、子資料夾、前後綴與所選項，不把面板縮圖當已成功寫檔。原稿更新會影響資產引用，但舊輸出檔仍要重做；交付清單應記格式、範圍、尺寸和檔名。本站下載以明示檔名另存，不管理讀者資料夾。

資產轉存：收集的是圖稿引用

視窗 > 資產轉存；拖選取圖稿到面板，或用收集以供轉存收集。一般可收成多資產，Alt（Windows）／Option（macOS）拖放或作為單一資產收為一個。它不複製畫布物件，也不是CC 資料庫的資源庫同步。 適合個別圖示／標誌，不必先為每件建板；修改原稿會更新面板資產。誤拆成多件先查收集方式；原稿變了而檔不變，先重輸出並核位置。本站資產示例僅已有RGB卡邊界，不假造原生資產庫。

資產選取與資產邊界，不等於板界

資產轉存中有選取邊框的資產才會輸出，先明確選要交的項目，再加入縮放／格式，按轉存。資產的內容邊界與工作區域板界是兩種範圍：可能尺寸不同、包含的空白不同，也可能同稿輸出多個獨立結果。 少一件先查選取，空白過大先查是否有離群物件／效果外緣，再看選的是資產還是板。含筆畫、效果或分數座標的原生邊界須以實際檔案查核，不從本站固定矩形推全部取整。

轉存為：使用工作區域與輸出副本

檔案 > 轉存 > 轉存為選SVG或PNG，核位置、檔名與使用工作區域；按工作區域匯出時再選全部或範圍。未按板輸出與按板裁界責任不同，先留母稿再試一份。這條入口的格式選項和轉存為螢幕適用並非逐項相同。 當前轉存為文章的全部敘述與舊SWF格式清單有混雜，不拿歷史清單推2026每種格式能力。若未見預期控制，核安裝版和目前入口，改走符合用途的流程並重開結果；本站不聲稱每版匯出UI完全一致。

SVG viewBox、可視範圍與裁切各有責任

viewBox四數是user-space的min-x、min-y、寬度、高度，映到可視範圍；寬度／高度及CSS決定觀看尺寸，預設preserveAspectRatio為置中meet。viewBox寬高不是PNG像素數，省寬度／高度也不等於沒有比例。 viewBox本身不刪板外路徑，裁顯示還受overflow及剪裁影響。本站檔明確clipPath板界，原稿命令仍在，不能把裁顯示稱永久切掉原幾何。空白或比例不對先核viewBox四數與可視範圍，再查裁切，不先把所有路徑移到0,0。

SVG 樣式設定：CSS三種策略與重用

轉存為的SVG 選項 > 樣式設定可選Internal CSS、Inline 樣式或Presentation 屬性，決定外觀放在樣式表、樣式屬性或圖形屬性。適合依網站維護、繼承與檔案使用方式選擇，並不自動保證外部CSS不干擾。 嵌入後變色先查實際CSS與使用方式，尤其inline SVG可能受到頁面規則影響；先保原檔，再在真容器驗收。本站自足SVG用圖形屬性，沒有假CSS策略選單，也不將格式化差異當增加向量資訊。

SVG 字型：文字、外框與字型依賴

SVG 選項的字型決定文字保留或轉外框等輸出取捨，具體值依目前入口與安裝版核對。文字保留有利搜尋／內容編輯，但接收端仍需字型、合法可用資源及支援；輪廓保存字形幾何，失去文字游標與語意編輯。 先修缺字／字形，再另存可編文字母稿和交付副本，不靠轉外框修錯字。網站沿既有OFL Noto三個字形OBO的真外框，SVG沒有文字字型依賴；這是示例取捨，不能推所有語言／字型都適合外框。

SVG 影像：內嵌點陣仍是點陣

SVG 選項的影像可選嵌入或連結，前者把影像帶入檔，後者保外部依賴。內嵌有利自足交付但增加資料，連結需正確路徑、權限與接收環境；兩者都不把照片變成向量。 SVG放大後某區糊，先查影像元素、來源像素與使用尺寸，再決定更換原圖或重建輪廓。本站內嵌既有192×128 RGB卡，直接檢查檔可找到影像與向量路徑並存；不下載外部照片或假裝整張全向量。

物件 IDs、小數與縮減程式碼：精度和識別分開

SVG 選項的物件 IDs可用圖層 Names、Minimal或Unique等策略，影響名稱和外部引用；小數決定數值小數精度，縮減程式碼縮減檔案文字。適合在尺寸、可讀性與幾何容差間取捨，不能把小數位當像素解析度。 精度太低可能改細線／接邊；改IDs可能破壞引用，縮減程式碼不應刪必要內容。先保母檔，在實際尺寸比較再交付；本站保固定字形資料和必要剪裁 ID，不提供不作用的假壓縮控制，沒有「檔小即保真」保證。

回應式：省固定尺寸仍要設定使用容器

SVG 選項 > 回應式省絕對寬度／高度，保留可縮放關係，適合由網頁容器控制大小。viewBox提供內部座標和比例，仍須在實際img／inline SVG／CSS場景指定適當尺寸；缺尺寸的預設外觀不能當原稿變形。 遇到尺寸不對先查容器CSS和可視範圍，而不是盲目改路徑數字。本站的SVG比較依明示原尺寸預覽，之後的觀看倍率只改觀看；不把回應式和PNG 2x混為一談。

PNG：真像素尺寸、解析度與來源限制

PNG是點陣輸出；轉存為的解析度和螢幕輸出的倍率／寬度／高度需按入口分辨。相同幾何取樣成更多像素可以改善特定觀看尺寸，但原稿內嵌點陣仍受原始資料限制。先記目標像素尺寸，再按用途選輸出。 只改HTML寬高不是重新產生像素；只填高ppi也不自動增加必要細節。本站用瀏覽器2D實際生成48×48／96×96等PNG，下載和預覽naturalWidth／高度一致，非Adobe匯出品質或所有設備銳利保證。

PNG背景：透明、白色、黑色

PNG 轉存選項的背景顏色可透明、白色或黑色；透明保透明通道，白／黑將透明區合到背景。SVG通常透明，但若圖稿本來畫了白色矩形，透明選項不會自動刪它。 在深、淺和棋盤底看邊緣，分清透明區與白圖稿。輸出變白先查背景選項、原稿白底物件及接收端呈現，不把棋盤寫進圖；本站真透明通道與觀看底分開，螢幕看見顏色不等於PNG內RGB已改。

反鋸齒與Interlaced：取樣和載入分開

PNG的反鋸齒使邊緣取樣平滑；Interlaced影響載入時逐步呈現，並非增加細節。2015官方完整小節另分無、圖稿最佳化與文字最佳化；2026官方圖示教學仍有圖稿最佳化。文字與圖稿取樣條件不同，先在目標尺寸閱讀再選。 細字或斜線不佳，先核原稿、尺寸與實際選項，不只改檔案壓縮。本站只用瀏覽器SVG光柵化／畫布輸出，不把imageSmoothingEnabled當Adobe 圖稿／文字最佳化或字型字形微調，沒有假反鋸齒選單。

製作像素完美圖稿：先選可對齊的物件或線段

選取工具選圖稿，或直接選取工具選水平／垂直段，物件 > 製作像素完美圖稿；亦有右鍵及控制面板入口。適合小尺寸圖示的可對齊邊界；若已對齊或不可對齊會提示。2026官方教學明說曲線／斜線不因此改善。 不要把整張照片或任意曲線強制拉到整數。無效果先查所選段方向、筆畫對齊與圖稿類型，再在目標尺寸看；本站僅示有限1單位置中垂直筆畫的邊界責任，不認證原生全部筆畫座標規則。

靠齊像素與像素預視：幾何和檢視分開

檢視 > 靠齊像素可在繪製、移動和縮放時吸附；移動可依路徑、區段、錨點選責任，網頁／行動裝置描述檔有預設。需要分數自由放置就先核此開關，不把吸附意外移動當路徑損壞。 檢視 > 像素預視是點陣預覽，600%以上才見格，偏好也可隱格；沒有格不證明未對齊。先比較幾何位置與實際PNG，而不是只開預覽就稱已修；網站觀看放大不修改母稿或輸出像素。

歷史對齊至像素格點：不要套成現行萬用條件

2015官方手冊的新增文件／變形有對齊新增物件／對齊至像素格點物件屬性；貼入未對齊物件不自動修，需另選，選取 > 物件 > Not 對齊的至像素格點是該年代入口。Rasters、點陣效果及文字沒有那種路徑屬性；符號縮放後仍可能失銳。 其72ppi銳利敘述只屬該流程條件，不推2026任何解析度或每種筆畫。找不到舊控制先查安裝版、現行製作像素完美圖稿與真正檔案；不要為補一個歷史選項而聲稱當代功能已移除或人人應降72ppi。

SVG 濾鏡：預覽、XML與效果順序

效果 > SVG 濾鏡套預設；同選單套用／編輯／新增或讀入 SVG 濾鏡可使用／修改XML定義。適合可由SVG 濾鏡表示的效果，先保母稿並核目標環境。畫板上的效果是點陣預覽，文件點陣效果設定影響預覽解析度。 G430說若SVG 效果後又有其他效果，SVG輸出可能含點陣；S26建議把SVG效果放外觀底、不透明度上。這是順序條件，不是所有濾鏡一律點陣化。結果不符先查堆疊及實際檔，本站不執行自訂XML或仿真原生濾鏡匯出。

SVG 互動：事件、外連與嵌入方式

視窗 > SVG 互動，選物件後選event、填JavaScript，Windows Enter／macOS return確認；面板可連外部JS，移單筆或清除 Events。這是官方仍有具名正文的入口，不據此保證每個安裝版都可見，也沒有證據宣稱已刪除。 SVG作img／CSS影像時可用安全影像模式，外連與指令碼可能停用，直接開啟與嵌入不能保證相同。事件無效先查使用方式、政策與依賴，不要求讀者停用安全保護。本站只交自足靜態SVG，不執行讀者程式碼或呼叫外部服務。

另存新檔 SVG的歷史選項：與轉存為分辨

S26的儲存於 SVG 格式列SVG／SVGZ、字型文字 CEF／SVG／外框、Subsetting、影像位置、保留 Illustrator 編輯功能等；網格會點陣化，來源影像按透明通道轉JPEG／PNG。內含AI編輯資料時，手改SVG後重開可能讀AI區而不反映XML變化。 同節的SVG1.0／1.1、基本／Tiny、Adobe SVG Viewer、Device Central及舊描述檔屬該頁歷史介面，不推薦作2026手機交付承諾。找不到選項先核入口與安裝版，改以現行轉存為和真結果驗收，不捏造最低版本／刪除日期。

舊SVG文字／編碼與預覽：保留條件，不承諾通用

S26另列CSS 屬性、小數 Places歷史1–7、編碼、XMP、圖形伺服器／slicing、減少tspan及textPath。減少tspan可能忽略自動字偶距；textPath可能顯示溢位或不同外觀。選項影響資料組織、字形排布和接收支援，不是越精簡越準。 先保可編文字，在實際瀏覽器／容器與目標尺寸核對。當前轉存為的小數與此舊另存新檔範圍分開查；本站不模擬CEF、舊Viewer或Device Central，也不從歷史預覽按鈕推現行相容性。

交付檢查：母稿、結果、背景與重開

先保存母檔和引用來源，再按用途輸出獨立結果。核檔名／數量、板界或資產範圍、PNG真像素／透明通道、SVG的viewBox／路徑／影像／字型及外連；在收件端實際使用位置重開，必要時用深淺底與原尺寸比。 外觀相似不代表可編結構或依賴齊全。若需要持續改稿回母檔與封裝；若涉及印版、套印、出血或ICC另依印前流程實測。網站下載只證明本頁原創有限模型的產物，不冒充Illustrator、印刷設備或真人學習成果。

來源日期、平台與網站模型的停止線

查核2026-10-21。四主責來源與轉存為／資產轉存／像素 Perfect實際正文已讀，補W3C SVG2的2026-10-06 候選 Recommendation Snapshot，尚非最終Recommendation；2015PDF及S26舊入口明示年代與範圍。完整日期、內容雜湊值範圍與章節落點另存，不把索引當操作驗證。 Illustrator桌面Windows／macOS，Alt／Option與Enter／return分別註記，不擴稱iPad／網頁版；未原生Illustrator、Adobe反鋸齒／色管、跨瀏覽器保真、印刷或真人換素材試用。沿點線模型機構、既有RGB卡和OFL Noto外框，沒有新增外圖或字型。

步驟與觀察

  1. 保母稿，先定用途與目標尺寸

    確認收件端要螢幕圖示、靜態向量或可編母稿；母檔另存，記PNG目標像素及SVG依賴條件。

  2. 選對範圍與入口

    轉存為螢幕適用選工作區域／資產，核全部／範圍／完整文件；資產轉存先收集並選項；轉存為核使用工作區域。

  3. 依格式設有效控制

    PNG核倍率／寬度／高度、透明及反鋸齒；SVG核樣式設定、字型、影像、IDs、小數、縮減程式碼與回應式，不把PNG倍率套SVG。

  4. 檢查目標尺寸與邊界

    必要水平／垂直邊界核製作像素完美圖稿與靠齊；像素預視只觀察，輸出後比真像素、透明通道和viewBox。

  5. 重開結果，記錄依賴與限制

    在收件容器重新開啟、核多板數量與檔名、深淺背景、文字與點陣；有錯回對應母稿，不以副檔名或網站示例宣稱原生保真。

常見問題

PNG 2x仍像1x

查實際檔案像素和範圍；HTML/CSS放大不重取樣。若內嵌點陣本就低清，回原圖，不用更大倍率承諾恢復。

SVG放大後照片仍糊

查影像與來源像素；SVG可混向量和點陣，內嵌只改依賴，不把照片向量化。

透明輸出卻有白底

查背景選項、原稿白色矩形及接收端顯示；換深淺底核透明通道，不把棋盤寫入檔。

少一板或空白過大

核工作區域／資產、選取邊框、範圍和完整文件，再查離群物件、板界與效果外緣。

像素對齊後曲線仍有反鋸齒

製作像素完美圖稿針對可對齊邊界，不保任意曲線／斜線銳利；在目標尺寸比較，回原稿判斷。

SVG字型、事件或外連在網站失效

核字型／影像與接收模式；img或CSS影像可能停外部依賴／指令碼。保母稿，依需求交自足靜態結果，不擅自停用安全限制。

適用範圍與證據

原教材查核日期：2026-10-21 適用範圍：Illustrator桌面Windows／macOS，四主責來源及具名SVG／PNG／資產／像素補查；歷史選項明示，不延伸網頁版／iPad。 來源狀態：實際正文與相關完整小節已讀，日期／內容雜湊值範圍和具名章節映射另存；W3C支持網站格式模型，不是Adobe匯出規格。 示意限制：固定128×80原創幾何、真SVG及瀏覽器2D PNG，沿已有RGB卡、OFL Noto外框和點線模型機構；非Adobe匯出器。 原生軟體實測：未原生Illustrator、Adobe反鋸齒／ICC、所有瀏覽器／設備或印前實測。 學習成效驗證：未真人換素材試用，看過／自標理解不推定學習成效。

參考來源

來源依原教材逐頁維護；本次建立閱讀網址不代表重新完成原生軟體或真人學習測試。如遇版本差異或內容錯誤，歡迎來信提出具體段落與版本。

相關知識