SVG lưu trữ một hình ảnh dưới dạng hình dạng toán học có thể chia tỷ lệ theo bất kỳ kích thước nào mà không bị mờ, trong khi PNG lưu trữ một lưới pixel cố định. Sự khác biệt duy nhất đó quyết định sự lựa chọn: SVG cho logo, biểu tượng và đồ họa phẳng phải chia tỷ lệ, PNG cho ảnh và chi tiết phức tạp. SVG (Đồ họa vectơ có thể mở rộng) là định dạng dựa trên XML được W3C chuẩn hóa vào năm 2001; PNG (Đồ họa mạng di động) là định dạng raster từ năm 1996. Sự so sánh này giải thích vector so với raster, cách mỗi loại xử lý tỷ lệ và kích thước tệp, độ trong suốt, chỉnh sửa, hỗ trợ trình duyệt và quy tắc rõ ràng để sử dụng ở đâu.

Về tổng thể, không có định dạng nào tốt hơn vì chúng giải quyết được các vấn đề khác nhau. SVG là vô địch đối với đồ họa xuất hiện ở nhiều kích cỡ; PNG là lựa chọn hợp lý duy nhất cho ảnh chụp và hình ảnh chi tiết. Biết hình ảnh của bạn thuộc nhóm nào sẽ trả lời câu hỏi trước khi bạn mở trình chuyển đổi.

Vector so với raster

Hai định dạng mô tả hình ảnh theo những cách trái ngược nhau. SVG liệt kê các hướng dẫn như vẽ một vòng tròn ở đây, tô màu đó vào đường dẫn này để trình duyệt hiển thị nó ở mọi kích thước. PNG lưu trữ màu sắc thực tế của mỗi pixel trong một mạng lưới, giống như một bức tranh khảm. Vector phù hợp với các hình dạng có cạnh rõ ràng; raster phù hợp với những bức ảnh, trong đó hàng triệu pixel độc đáo không có hình dạng để mô tả. Đây là gốc rễ của mọi sự khác biệt thực tế giữa chúng.

Một sự tương tự giúp. Vector là một công thức: hãy làm theo nó ở bất kỳ quy mô nào và bạn sẽ có được món ăn tương tự. Raster là một bức ảnh của món ăn đã hoàn thành: phóng to nó và bạn chỉ thấy các pixel lớn hơn, mờ hơn. Công thức vẫn hoàn hảo ở mọi kích cỡ; bức ảnh thì không.

Chia tỷ lệ: SVG thắng

Mở rộng quy mô là lợi thế quyết định của SVG. Logo SVG vẫn còn sắc như dao cạo từ favicon 16 pixel đến biển quảng cáo, bởi vì toán học tính toán lại ở mỗi kích thước. PNG sẽ làm mờ khoảnh khắc bạn phóng to nó vượt quá độ phân giải của nó, vì phần mềm phải tạo ra các pixel không bao giờ được chụp. Đối với bất kỳ nội dung nào được hiển thị ở nhiều kích cỡ, SVG phục vụ một tệp trong đó PNG cần xuất nhiều lần ở các độ phân giải khác nhau.

Điều này quan trọng hơn nó có vẻ. Màn hình hiện đại có nhiều loại từ điện thoại nhỏ đến màn hình 4K lớn và tất cả chúng đều phải có thiết kế sắc nét. SVG xử lý mọi màn hình từ một tệp duy nhất. PNG cần một phiên bản nhỏ, một phiên bản lớn và thường là phiên bản retina, giúp nhân rộng nội dung bạn quản lý.

Kích thước tệp

Kích thước tệp phụ thuộc vào độ phức tạp chứ không phải kích thước, điều này trái ngược với PNG. Một logo hai màu đơn giản vì SVG có thể nặng vài kilobyte và giữ nguyên kích thước đó ở mọi tỷ lệ, thường nhỏ hơn PNG. Tuy nhiên, kích thước SVG tăng theo số lượng hình dạng, do đó, một bức ảnh được theo dõi sẽ lớn hơn nhiều lần so với PNG và hiển thị chậm. Kích thước PNG tăng lên cùng với số lượng pixel, do đó, một bức ảnh lớn sẽ nặng nề.

Bài học là phải kết hợp hình thức với nội dung. Đối với biểu tượng phẳng, SVG vừa nhỏ hơn vừa có khả năng mở rộng vô hạn. Để có một bức ảnh chi tiết, SVG bong bóng thành hàng nghìn đường dẫn trong khi PNG vẫn giữ nguyên kích thước có thể dự đoán được. Độ phức tạp chứ không phải tên định dạng sẽ quyết định trọng lượng.

Minh bạch

