Cách chuyển đổi SVG sang PNG cho In ấn và Web
Tại sao lại phải chuyển đổi SVG sang PNG?
SVG (Scalable Vector Graphics) lẽ ra phải là định dạng hoàn hảo. Nó lưu trữ các hình dạng dưới dạng đường dẫn toán học, không phải pixel, vì vậy một logo có thể được phóng to từ một favicon nhỏ xíu đến một tấm biển quảng cáo khổng lồ mà không mất đi một chút độ nét nào. Vậy tại sao chúng ta lại phải bàn về việc chuyển đổi nó? Bởi vì trong thế giới thực, nhiều nền tảng đơn giản là không hỗ trợ nó. Hãy thử tải một file SVG lên thư viện media mặc định của WordPress và bạn sẽ gặp phải lỗi chặn bảo mật. Hầu hết các dịch vụ in theo yêu cầu như Printful và Redbubble đều đòi hỏi các định dạng raster—PNG hoặc JPEG—bởi vì phần mềm in công nghiệp của họ (RIP, hay Raster Image Processor) cần pixel, chứ không phải XML. Ngay cả các trình duyệt email và các phiên bản Microsoft Office cũ hơn cũng sẽ hiển thị SVG không nhất quán hoặc đơn giản là không hiển thị được. Đây là lúc PNG phát huy tác dụng. PNG cung cấp kênh alpha-transparency quan trọng, giữ cho nền logo của bạn trong suốt thay vì thêm một cái hộp trắng đằng sau nó. Nó cũng sử dụng nén không mất dữ liệu, vì vậy bạn không bị giảm chất lượng mỗi khi lưu file. Điểm yếu là gì? PNG phụ thuộc vào độ phân giải. Một khi bạn xuất nó ở chiều rộng 300 pixel, bạn không thể kéo nó ra 3000 pixel mà không tạo ra một mớ hỗn độn vỡ pixel. Đây là sự đánh đổi cơ bản, và điều đó có nghĩa là việc xác định đúng kích thước xuất ngay từ đầu là bước quan trọng nhất trong toàn bộ quá trình.
Hiểu về Độ phân giải: PPI, DPI và những con số cần dùng
Hãy làm rõ điều này trước tiên: độ phân giải là phần khó hiểu nhất trong cả quá trình này. Mọi người dùng lẫn lộn DPI (dots per inch - chấm trên inch) và PPI (pixels per inch - pixel trên inch) như thể chúng là một, nhưng thực tế không phải vậy. PPI là thứ bạn kiểm soát. Đó là mật độ pixel của hình ảnh kỹ thuật số bạn đang tạo ra. DPI là những gì một máy in vật lý thực hiện—nó đặt bao nhiêu chấm mực nhỏ lên giấy. Khi bạn xuất một file SVG sang PNG, bạn đang thiết lập PPI. Đối với đồ họa web, hãy quên điều này đi: quy tắc cũ '72 PPI cho web' đã là đồ cổ. Nó vô nghĩa. Điều quan trọng là kích thước pixel tuyệt đối. Hãy xuất đồ họa của bạn ở kích thước chính xác mà chúng sẽ được hiển thị. Nếu ô hình ảnh chính của bạn là 1200 × 600 pixel, hãy xuất một file PNG 1200 × 600 pixel. Đối với màn hình retina và HiDPI hiện đại, bạn cũng sẽ cần một phiên bản '2x'—trong trường hợp này là 2400 × 1200 pixel—để giữ cho mọi thứ sắc nét. In ấn là nơi những con số thực sự quan trọng. Tiêu chuẩn ngành là 300 PPI được tính toán ở kích thước vật lý cuối cùng. Nếu bạn đang thiết kế một danh thiếp tiêu chuẩn 3.5 × 2 inch, file PNG của bạn cần có kích thước tối thiểu là 1050 × 600 pixel (đó là 3.5 × 300 và 2 × 300). Đối với một poster A4 lớn, bạn sẽ cần một hình ảnh 2480 × 3508 pixel để đạt được mục tiêu 300 PPI đó. Ngoại lệ duy nhất là đối với các bản in khổ lớn được xem từ xa, như băng rôn, nơi bạn thường có thể dùng 150 PPI hoặc thậm chí 96 PPI là đủ vì khoảng cách làm cho các pixel hòa vào nhau. Sự linh hoạt này chính là điểm mấu chốt. File SVG gốc của bạn không phụ thuộc vào độ phân giải. Bạn có thể tạo ra một file PNG cho một biểu tượng nhỏ và một file khác cho một tấm poster khổng lồ từ cùng một file nguồn, mà không cần phải động đến bản gốc. Đó là một sức mạnh mà bạn không thể có được khi bắt đầu với một file JPEG độ phân giải thấp.
Cách chuyển đổi SVG sang PNG bằng CocoConvert
Vì CocoConvert hoạt động trên trình duyệt của bạn, bạn không cần phải cài đặt Illustrator hay Inkscape. Việc chuyển đổi được xử lý trên máy chủ của chúng tôi. Quá trình này rất đơn giản, nhưng đừng chỉ nhấn bừa nút 'Chuyển đổi' mà không kiểm tra các cài đặt trước. Sự kỳ diệu nằm ở các chi tiết. 1. Hãy truy cập trang [công cụ chuyển đổi SVG sang PNG](/convert/svg-to-png). 2. Kéo file SVG của bạn vào khu vực tải lên, hoặc sử dụng nút 'Chọn File'. Giới hạn file 50 MB là rất rộng rãi; hầu hết các file SVG đều rất nhỏ, thường dưới 1 MB. 3. Đây là bước quan trọng. Trước khi chuyển đổi, hãy mở bảng 'Cài đặt Đầu ra'. Đây là nơi bạn đặt chiều rộng mục tiêu tính bằng pixel. Sử dụng các con số bạn đã tính toán trước đó—ví dụ, 2480 px cho công việc in A4 ở 300 PPI. CocoConvert tự động duy trì tỷ lệ khung hình gốc. Chỉ sử dụng hộp kiểm 'Kích thước tùy chỉnh' nếu bạn cần ép buộc một chiều cao cụ thể và có khả năng làm biến dạng hình ảnh. 4. Nền mặc định là trong suốt, bảo toàn kênh alpha. Đây thường là điều bạn muốn. Nếu bạn cần một nền màu đặc (ví dụ, cho một quy trình làm việc chỉ chấp nhận file JPEG sau này), bạn có thể đặt màu ở đây thay vì phải sửa nó trong Photoshop sau. 5. Nhấp vào Chuyển đổi và tải file PNG mới của bạn. Một lưu ý nhanh về font chữ: CocoConvert hiển thị SVG bằng cách sử dụng một công cụ trình duyệt tiêu chuẩn. Điều này có nghĩa là nếu SVG của bạn sử dụng một font chữ đặc biệt thông qua quy tắc CSS `@font-face`, nó có thể không hiển thị chính xác trừ khi font chữ đó được nhúng bên trong chính file SVG. Bất cứ ai từng vật lộn với việc hiển thị font chữ trên web đều biết cơn đau đầu này. Cách khắc phục chung là chuyển văn bản của bạn thành đường viền (outline hay path) trong trình chỉnh sửa vector trước khi bạn xuất SVG. Trong Illustrator, đó là Type > Create Outlines. Trong Inkscape, đó là Path > Object to Path. Điều này biến văn bản thành hình dạng và đảm bảo nó sẽ trông giống hệt nhau ở mọi nơi, dù sao đây cũng là một thói quen tốt khi làm logo.
Chuyển đổi hàng loạt nhiều file SVG
Nếu bạn đang xử lý một thư viện biểu tượng, một bộ UI kit, hoặc một thư mục tài sản thương hiệu, việc chuyển đổi từng file một là điều không tưởng. CocoConvert cho phép bạn chuyển đổi hàng loạt. Chỉ cần chọn tất cả các file SVG của bạn cùng một lúc trong trình chọn file (giữ Shift hoặc Ctrl/Cmd) và tất cả chúng sẽ được xử lý với cùng một cài đặt đầu ra. Các file PNG đã chuyển đổi của bạn sẽ được gói trong một file lưu trữ ZIP duy nhất, gọn gàng. Có một vài điểm cần lưu ý về cách hoạt động khi chạy một tác vụ hàng loạt. Cài đặt chiều rộng bạn chọn sẽ được áp dụng cho mọi file trong lô, nhưng tỷ lệ khung hình của mỗi file riêng lẻ vẫn được bảo toàn. Ví dụ, nếu bạn có một biểu tượng vuông 24 × 24 px và một banner rộng 1200 × 300 px trong cùng một lô, và bạn đặt chiều rộng đầu ra là 512 px, biểu tượng sẽ trở thành một file PNG 512 × 512 px, và banner sẽ trở thành một file PNG 512 × 128 px. Đây gần như luôn là điều bạn muốn đối với các lô có kích thước hỗn hợp, nhưng bạn nên biết về nó trước khi xử lý một thư mục lớn. Ngoài ra, hãy chú ý đến tên file đầu vào của bạn. File ZIP đầu ra sẽ phản ánh chúng, chỉ thay đổi phần mở rộng thành .png. Nếu các file nguồn của bạn được đặt tên tốt như `icon-home.svg` và `icon-cart.svg`, đầu ra của bạn cũng sẽ được tổ chức tốt như vậy. Nếu chúng được đặt tên là `download(1).svg`, bạn sẽ có một mớ hỗn độn. Hãy dọn dẹp tên file của bạn trước khi tải lên. Hãy nói rõ về việc chọn đúng công cụ cho đúng việc. CocoConvert được xây dựng để mang lại sự tiện lợi, hoàn hảo cho việc chuyển đổi hàng chục hoặc thậm chí vài trăm file. Nếu bạn đang xem xét một thư mục với hơn 500 file cho một quy trình tự động hóa lớn, bạn nên dùng một công cụ dòng lệnh như Inkscape hoặc ImageMagick. Hãy sử dụng công cụ phù hợp với quy mô công việc của bạn.
Chuẩn bị SVG trước khi chuyển đổi: Những cạm bẫy thường gặp
File PNG cuối cùng của bạn chỉ tốt bằng file SVG nguồn. Đó là vấn đề kinh điển 'rác vào, rác ra'. Nếu việc chuyển đổi của bạn không ổn, vấn đề gần như luôn ẩn nấp bên trong chính mã SVG. Dưới đây là những thủ phạm phổ biến nhất cần điều tra. Thiếu các mảnh ghép hoặc có các hộp trắng kỳ lạ? Điều này thường chỉ ra các clipping path hoặc mask bị hỏng. SVG có thể sử dụng một hình dạng để che một hình dạng khác, nhưng nếu tham chiếu giữa mask và hình dạng bị hỏng (thường do xuất từ một ứng dụng và chỉnh sửa trong một ứng dụng khác), trình kết xuất sẽ bị bối rối. Nếu bạn thấy điều này, hãy mở SVG trong một trình soạn thảo văn bản và tìm kiếm các phần tử `clipPath` hoặc `mask` có tham chiếu ID không hợp lệ. Đầu ra sai kích thước? Thủ phạm có thể là do thiếu thuộc tính `viewBox`. Một file SVG được định dạng tốt cần có một `viewBox` (ví dụ `viewBox='0 0 100 100'`) để xác định hệ tọa độ nội bộ và cho phép nó co giãn đúng cách. Một số công cụ xuất SVG chỉ với các thuộc tính `width` và `height`, điều này có thể khiến các trình kết xuất bỏ qua kích thước đầu ra bạn yêu cầu và chỉ sử dụng kích thước pixel thực của file. Cách khắc phục là chỉnh sửa SVG và thêm một `viewBox` khớp với kích thước của tài liệu. Các phần bị vỡ pixel trong một file vector? SVG của bạn có thể chứa một hình ảnh raster được nhúng. Đúng vậy, SVG có thể chứa các file JPEG hoặc PNG ẩn bên trong thẻ `<image>`. Ví dụ, nếu một logo có một họa tiết nhiếp ảnh, họa tiết đó sẽ chỉ sắc nét bằng hình ảnh được nhúng ban đầu. Việc phóng to toàn bộ file lên chiều rộng 4000 pixel sẽ không thần kỳ làm cho phần đó hết vỡ pixel được. Sai màu khi in? Hãy nhớ rằng SVG và PNG đều là các định dạng RGB, mặc định sống trong không gian màu sRGB. PNG không thể lưu trữ dữ liệu màu CMYK. Nếu máy in của bạn tuyệt đối yêu cầu một file CMYK, bạn không thể làm được điều đó bằng cách chuyển đổi sang PNG. Bạn sẽ cần quay lại trình chỉnh sửa vector của mình và xuất ra một định dạng gốc CMYK như TIFF hoặc một file PDF được cấu hình đúng cách.
Tối ưu hóa PNG sau khi chuyển đổi
Đừng sốc nếu file PNG đẹp, độ phân giải cao bạn vừa tạo ra có dung lượng khổng lồ. Một file PNG sẵn sàng để in từ một SVG phức tạp, như một file 2480 × 3508 px có gradient, có thể dễ dàng vượt quá 15–25 MB. Đối với web, điều đó là không thể chấp nhận được. Đối với in ấn, kích thước ít đáng lo ngại hơn, nhưng nhiều dịch vụ in có giới hạn tải lên, vì vậy tốt nhất là giữ file dưới 10 MB nếu có thể. Đối với việc phân phối trên web, việc tối ưu hóa không phải là một lựa chọn. Bạn phải chạy các file PNG của mình qua một công cụ tối ưu hóa không mất dữ liệu. Các công cụ như Squoosh trên trình duyệt, tiện ích dòng lệnh `pngquant`, hoặc dịch vụ web TinyPNG có thể giảm dung lượng file từ 40–70% mà không có thay đổi nào về chất lượng có thể nhìn thấy được. Chúng hoạt động bằng cách giảm bảng màu một cách thông minh và áp dụng các phương pháp nén hiệu quả hơn. Một file PNG 2 MB thường có thể giảm xuống dưới 300 KB bằng cách sử dụng `pngquant --quality=65-80 yourfile.png`. Bạn cũng nên tự hỏi liệu PNG có phải là định dạng cuối cùng tốt nhất cho web hay không. Nếu hình ảnh của bạn không cần độ trong suốt, chuyển nó sang WebP là một bước đi thông minh. WebP được hỗ trợ rộng rãi trên các trình duyệt hiện đại và thường tạo ra các file nhỏ hơn 25–35% so với một file PNG tương đương. Đối với các tài sản chỉ dành cho web, bạn có thể chuyển thẳng từ SVG sang WebP với CocoConvert và bỏ qua hoàn toàn bước PNG trung gian. Đối với in ấn, hãy làm ngược lại hoàn toàn: không tối ưu hóa. Gửi file PNG độ phân giải đầy đủ, không nén mà bạn đã tải xuống trực tiếp đến dịch vụ in của bạn. Một số dịch vụ, như Printful, đặc biệt cảnh báo không nên tải lên các file PNG đã được nén. Các lỗi nén mất dữ liệu hoàn toàn vô hình trên màn hình của bạn có thể trở nên rõ ràng một cách khó chịu khi được in ra.
Tham khảo nhanh: Cài đặt theo từng trường hợp sử dụng
Bạn không cần phải tính toán mỗi lần chuyển đổi file. Hãy đánh dấu trang này hoặc giữ nó bên mình như một tờ giấy ghi chú nhanh cho các cài đặt xuất phổ biến nhất. Favicon (web): Xuất ở kích thước 512 × 512 px. Các trình tạo favicon hiện đại sẽ lấy một file PNG lớn này và tạo ra tất cả các kích thước nhỏ hơn (16, 32, 180, 192 px) cho bạn. Ảnh đại diện mạng xã hội: Sử dụng 800 × 800 px làm kích thước tối thiểu. Mặc dù các nền tảng như Twitter/X và Facebook hiển thị chúng nhỏ hơn, việc tải lên một file nguồn lớn hơn sẽ cung cấp cho thuật toán nén của họ dữ liệu tốt hơn, giúp hình ảnh cuối cùng sắc nét hơn nhiều. Ảnh Open Graph / chia sẻ trên mạng xã hội: 1200 × 630 px. Đây là tỷ lệ khung hình tiêu chuẩn được Facebook khuyến nghị và hiện được hầu hết mọi người sử dụng. Danh thiếp (in, 3.5 × 2 inch @ 300 PPI): 1050 × 600 px. Nếu máy in của bạn yêu cầu vùng chừa xén (bleed), hãy thêm 0.125 inch vào mỗi cạnh, làm cho tài liệu của bạn có kích thước 1125 × 675 px (thêm tổng cộng 75 pixel cho mỗi chiều). Poster A4 (in, 300 PPI): 2480 × 3508 px. Poster khổ Letter (in, 300 PPI): 2550 × 3300 px. Vùng in áo thun (12 × 14 in @ 300 PPI): Kích thước phổ biến là 3600 × 4200 px. Đồ họa web Retina (2x): Gấp đôi kích thước được xác định trong CSS của bạn. Một hình ảnh được định kiểu là 600 × 400 px cần một file PNG nguồn 1200 × 800 px. Tất cả các giá trị pixel này có thể được nhập trực tiếp vào trường chiều rộng trên trang [công cụ chuyển đổi SVG sang PNG](/convert/svg-to-png). Đối với các hình ảnh không phải hình vuông mà bạn cần xác định cả hai chiều, chỉ cần sử dụng nút gạt kích thước tùy chỉnh. Mặc dù danh sách này là một điểm khởi đầu tuyệt vời, nguồn thông tin chính xác nhất luôn là hướng dẫn của dịch vụ in cụ thể. Redbubble, Printful, Gooten, và các dịch vụ khác đều công bố các yêu cầu chi tiết về pixel và DPI cho mọi sản phẩm họ bán. Luôn kiểm tra thông số kỹ thuật của họ trước khi in số lượng lớn.