Cách Chuyển đổi file AI (Adobe Illustrator) sang SVG
File AI và SVG là gì, và Tại sao cần Chuyển đổi giữa chúng?
File AI là định dạng gốc của Adobe Illustrator, lưu trữ các tác phẩm vector trong một cấu trúc độc quyền mà chỉ Illustrator và một vài ứng dụng khác có thể hiểu đầy đủ. Nó rất mạnh mẽ, hỗ trợ các tính năng riêng của Illustrator như hiệu ứng trực tiếp, văn bản có thể chỉnh sửa và các chế độ hòa trộn phức tạp. Nhưng tất cả sức mạnh đó lại bị khóa trong một chiếc hộp đen. File AI là một hệ sinh thái đóng. Hãy thử sử dụng nó trong trình duyệt, một ứng dụng web, hay trong quy trình build của lập trình viên, và bạn sẽ thấy nó hoàn toàn vô dụng. Trong khi đó, SVG (Scalable Vector Graphics) lại là một tiêu chuẩn mở. Được duy trì bởi W3C, định dạng dựa trên XML này được kết xuất nguyên bản bởi mọi trình duyệt hiện đại. Nó có thể co giãn từ một favicon 16×16 nhỏ xíu đến một tấm biển quảng cáo 4K khổng lồ mà không mất đi một chút độ nét nào. Vì nội dung của nó chỉ là văn bản thuần túy, các lập trình viên thậm chí có thể thao tác trực tiếp với các đường path, màu sắc và hoạt ảnh bằng code. Một logo được xuất dưới dạng SVG 8 KB sẽ trông hoàn hảo ở mọi kích thước; cũng logo đó dưới dạng PNG độ phân giải cao có thể dễ dàng lên tới 200 KB hoặc hơn. Việc chuyển đổi từ AI sang SVG là một công việc hàng ngày trong các quy trình làm việc thực tế. Một nhà thiết kế bàn giao logo cho một lập trình viên web. Một đội ngũ UI cần các tài sản icon. Một công ty in ấn muốn đưa thương hiệu lên một trang web. Vấn đề là, việc dịch chuyển này không phải lúc nào cũng hoàn hảo. Những phép màu độc quyền của Illustrator—bộ lọc raster, một số loại gradient mesh, các font chữ được liên kết—không có một tương đương trực tiếp trong SVG. Những yếu tố này phải được đơn giản hóa trước khi bạn xuất hoặc chúng sẽ được các công cụ tự động ước tính, đôi khi rất tệ. Hiểu rõ điều này ngay từ đầu sẽ giúp bạn tiết kiệm vô số công sức làm lại.
Phương pháp Sạch sẽ nhất: Xuất SVG trực tiếp từ Adobe Illustrator
Nếu bạn có Adobe Illustrator, việc xuất trực tiếp là cách tốt nhất để có được kết quả sạch sẽ và có thể kiểm soát. Quá trình này tự nó rất đơn giản, nhưng bảng cài đặt chính là nơi mọi thứ có thể đi sai hướng. Đi tới **File > Export > Export As**, chọn SVG từ menu thả xuống của định dạng, và nhấn Export. Illustrator sẽ hiển thị cho bạn hộp thoại SVG Options. Hãy chú ý kỹ đến các cài đặt này, vì chúng rất quan trọng. - **Styling**: 'Presentation Attributes' là lựa chọn tốt hơn nếu file SVG sẽ được tạo kiểu hoặc hoạt ảnh bằng CSS sau này. Nếu đó là một hình ảnh tĩnh, lựa chọn nào cũng được. - **Font**: Hãy đặt thành 'Convert to Outlines'. Tôi phải nhắc lại lần nữa: trừ khi bạn hoàn toàn chắc chắn môi trường của người dùng cuối có chính xác font chữ bạn đã sử dụng, hãy cứ chuyển nó thành outline. Điều này nhúng các dạng chữ thành các đường path vector và hoàn toàn tránh được các vấn đề phụ thuộc vào font chữ. - **Images**: Nếu tác phẩm của bạn bao gồm các hình ảnh raster như ảnh chụp hoặc họa tiết, hãy chọn 'Embed'. Việc liên kết (Linking) tạo ra file nhỏ hơn nhưng lại tạo ra một sự phụ thuộc mong manh vào một đường dẫn file bên ngoài rất dễ bị hỏng. - **Object IDs**: Sử dụng 'Layer Names' nếu các lập trình viên cần nhắm mục tiêu vào các yếu-tố cụ thể bằng JavaScript hoặc CSS. Đối với các tài sản tĩnh mà mỗi byte đều có giá trị, 'Minimal' là đủ. - **Decimal Places**: Giá trị 2 gần như luôn là lựa chọn đúng cho đồ họa trên màn hình. Giảm xuống 1 sẽ tiết kiệm được vài byte nhưng có thể làm biến dạng rõ rệt các đường cong phức tạp. Cứ giữ ở mức 2. - **Minify**: Luôn chọn mục này cho các tài sản sản phẩm. Nó loại bỏ các khoảng trắng và bình luận, thu nhỏ kích thước file một cách đáng kể từ 10–20%. Trước cả khi bạn đến hộp thoại xuất file, có một bước chuẩn bị cực kỳ quan trọng. Bạn phải làm phẳng hoặc bung các hiệu ứng trực tiếp không chuyển đổi tốt sang SVG (sử dụng **Object > Expand Appearance**). Ví dụ, hiệu ứng đổ bóng của Illustrator sẽ hoặc là biến mất, hoặc là bị chuyển thành một hình ảnh raster cục mịch bên trong file SVG của bạn. Bất kỳ ai đã từng mở một file được cho là vector chỉ để thấy một ảnh JPEG mờ tịt bên trong đều hiểu rõ nỗi đau này. Cả hai kết quả đều không phải là điều bạn muốn cho một đồ họa có thể co giãn.
Chuyển đổi AI sang SVG Trực tuyến với CocoConvert
Thực tế mà nói: không phải ai cũng có một gói đăng ký Adobe Creative Cloud đang hoạt động. Ngay cả khi có, đôi khi bạn chỉ cần một công cụ chuyển đổi nhanh trên một máy không cài Illustrator. Trong những khoảnh khắc đó, một công cụ chuyển đổi trực tuyến là giải pháp thiết thực nhất, và CocoConvert hoàn thành tốt công việc này. Quy trình tại [công cụ chuyển đổi AI sang SVG của CocoConvert](/convert/ai-to-svg) cực kỳ đơn giản: tải file AI của bạn lên, đợi một chút để nó xử lý, và tải về file SVG kết quả. Không cần phần mềm, không cần đăng ký cho các chuyển đổi tiêu chuẩn. Tất nhiên, có một số quy tắc cơ bản. CocoConvert xử lý các file lên đến 100 MB, quá đủ cho hầu hết các tài liệu AI. Chỉ những file in phức tạp nhất chứa đầy hình ảnh độ phân giải cao mới vượt qua giới hạn đó, và dù sao thì những file đó cũng nên được xử lý trong Illustrator. Cái gì hoạt động tốt nhất? Các tác phẩm vector phẳng. Logo, icon và hình minh họa được xây dựng từ các đường path cơ bản và các gradient đơn giản sẽ chuyển đổi rất đẹp. Nếu file AI của bạn chủ yếu là các hình dạng vector sạch với màu tô và đường viền đơn sắc, bạn có thể mong đợi một file SVG có độ chính xác cao. Nơi bạn sẽ gặp rắc rối là với những phép màu độc quyền của Illustrator. Gradient mesh, các chế độ hòa trộn phức tạp và các hiệu ứng trực tiếp như 'Roughen' không có tương đương trực tiếp trong SVG. CocoConvert sẽ ước tính chúng, nhưng đối với các tác phẩm nghệ thuật phụ thuộc nhiều vào các tính năng này, đầu ra có thể cần được chỉnh sửa thủ công. Điều tương tự cũng áp dụng cho font chữ. Nếu file AI của bạn sử dụng văn bản trực tiếp chưa được outline, công cụ chuyển đổi sẽ thay thế bằng một font chữ dự phòng. Để có kiểu chữ chính xác, hãy luôn outline văn bản của bạn trong Illustrator trước khi tải lên.
Sử dụng các Công cụ Thay thế Miễn phí: Inkscape và các Lựa chọn Khác
Inkscape là một trình chỉnh sửa vector mã nguồn mở, miễn phí tuyệt vời có thể chuyển đổi AI sang SVG khá tốt. Đây là một công cụ phải biết đối với bất kỳ ai làm việc thường xuyên với vector nhưng sống ngoài hệ sinh thái Adobe. Trong Inkscape, bạn chỉ cần mở file AI qua **File > Open**, sau đó lưu ngay lập tức qua **File > Save As**, chọn SVG làm định dạng. Bạn sẽ thấy các tùy chọn cho 'Plain SVG' và 'Inkscape SVG'; để có khả năng tương thích tốt nhất với các trình duyệt và các công cụ khác, hãy luôn chọn 'Plain SVG'. Nhưng có một điểm trừ rất lớn: khả năng tương thích với PDF. Hầu hết các công cụ của bên thứ ba, bao gồm cả Inkscape, không thực sự đọc dữ liệu AI gốc. Chúng đọc một luồng dữ liệu PDF mà Illustrator nhúng vào file. Nếu file AI được lưu mà không chọn tùy chọn 'Create PDF Compatible File', Inkscape không thể mở nó. Bạn sẽ chỉ nhận được một khung vẽ trống hoặc một lỗi. Nếu một khách hàng gửi cho bạn một file AI không mở được, đây gần như chắc chắn là lý do. Bạn sẽ phải yêu cầu họ lưu lại file với tùy chọn đó được bật. Cũng có những công cụ khác. Affinity Designer, với giá mua một lần khoảng 1.700.000₫, có khả năng nhập file AI xuất sắc và tạo ra SVG rất sạch. Theo tôi, đó là khoản đầu tư dài hạn tốt nhất nếu bạn không đi theo con đường của Adobe. Đối với những người nghiện dòng lệnh, các công cụ như `cairosvg` và `svg-convert` cũng có sẵn, nhưng chúng thường yêu cầu chuyển đổi AI sang một định dạng khác trước, làm mất đi mục đích của một quy trình làm việc đơn giản. Đối với một lần chuyển đổi nhanh chóng, công cụ trực tuyến của CocoConvert vẫn nhanh hơn việc cài đặt và học Inkscape. Tuy nhiên, nếu bạn thấy mình cần làm điều này hàng tuần, việc đầu tư thời gian vào Inkscape hoặc tiền bạc vào Affinity Designer sẽ mang lại hiệu quả.
Các Vấn đề Thường gặp và Cách Khắc phục
Việc chuyển đổi đã xong, nhưng file SVG trông... sai sai. Chuyện này vẫn xảy ra. Dưới đây là những thủ phạm thường thấy và cách khắc phục chúng. **Thiếu font hoặc font bị thay thế**: Bạn mở file SVG và kiểu chữ đẹp đẽ, được lựa chọn cẩn thận của bạn đã bị thay thế bằng một font hệ thống chung chung. Cách khắc phục là làm cho font chữ trở nên không còn liên quan. Trước khi chuyển đổi, hãy chọn tất cả văn bản của bạn trong Illustrator và outline nó (**Type > Create Outlines**, hoặc Shift+Ctrl+O / Shift+Cmd+O). Thao tác này biến các chữ cái thành các đường path vector đơn thuần, loại bỏ sự phụ thuộc vào font chữ. **Các thành phần raster bên trong SVG**: File được cho là vector, nhưng bạn lại thấy các pixel mờ, hoặc kích thước file lên tới một con số megabyte gây sốc. Đây là dấu hiệu kinh điển cho thấy các hiệu ứng của Illustrator đã bị raster hóa khi xuất. Cách khắc phục là tự mình làm điều đó, nhưng tốt hơn. Trong Illustrator, hãy vào **Object > Expand Appearance** trước khi bạn xuất file. Thao tác này sẽ chuyển đổi hầu hết các hiệu ứng trực tiếp thành các đường path vector tương đương của chúng. **Màu sắc trông khác biệt**: Màu xanh rực rỡ của thương hiệu bạn giờ trông xỉn và nhạt. Đây có thể là vấn đề về không gian màu. Illustrator thường mặc định là CMYK cho công việc in ấn, nhưng SVG là một định dạng web và sống trong thế giới RGB. Cách khắc phục là thay đổi chế độ màu của tài liệu trong Illustrator qua **File > Document Color Mode > RGB Color** trước khi bạn xuất. **File SVG quá lớn**: Một logo đơn giản đáng lẽ chỉ 15 KB lại có dung lượng 2 MB. Điều này thường chỉ ra rằng có hình ảnh raster được nhúng, độ chính xác thập phân quá cao, hoặc các gradient mesh phức tạp chưa được đơn giản hóa. Cách khắc phục là xuất lại với tùy chọn minify được bật, giảm số thập phân xuống 2, và đơn giản hóa hoặc bung các đối tượng phức tạp trước khi bạn bắt đầu. **Đầu ra trống từ các công cụ chuyển đổi trực tuyến**: Bạn tải file AI của mình lên và nhận lại một file SVG trống rỗng. Bạn có nhớ cài đặt tương thích PDF mà chúng ta đã nói không? Đây là lúc nó gây rắc rối cho bạn. File AI có thể đã được lưu mà không chọn ô 'Create PDF Compatible File', và công cụ chuyển đổi không có gì để đọc. Cách khắc phục duy nhất là lưu lại file AI gốc với tùy chọn đó được bật.
Tối ưu hóa file SVG của bạn sau khi Chuyển đổi
Đừng vội gửi file SVG đó đi. Một file vừa mới xuất ra, ngay cả từ Illustrator, thường bị phình to với những đoạn code dư thừa làm tăng dung lượng mà không mang lại lợi ích gì về mặt hình ảnh. Đối với việc sử dụng trên web, việc chạy file SVG của bạn qua một công cụ tối ưu hóa là một bước không thể bỏ qua. **SVGO** là tiêu chuẩn ngành để tối ưu hóa SVG. Nó là một công cụ Node.js, nhưng engine của nó cung cấp sức mạnh cho công cụ web cực kỳ hữu ích tại jakearchibald.github.io/svgomg. Chỉ cần tải lên file SVG đã chuyển đổi của bạn, và SVGOMG sẽ cho bạn một bản xem trước trực tiếp và một thanh trượt để xem mức tiết kiệm kích thước file theo thời gian thực. Đối với hầu hết các tài sản, bạn có thể yên tâm bật các tùy chọn để loại bỏ bình luận, loại bỏ siêu dữ liệu, thu gọn các nhóm vô dụng, hợp nhất các đường path và loại bỏ các thuộc tính trống. Việc giảm kích thước file từ 30–60% không phải là hiếm. Chỉ cần cẩn thận với các tùy chọn như 'Remove IDs' nếu các lập trình viên của bạn có kế hoạch nhắm mục tiêu vào các yếu tố cụ thể bằng code. Tương tự, hãy tránh hợp nhất các đường path một cách quá đà nếu SVG đó sẽ được dùng cho hoạt ảnh; bạn không thể tạo hoạt ảnh cho các đường path đã được hợp nhất thành một khối duy nhất. Đối với các tài sản web sản phẩm, bạn cũng cần quyết định xem SVG sẽ được nhúng trực tiếp (inline, code được dán thẳng vào HTML) hay là file ngoài (liên kết qua thẻ `<img>` hoặc CSS). SVG inline rất tuyệt vì chúng có thể được tạo kiểu bằng file CSS chính của bạn, nhưng chúng làm tăng kích thước tài liệu HTML và không được lưu vào bộ nhớ đệm riêng. SVG ngoài được trình duyệt lưu vào bộ nhớ đệm nhưng khó thao tác hơn bằng CSS. Một lần kiểm tra cuối cùng: hãy xác thực file SVG cuối cùng của bạn bằng một công cụ như W3C Markup Validation Service. Bất kỳ ai đã từng mất cả tiếng đồng hồ để gỡ lỗi một file SVG hiển thị hoàn hảo trong Chrome nhưng lại là một thảm họa toàn tập trong Safari đều hiểu giá trị của bước này. Một lượt xác thực nhanh sẽ phát hiện ra code bị lỗi trước khi nó trở thành một sự cố khẩn cấp trên sản phẩm.
Lựa chọn Phương pháp Phù hợp với Tình huống của bạn
Vậy, cách tốt nhất để chuyển đổi một file AI sang SVG là gì? Điều đó phụ thuộc vào việc bạn là ai và bạn đang cố gắng hoàn thành điều gì. **Đối với nhà thiết kế chuyên nghiệp có Illustrator:** Hãy tự mình làm. Cách duy nhất để đảm bảo một bản dịch hoàn hảo của các tác phẩm phức tạp với hiệu ứng, gradient và font chữ tùy chỉnh là thực hiện công việc chuẩn bị—outline văn bản, bung các hiệu ứng, chuyển sang RGB—và sử dụng hộp thoại xuất SVG của chính Illustrator. Bạn có quyền kiểm soát tối cao; hãy tận dụng nó. **Đối với lập trình viên đang chạy deadline:** Nhà thiết kế của bạn vừa thả một file AI cho bạn rồi bỏ đi. Đừng hoảng sợ. Đối với các tài sản đơn giản như logo và icon, [công cụ AI sang SVG của CocoConvert](/convert/ai-to-svg) là con đường nhanh nhất của bạn. Nó nhanh chóng, không yêu cầu phần mềm, và hoàn thành công việc khi bạn không phải đối mặt với các tác phẩm quá phức tạp. **Đối với người đam mê mã nguồn mở hoặc người sáng tạo có ngân sách eo hẹp:** Bạn thấy mình thường xuyên làm việc này nhưng không muốn trả khoản thuế cho Adobe. Inkscape là câu trả lời của bạn. Đó là một giải pháp thay thế mạnh mẽ và miễn phí, nhưng bạn phải lưu ý đến yêu cầu về khả năng tương thích với PDF. Nếu các file nguồn của bạn không được lưu đúng cách, nó sẽ không hoạt động. Bất kể bạn chọn phương pháp nào, hãy luôn kiểm tra lại thành quả của mình. Mở file SVG cuối cùng trong ít nhất là Chrome và Firefox. Hãy chắc chắn rằng màu sắc đúng, văn bản sắc nét, và nó co giãn một cách mượt mà. Một lần kiểm tra trực quan trong hai phút sẽ phát hiện hầu hết các vấn đề chuyển đổi trước khi chúng trở thành vấn đề của người khác phải gỡ lỗi.