Cả hai định dạng đều hỗ trợ tính minh bạch, vì vậy cả hai định dạng đều không thắng ở đây. SVG xử lý nó một cách tự nhiên, vì một hình dạng có thể đơn giản là không có phần tô màu phía sau nó và PNG mang một kênh alpha đầy đủ cho sự mịn màng, trong suốt một phần. Logo vẫn có thể nhìn xuyên qua bất kỳ nền nào ở cả hai định dạng. Sự khác biệt duy nhất là độ trong suốt của SVG là một phần mô tả hình dạng của nó, trong khi PNG lưu trữ giá trị độ mờ cho mỗi pixel.

Chỉnh sửa và linh hoạt

Chỉnh sửa ủng hộ SVG cho đồ họa. Vì SVG là văn bản mô tả hình dạng nên đường dẫn của nó tô màu lại và tạo hoạt ảnh bằng CSSvà mọi văn bản bên trong vẫn là văn bản thực mà trình đọc màn hình có thể đọc và công cụ tìm kiếm có thể lập chỉ mục. PNG là pixel cố định, vì vậy việc thay đổi màu có nghĩa là xuất lại từ nguồn. Đối với một logo bạn sẽ thay đổi kiểu dáng, chủ đề hoặc hoạt ảnh, SVG linh hoạt hơn nhiều.

Hỗ trợ trình duyệt

Sự hỗ trợ mang tính phổ quát cho cả hai nên nó không quyết định sự lựa chọn. Mọi trình duyệt đều đọc SVG và PNG mà không cần plugin và cả hai đều đã có từ nhiều năm nay. Sự khác biệt thực tế là ở bối cảnh: SVG thuộc về các trang web và giao diện ứng dụng, trong khi PNG cũng hoạt động trong email, tài liệu và phần mềm cũ hơn có thể không chấp nhận SVG. Đối với một trang web, cả hai đều an toàn; đối với logo email, PNG là lựa chọn đáng tin cậy hơn.

Khi nào nên sử dụng mỗi

Quy tắc rất đơn giản và đáng ghi nhớ:

Sử dụng SVG dành cho logo, biểu tượng, biểu đồ, sơ đồ và nghệ thuật đường nét phải chia tỷ lệ và luôn sắc nét.
Sử dụng PNG dành cho ảnh chụp màn hình, đồ họa chi tiết và bất kỳ hình ảnh nào có viền mềm hoặc nhiều màu sắc.
Không sử dụng cho ảnh về lâu dài: JPG hoặc WebP nén ảnh nhỏ hơn nhiều so với PNG.

Giữ tệp vectơ chính cho nội dung thương hiệu và xuất bản sao PNG ở nơi SVG không được chấp nhận, chẳng hạn như email hoặc một số ứng dụng tải lên.

SVG và thiết kế đáp ứng

Thiết kế đáp ứng là nơi SVG kiếm được tiền. Một trang web hiện đại phải trông sắc nét trên điện thoại, máy tính xách tay và màn hình 4K và SVG xử lý cả ba điều này từ một tệp ở bất kỳ mật độ pixel nào. Không cần xuất riêng biệt nhỏ, lớn và retina cũng như không bị mờ khi trình duyệt tăng tỷ lệ hình ảnh cho màn hình có độ phân giải cao. Vector chỉ đơn giản là tự vẽ lại một cách sắc nét ở bất kỳ kích thước nào mà bố cục yêu cầu.

PNG không thể phù hợp với điều này. Để luôn sắc nét trên màn hình retina, PNG phải được xuất ở độ phân giải gấp đôi, giúp tăng gấp đôi kích thước tệp của nó và thậm chí sau đó nó sẽ mờ đi nếu bị kéo dài hơn mức đó. Việc quản lý nhiều kích thước PNG cho bố cục đáp ứng là một chi phí bảo trì thực sự mà một SVG sẽ loại bỏ.

Khi PNG đánh bại SVG trong thực tế

PNG thắng trong nhiều trường hợp hơn danh tiếng của nó cho thấy. Bất kỳ hình ảnh nào với chi tiết ảnh, độ chuyển màu, họa tiết hoặc bóng mềm thuộc về PNG, vì việc truy tìm nó tới SVG sẽ tạo ra một mớ hỗn độn xấu xí, cồng kềnh. Ảnh chụp màn hình là lãnh thổ PNG vì chúng kết hợp văn bản với chi tiết giao diện không được vector hóa. Và một hình minh họa phức tạp với hàng trăm màu sẽ nhỏ hơn và rõ ràng hơn ở dạng PNG so với một SVG khổng lồ gồm hàng nghìn đường dẫn.

Sai lầm mà mọi người mắc phải là cho rằng SVG luôn là sự lựa chọn hiện đại, ưu việt. Nó chỉ vượt trội hơn đối với đồ họa phẳng, có viền cứng. Đẩy một hình ảnh chi tiết vào SVG và bạn sẽ có được một tệp lớn hơn hiển thị chậm, trái ngược với những gì bạn mong muốn.

