SVG là gì? Giải thích về Đồ họa Vector có thể mở rộng
Nói ngắn gọn: SVG là tệp văn bản vẽ hình ảnh
SVG là viết tắt của Scalable Vector Graphics. Về bản chất, một tệp SVG chỉ là một tệp văn bản. Nếu bạn mở nó trong trình soạn thảo văn bản, bạn sẽ không thấy một lưới pixel như trong JPEG hay PNG; thay vào đó, bạn sẽ thấy mã XML mô tả cách vẽ các hình dạng. Đó là một tập hợp các lệnh toán học – các đường dẫn được định nghĩa bằng đường cong, hình tròn có tâm và bán kính, hình chữ nhật có chiều rộng và chiều cao – cho trình duyệt hoặc trình chỉnh sửa ảnh biết cách hiển thị một bức ảnh. Một logo đơn giản có thể chỉ là 2 KB văn bản. Điều kỳ diệu thực sự nằm ở cái tên: 'scalable' (có thể mở rộng). Vì tệp này mô tả hình học thay vì một lưới pixel cố định, bạn có thể sử dụng cùng một tệp SVG cho một favicon nhỏ 16×16 pixel và một biển quảng cáo rộng 3 mét mà không hề mất chất lượng. Thử kéo giãn một tệp PNG lên gấp 10 lần kích thước ban đầu và bạn sẽ nhận được một mớ hình ảnh mờ nhòe. Một tệp SVG được kéo giãn lên gấp 10 lần kích thước vẫn trông sắc nét hoàn hảo, y hệt bản gốc. SVG là một tiêu chuẩn mở từ W3C, với phiên bản ổn định hiện tại là SVG 1.1 (được xuất bản từ năm 2011) và SVG 2 vẫn đang được phát triển. Tin tốt là bạn không cần phải lo lắng về khả năng tương thích. Mọi trình duyệt hiện đại – Chrome, Firefox, Safari, Edge – đều xử lý SVG một cách tự nhiên. Đây chính là lý do tại sao các nhà phát triển web đã áp dụng nó cho mọi thứ, từ biểu tượng, logo cho đến biểu đồ và các minh họa phức tạp.
SVG khác với các định dạng Raster (PNG, JPEG, WebP) như thế nào
Các hình ảnh raster như PNG, JPEG và WebP về cơ bản là những lưới ô vuông màu khổng lồ. Một tệp PNG 1920×1080 lưu trữ giá trị màu cụ thể cho mỗi trong số 2.073.600 pixel của nó. Tệp không có khái niệm về 'hình tròn' hay 'đường thẳng'; nó chỉ biết rằng pixel tại tọa độ (142, 87) là một sắc thái xanh lam cụ thể. Phương pháp này hoàn hảo cho ảnh chụp, nơi có hàng triệu biến thể màu sắc tinh tế mà không công thức nào có thể mô tả hiệu quả được. Các định dạng vector như SVG lại hoạt động theo hướng ngược lại. Một tệp SVG không lưu trữ pixel. Thay vào đó, nó lưu trữ một lệnh như 'vẽ một hình tròn tô màu tại tọa độ (150, 90) với bán kính 40 pixel và màu tô là #0057FF'. Trình duyệt hoặc trình xem ảnh sẽ thực hiện việc tính toán pixel nào cần tô màu khi hình ảnh được hiển thị. Điều này làm cho tệp hoàn toàn không phụ thuộc vào độ phân giải. Sự khác biệt này mang lại những hệ quả thực tế rất lớn. Để sử dụng logo công ty trên các phương tiện khác nhau, bạn có thể cần một tệp PNG 32px cho favicon, một phiên bản 200px cho tiêu đề trang web, và một phiên bản 2000px cho tài liệu quảng cáo in ấn. Với SVG, một tệp duy nhất có thể xử lý tất cả các trường hợp sử dụng đó một cách hoàn hảo. Mặt khác, cố gắng biểu diễn một bức ảnh ngọn núi dưới dạng SVG sẽ là một thảm họa. Tệp sẽ cần hàng triệu phần tử đường dẫn riêng lẻ để chỉ có thể xấp xỉ chi tiết, dẫn đến một tệp khổng lồ mà trông vẫn tệ hơn một tệp JPEG chỉ bằng một phần mười kích thước của nó. Đừng tin bất cứ ai nói với bạn rằng SVG *luôn luôn* nhỏ hơn. Kích thước tệp hoàn toàn phụ thuộc vào độ phức tạp. Một biểu tượng hai màu đơn giản có thể nhỏ hơn khi là SVG 800 byte so với PNG 4 KB. Nhưng một hình minh họa chi tiết với nhiều gradient và hàng trăm đường dẫn có thể dễ dàng là 200 KB dưới dạng SVG, trong khi phiên bản PNG nén chỉ là 80 KB. Việc chọn đúng định dạng đòi hỏi phải biết nội dung của hình ảnh.
Bên trong tệp SVG thực sự chứa gì: Cùng xem xét
Vì SVG chỉ là XML, bạn không cần bất kỳ phần mềm đặc biệt nào để xem bên trong nó. Dưới đây là một tệp SVG hoàn chỉnh vẽ một hình tròn màu đỏ với đường viền màu xanh dày: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="50" cy="50" r="40" fill="#E63946" stroke="#1D3557" stroke-width="4"/></svg> Toàn bộ hình ảnh đó chỉ là 141 ký tự văn bản. Thuộc tính `viewBox` thiết lập khung vẽ của chúng ta – một hệ thống tọa độ 100×100. Các thuộc tính `cx`, `cy` và `r` định nghĩa vị trí và kích thước của hình tròn. Bạn có thể sao chép và dán mã này trực tiếp vào một tệp HTML, và trình duyệt web của bạn sẽ hiển thị hình ảnh một cách hoàn hảo. Tất nhiên, các tệp SVG trong thực tế thường phức tạp hơn. Các công cụ thiết kế như Adobe Illustrator hay Figma nổi tiếng là xuất ra các tệp cồng kềnh chứa đầy metadata, các thẻ dành riêng cho trình chỉnh sửa, và đôi khi thậm chí cả hình ảnh raster ẩn cho các hiệu ứng không thể biểu diễn dưới dạng vector. Một tệp SVG được xuất với cài đặt mặc định có thể lớn hơn 15–20 lần so với cùng tệp đó sau khi đã được tối ưu hóa. Sức mạnh thực sự của SVG nằm ở phần tử `<path>`. Thuộc tính `d` của một đường dẫn chứa một ngôn ngữ nhỏ của riêng nó, với các lệnh để di chuyển bút ảo (`M`), vẽ đường thẳng (`L`), tạo đường cong phức tạp (`C`) và đóng hình dạng (`Z`). Một phần tử đường dẫn đơn lẻ, dài có thể mô tả bất kỳ hình dạng nào có thể tưởng tượng được, từ đường viền của một quốc gia trên bản đồ cho đến một ký tự tùy chỉnh. Đây là cách đồ họa vector đạt được những đường cong mượt mà đặc trưng mà không bao giờ bị vỡ hạt, cho dù bạn phóng to đến đâu.
Các trường hợp sử dụng phổ biến: Nơi SVG vượt trội và nơi nó không
Logo là hình mẫu lý tưởng cho SVG. Một biểu tượng thương hiệu duy nhất cần phải sắc nét trên tiêu đề trang web 120px, một danh thiếp 0.75 inch, và một banner triển lãm thương mại nhiều foot. Sử dụng một tệp SVG gốc duy nhất hợp lý và đáng tin cậy hơn vô cùng so với việc cố gắng quản lý một thư mục các tệp raster cho mọi độ phân giải có thể. Biểu tượng cũng là một trường hợp sử dụng hoàn hảo khác. Các bộ biểu tượng hiện đại như Font Awesome được phân phối dưới dạng SVG. Với kích thước nhỏ 24×24 pixel, một biểu tượng SVG có thể sắc nét như một tệp PNG hoàn hảo từng pixel, nhưng nó cũng có thể mở rộng đẹp mắt lên 48px hoặc 96px cho màn hình DPI cao trên điện thoại và máy tính xách tay hiện đại, tất cả đều từ cùng một tệp nguồn. Đây là một trường hợp sử dụng quan trọng mà mọi người thường quên: trực quan hóa dữ liệu. Khi bạn thấy một biểu đồ tương tác trên một trang tin tức, rất có thể đó là SVG. Các thư viện như D3.js xây dựng các hình ảnh trực quan này một cách động trong trình duyệt. Mỗi thanh trong biểu đồ cột, mỗi điểm trên biểu đồ phân tán và mỗi vùng trên bản đồ là một phần tử SVG riêng biệt có thể được tạo kiểu bằng CSS và thao tác bằng JavaScript. Bây giờ, hãy nói về thực tế: đừng sử dụng SVG cho ảnh chụp. Các tông màu liên tục và kết cấu phức tạp của một bức ảnh không thể được mô tả hiệu quả bằng các đường dẫn vector. Mọi nỗ lực 'chuyển đổi' một bức ảnh thành SVG sẽ tạo ra một tệp khổng lồ trông giống như một dự án nghệ thuật vector hóa rẻ tiền, chứ không phải một bức ảnh. Đối với bất kỳ thứ gì liên quan đến ảnh chụp, hãy kiên trì với JPEG, WebP hoặc AVIF. Chúng sẽ cung cấp cho bạn các tệp nhỏ hơn nhiều và chất lượng vượt trội hơn hẳn. Ngoài ra, hãy cẩn thận với SVG trong các quy trình in ấn chuyên nghiệp. Thế giới in ấn vẫn xoay quanh màu CMYK, màu spot và cài đặt overprint, và các định dạng như PDF và EPS có hỗ trợ sâu hơn, đáng tin cậy hơn nhiều cho các tính năng này. Không gian màu gốc của SVG là RGB, và mặc dù bạn có thể nhúng các cấu hình CMYK, nhưng việc hỗ trợ trên các phần mềm nhà in là không nhất quán, ở mức tốt nhất.
Chuyển đổi sang và từ SVG: Những gì hiệu quả và những gì không
Chuyển đổi giữa các định dạng vector thường là phần dễ dàng. Chuyển đổi từ AI sang SVG, EPS sang SVG, hoặc PDF dựa trên vector sang SVG thường là một quá trình sạch sẽ vì dữ liệu hình học cơ bản đã có sẵn. Đó chủ yếu là việc dịch từ ngôn ngữ của định dạng tệp này sang định dạng tệp khác. CocoConvert xử lý các chuyển đổi từ vector sang vector này một cách đáng tin cậy, bảo toàn các đường dẫn, màu sắc và kiểu chữ. Biến một hình ảnh raster như PNG hoặc JPEG thành SVG lại là một câu chuyện hoàn toàn khác. Quá trình này, được gọi là auto-tracing (tự động dò tìm), liên quan đến việc phần mềm đoán các hình dạng trong hình ảnh dựa trên pixel của bạn và vẽ các đường dẫn vector để xấp xỉ chúng. Bất cứ ai đã từng đưa một logo phức tạp vào một công cụ chuyển đổi trực tuyến và nhận lại một mớ lộn xộn, méo mó đều hiểu nỗi đau đó. Kết quả có thể chấp nhận được đối với một đồ họa rất đơn giản, độ tương phản cao, nhưng đối với bất kỳ thứ gì phức tạp, đó chỉ là một sự xấp xỉ. Để có một phiên bản vector thực sự 'sạch' của một logo, không gì sánh bằng việc một nhà thiết kế tự tay vẽ lại nó trong một công cụ như Illustrator hoặc Inkscape. Đi theo chiều ngược lại – từ SVG sang định dạng raster như PNG – thì đơn giản hơn nhiều. Vì SVG không có kích thước pixel cố hữu, bạn chỉ cần cho công cụ chuyển đổi biết kích thước PNG cuối cùng cần tạo là bao nhiêu. CocoConvert cho phép bạn chỉ định chiều rộng mục tiêu, và chiều cao sẽ được tính toán tự động để duy trì tỷ lệ khung hình. Đối với việc sử dụng trên web, xuất ở kích thước 1× và 2× (ví dụ: rộng 400px và 800px) là một thực hành phổ biến. Để in chất lượng cao 300 DPI, hãy nhớ rằng một hình ảnh rộng 4 inch cần được xuất ở độ rộng 1200 pixel. Một chuyển đổi cuối cùng thường khiến mọi người bối rối là SVG sang PDF. Vì cả hai đều có thể là định dạng vector, việc chuyển đổi thường không mất dữ liệu đối với chính tác phẩm nghệ thuật. Vấn đề nằm ở phông chữ. Nếu SVG của bạn sử dụng một phông chữ được cài đặt trên hệ thống nhưng không nhúng nó, tệp PDF tạo ra có thể thay thế bằng một phông chữ khác, làm hỏng thiết kế của bạn. Mẹo chuyên nghiệp là chuyển đổi tất cả văn bản thành đường viền trong phần mềm thiết kế của bạn *trước khi* bạn xuất SVG.
SVG trong phát triển web: Nhúng, Tạo kiểu và Tạo hiệu ứng động
Bạn có một vài cách để đưa SVG lên trang web, và phương pháp bạn chọn sẽ có những hệ quả thực sự. Cách đơn giản nhất là sử dụng thẻ `<img>`: `<img src="logo.svg" alt="Company logo">`. Cách này dễ, nhưng nó là một 'hộp đen'. Bạn không thể dùng CSS để thay đổi màu sắc của một hình dạng bên trong, cũng như không thể tạo hiệu ứng động cho nó bằng JavaScript. Để có toàn quyền kiểm soát, bạn phải nhúng SVG trực tiếp vào HTML của mình (inline). Mã SVG trở thành một phần của DOM, giống như các thẻ `<div>` và `<p>` của bạn. Đây là nơi SVG thực sự tỏa sáng trên web. Bạn có thể nhắm mục tiêu bất kỳ phần tử nào bên trong SVG bằng các bộ chọn CSS để thay đổi màu nền khi di chuột, hoặc sử dụng JavaScript và Web Animations API để tạo các tương tác phức tạp. Đây là cách các framework front-end hiện đại sử dụng SVG cho các biểu tượng – chúng được hiển thị inline dưới dạng các component. Sử dụng `background-image: url('icon.svg')` trong CSS của bạn là một lựa chọn thứ ba, rất tốt cho các họa tiết lặp lại hoặc các yếu tố trang trí. Tuy nhiên, giống như thẻ `<img>`, nó cô lập SVG, ngăn chặn mọi kiểu dáng nội bộ. Bạn có thể khắc phục điều này bằng cách tạo và liên kết đến các tệp SVG khác nhau cho các trạng thái khác nhau, nhưng đó không phải là một giải pháp đặc biệt thanh lịch. Hoạt ảnh là nơi SVG trở nên thực sự thú vị. Bạn có thể áp dụng các hoạt ảnh và chuyển đổi CSS tiêu chuẩn cho bất kỳ phần tử nào trong một SVG inline. Một thủ thuật phổ biến để tạo hiệu ứng 'vẽ' là sử dụng các thuộc tính CSS `stroke-dasharray` và `stroke-dashoffset` để làm cho một đường dẫn xuất hiện như thể tự vẽ trên màn hình. Cũng có một cú pháp hoạt ảnh SVG gốc gọi là SMIL, nhưng với lịch sử hỗ trợ không đồng đều (nó chưa bao giờ hoạt động trong Internet Explorer), hầu hết các nhà phát triển ngày nay đều sử dụng CSS hoặc JavaScript. Cuối cùng, một lời khuyên về hiệu suất. Đừng để sự 'thuần khiết' của vector làm giảm tốc độ trang web của bạn. Một tệp SVG rất lớn, phức tạp với hàng ngàn đường dẫn có thể khiến trình duyệt hiển thị chậm. Nếu bạn có một hình minh họa phức tạp được sử dụng làm nền, bạn có thể nên chuyển nó sang định dạng raster thành một tệp WebP đã được tối ưu hóa. Việc mất một chút khả năng mở rộng là đáng giá nếu nó tiết kiệm được 300ms thời gian hiển thị trên thiết bị di động.
Tối ưu hóa tệp SVG: Giảm kích thước mà không mất chất lượng
Đừng bao giờ tin tưởng một tệp SVG vừa được xuất ra từ công cụ thiết kế. Chúng hầu như luôn bị phình to với dữ liệu không cần thiết. Illustrator và các trình chỉnh sửa khác thêm rất nhiều metadata XML, các thuộc tính dành riêng cho trình chỉnh sửa, các lớp ẩn và các định nghĩa không sử dụng. Không có gì lạ khi thấy một tệp logo 18 KB co lại còn 3 KB sau khi tối ưu hóa – giảm 80% mà hoàn toàn không có thay đổi về mặt hình ảnh. Công cụ tiêu chuẩn trong ngành cho công việc này là SVGO (SVG Optimizer). Mặc dù đây là một tiện ích dòng lệnh, cách dễ nhất để sử dụng nó là thông qua giao diện người dùng đồ họa (GUI) dựa trên web, và cái tốt nhất là SVGOMG của Jake Archibald. Bạn có thể dán mã SVG của mình hoặc tải lên một tệp và trực quan chuyển đổi các cài đặt tối ưu hóa khác nhau để xem tác động của chúng đến kích thước tệp và quá trình hiển thị. Những lợi ích lớn nhất thường đến từ việc loại bỏ metadata, thu gọn các nhóm, loại bỏ các phần tử ẩn và chuyển đổi các hình dạng đơn giản như `<rect>` thành các phần tử `<path>` hiệu quả hơn. Hãy đặc biệt chú ý đến thanh trượt 'Precision' (Độ chính xác), nó kiểm soát số chữ số thập phân trong tọa độ. Giảm giá trị này từ 6 xuống 2 thường có thể giảm 20-30% kích thước tệp mà không có sự khác biệt rõ rệt nào. Nếu bạn đang nhúng SVG trực tiếp vào HTML của mình cho các biểu tượng, bạn có thể mạnh tay hơn nữa. Thuộc tính `xmlns` không cần thiết cho các SVG inline trong HTML5, và bạn thậm chí có thể bỏ thuộc tính `viewBox` nếu bạn biết biểu tượng sẽ luôn có kích thước cố định (mặc dù điều này ít phổ biến hơn và có thể rủi ro). CocoConvert có áp dụng một số tối ưu hóa cơ bản tự động, như loại bỏ metadata và giảm độ chính xác tọa độ. Điều này mang lại cho bạn một điểm khởi đầu tốt. Nhưng đối với việc sử dụng web trong môi trường sản xuất, nơi mỗi kilobyte đều quý giá, chúng tôi thực sự khuyên bạn nên xử lý các tệp của mình qua SVGOMG. Một công cụ tự động phải thận trọng, nhưng một người có thể kiểm tra kết quả đầu ra có thể an toàn đẩy quá trình tối ưu hóa đi xa hơn nhiều để có được tệp nhỏ nhất có thể.