Ảnh vectơ

Đồ hoạ vectơ là một phương pháp giao tiếp một loạt hình dạng, toạ độ và đường dẫn đến ngữ cảnh kết xuất của chúng. Đây là một tập hợp hướng dẫn về cách vẽ hình ảnh. Khi hình ảnh được tăng hoặc giảm tỷ lệ, tập hợp các điểm và đường kẻ mà hình ảnh biểu thị sẽ được vẽ lại theo tỷ lệ. Đường cong mượt mà giữa hai điểm sẽ được vẽ lại mượt mà ở bất kỳ kích thước nào — tương tự như cách vẽ lại đường viền do CSS xác định trên phần tử HTML khi phần tử đó được điều chỉnh theo tỷ lệ trong khung nhìn.

Đồ họa vectơ có thể mở rộng (SVG) là ngôn ngữ đánh dấu dựa trên XML do W3C phát triển. Đây là định dạng ảnh vectơ được thiết kế cho web hiện đại.

Mọi phần mềm thiết kế chuyên chỉnh sửa hình minh hoạ vectơ đều cho phép bạn xuất hình ảnh dưới dạng SVG. Tuy nhiên, là một ngôn ngữ đánh dấu chuẩn, con người có thể đọc được, SVG cũng có thể được tạo và chỉnh sửa bằng bất kỳ phần mềm chỉnh sửa văn bản nào, bất kể phần mềm tạo văn bản đó là gì, mặc dù điều này nhanh chóng trở nên không thực tế đối với các hình ảnh có độ phức tạp thực sự. SVG có thể được tạo kiểu bằng CSS hoặc chứa JavaScript xây dựng hành vi và hoạt động tương tác vào chính hình ảnh.

Không chỉ có sức hấp dẫn rõ ràng đối với các nhà thiết kế và nhà phát triển, SVG còn là một định dạng cực kỳ hiệu quả khi xét đến trải nghiệm người dùng cuối. Thông tin mô tả chứa trong nguồn SVG thường rất nhỏ gọn so với thông tin dựa trên lưới pixel quy định hơn của các định dạng hình ảnh đường quét, trong trường hợp có các hình dạng đơn giản — để đơn giản hóa phần nào, sự khác biệt giữa việc cho trình duyệt biết "vẽ một đường màu đỏ 1px giữa 1x1 và 1x5" và "1x1 là một pixel màu đỏ. 1x2 là pixel màu đỏ. 1x3 là pixel màu đỏ. 1x4 là pixel màu đỏ. 1x5 là pixel màu đỏ". Mặt khác, bản chất mô tả của SVG lại yêu cầu người trình duyệt phải diễn giải nhiều hơn và "suy nghĩ" hơn. Vì lý do này, các SVG phức tạp có thể gây tốn kém hơn khi kết xuất. Về cơ bản, một hình ảnh rất phức tạp có thể là một tập hợp các lệnh chi tiết và kích thước chuyển lớn.

Có thể mất một chút thời gian thử và lỗi thì bạn mới có thể nhận ra ngay lập tức một đề xuất nguồn hình ảnh là do SVG phân phát tốt hơn thay vì một định dạng đường quét thông thường. Mặc dù vậy, có một số nguyên tắc: các thành phần giao diện như biểu tượng hầu như luôn được SVG phân phát tốt. Các hình minh hoạ có đường nét sắc nét, màu đồng nhất và hình dạng được xác định rõ ràng có thể là một lựa chọn phù hợp cho SVG.

SVG là một chủ đề lớn: toàn bộ ngôn ngữ đánh dấu được tạo ra để cùng tồn tại cùng với HTML, với các khả năng và tùy chọn định kiểu độc đáo. Để biết giới thiệu chi tiết hơn về SVG, hãy xem hướng dẫn về SVG MN.