Lưu ý về SVG và bảo mật

SVG có tính đến PNG thì không: vì nó là mã, nên tệp SVG có thể chứa các tập lệnh. Về lý thuyết, một SVG độc hại được tải lên một trang web có thể chạy JavaScript khi được hiển thị. Đây là lý do tại sao nhiều nền tảng vệ sinh hoặc từ chối các SVG do người dùng tải lên và tại sao bạn chỉ nên tin cậy các SVG từ một nguồn đã biết. PNG, là dữ liệu pixel thuần túy, không có rủi ro như vậy. Đối với logo và biểu tượng của riêng bạn, đây không phải là vấn đề nhưng nó giải thích tại sao một số biểu mẫu tải lên chấp nhận PNG chứ không phải SVG.

Những lỗi thường gặp khi chuyển đổi sang SVG

Hai lỗi làm hỏng hầu hết các chuyển đổi PNG sang SVG. Đầu tiên là đang cố gắng vector hóa một bức ảnh, tạo ra hàng nghìn đường dẫn và một tệp lớn hơn tệp gốc. Thứ hai là để lại bitmap gốc được nhúng bên trong SVG sau một dấu vết tự động, vì vậy tệp thực sự là PNG trong trình bao bọc SVG, không thu được gì. Chỉ vẽ đồ họa phẳng và đối với biểu tượng thương hiệu, hãy vẽ lại biểu tượng đó trong trình chỉnh sửa vectơ thay vì tin tưởng vào dấu vết tự động, mang lại hình học rõ ràng và tệp nhỏ nhất.

Cách chuyển đổi PNG sang SVG

Chuyển đổi PNG sang SVG có nghĩa là vector hóa: dò tìm các pixel thành các đường dẫn. Điều này làm việc cho logo, biểu tượng và nghệ thuật đường nét phẳngvà không thành công đối với những bức ảnh không có hình dạng rõ ràng để theo dõi. của chúng tôi Công cụ chuyển đổi PNG sang SVG theo dõi đồ họa đơn giản trong trình duyệt của bạn, vì vậy không có gì tải lên. Đối với biểu trưng thương hiệu mà bạn sở hữu, việc vẽ lại biểu tượng đó trong trình chỉnh sửa vectơ sẽ tạo ra kết quả rõ ràng hơn bất kỳ dấu vết tự động nào. Đối với ảnh, hãy sử dụng Công cụ chuyển đổi PNG sang JPG thay vào đó.

Câu hỏi thường gặp

SVG có tốt cho thiết kế đáp ứng không?

Vâng, lý tưởng. Một SVG vẫn sắc nét trên mọi màn hình và mật độ pixel, loại bỏ nhu cầu xuất PNG nhỏ, lớn và retina riêng biệt.

Tại sao một số trang web từ chối tải lên SVG?

Bởi vì một SVG có thể chứa các tập lệnh, không giống như PNG. Nền tảng vệ sinh hoặc chặn SVG của người dùng để bảo mật, đó là lý do tại sao một số biểu mẫu chỉ chấp nhận PNG.

Tại sao SVG được chuyển đổi của tôi lớn hơn PNG?

Bạn có thể theo dõi một bức ảnh hoặc để lại bitmap được nhúng. Chỉ vector hóa đồ họa phẳng và xóa hình ảnh gốc sau khi theo dõi để SVG giữ đường dẫn chứ không phải pixel.

SVG có tốt hơn PNG không?

Đối với đồ họa, vâng. Chia tỷ lệ SVG không bị mờ ở kích thước nhỏ. Đối với ảnh, PNG thắng vì ảnh không có hình dạng rõ ràng để lưu trữ dưới dạng vectơ.

Sự khác biệt giữa SVG và PNG là gì?

SVG là toán học có thể mở rộng; PNG là một lưới pixel cố định. SVG vẫn sắc nét ở mọi kích thước, trong khi PNG mờ đi khi phóng to vượt quá độ phân giải của nó.

Tôi có thể sử dụng SVG cho ảnh không?

Không, không hữu ích. Những bức ảnh có hàng triệu màu sắc và các góc cạnh mềm mại không có hình dạng để theo dõi, vì vậy ảnh SVG sẽ lớn và lộn xộn. Sử dụng PNG hoặc JPG.

Cái nào nhỏ hơn, SVG hay PNG?

Đối với đồ họa đơn giản, SVG. Logo hai màu nặng vài kilobyte dưới dạng SVG ở bất kỳ kích thước nào. Đối với ảnh, PNG nhỏ hơn vì bong bóng ảnh có dấu vết.

SVG có giữ được tính minh bạch không?

Đúng. SVG hỗ trợ tính minh bạch nguyên bản, giống như kênh alpha của PNG, do đó, biểu trưng vẫn có thể nhìn xuyên qua mọi nền.

Có phải tất cả các trình duyệt đều hỗ trợ SVG không?

Đúng. Mọi trình duyệt hiện đại đều đọc SVG và PNG không có plugin. SVG phù hợp với các trang web, trong khi PNG cũng hoạt động trong email và phần mềm cũ hơn.

Làm cách nào để chuyển đổi PNG sang SVG?

Theo dõi nó. Trình vectorizer theo dõi PNG phẳng vào các đường dẫn SVG, hoạt động với biểu tượng và biểu tượng nhưng không hoạt động với ảnh.

Tôi có thể chỉnh sửa SVG sau khi tạo nó không?

Đúng. Đường dẫn SVG mở trong bất kỳ trình chỉnh sửa vector nào và tô màu lại hoặc tạo hoạt ảnh bằng CSS, vì tệp là văn bản mô tả hình dạng chứ không phải pixel cố định.

Tôi nên sử dụng định dạng nào cho logo trang web?

SVG. Nó chia tỷ lệ sắc nét trên mọi màn hình từ một tệpvà văn bản của nó vẫn có thể đọc được đối với các công cụ tìm kiếm. Giữ PNG cho email không chấp nhận SVG.

PNG hay SVG tốt hơn cho một biểu tượng?

SVG, để mở rộng quy mô. Biểu tượng SVG vẫn sắc nét ở mọi kích thước, trong khi biểu tượng PNG cần xuất nhiều lần và bị mờ khi phóng to.

SVG và PNG giải quyết các vấn đề khác nhau: SVG lưu trữ phép toán có thể mở rộng và luôn sắc nét ở mọi kích thước, trong khi PNG lưu trữ một lưới pixel cố định sẽ mờ khi phóng to. SVG giành chiến thắng cho các logo, biểu tượng và nghệ thuật đường nét phải chia tỷ lệ, chỉnh sửa và tạo hoạt ảnh bằng CSS và phục vụ mọi màn hình từ một tệp. PNG giành chiến thắng ở các ảnh chụp, ảnh chụp màn hình và hình ảnh chi tiết, đồng thời hoạt động ở những nơi SVG không được chấp nhận. Khớp định dạng với nội dung và sử dụng các trình chuyển đổi ở trên của chúng tôi để vector hóa một đồ họa đơn giản hoặc xử lý ảnh raster, tất cả đều có trong trình duyệt của bạn.

Tham khảo nhanh: SVG hoặc PNG

Tiếp cận với SVG khi hình ảnh là logo, biểu tượng, biểu đồ hoặc bản vẽ đường thẳng phải chia tỷ lệ, khi bạn muốn đổi màu hoặc tạo hoạt ảnh cho nó bằng CSS hoặc khi một tệp sẽ phục vụ mọi kích thước màn hình. Tiếp cận với PNG khi hình ảnh là ảnh chụp màn hình, đồ họa chi tiết hoặc bất kỳ thứ gì có chuyển màu, họa tiết hoặc cạnh mềm và khi bạn cần nó để hoạt động trong email hoặc phần mềm cũ hơn từ chối SVG. Đường phân chia rất đơn giản: đồ họa phẳng, có viền cứng chuyển sang dạng vector, mọi thứ chi tiết đều chuyển sang dạng raster.

Giữ một bậc thầy vector

Đối với bất kỳ nội dung thương hiệu nào, hãy giữ bản gốc dưới dạng vector chính và xuất bản sao raster nếu cần. Một logo SVG có thể tạo ra một favicon, một hình đại diện xã hội và một tệp in, mỗi tệp được xuất sang đúng định dạng và kích thước theo yêu cầu. Làm việc theo cách khác, từ raster PNG trở lại vector, có nghĩa là truy tìm, không bao giờ khôi phục hoàn toàn hình học rõ ràng. Vì vậy, hãy lưu trữ bản gốc dưới dạng SVG khi bạn có thể và coi các bản xuất PNG là bản sao dùng một lần mà bạn có thể tạo lại bất kỳ lúc nào.

Điểm mấu chốt

SVG và PNG không phải là đối thủ của nhau như các chuyên gia. Các vectơ mô tả hình dạng và tỷ lệ mãi mãi, vì vậy logo và biểu tượng thuộc về SVG. Pixel ghi lại chi tiết nên ảnh chụp và ảnh chụp màn hình thuộc về PNG. Chọn bằng cách đặt một câu hỏi: hình ảnh này có hình dạng phẳng, rõ ràng hay chi tiết ảnh đẹp không? Câu trả lời đó quyết định định dạng mọi lúc và việc giữ bản gốc vectơ có nghĩa là bạn luôn có thể xuất bản sao raster mà bạn cần.