Gợi ý cách bổ sung Vector và định dạng ảnh SVG cho website

Illustrator là một chương trình vector phổ biến nhưng ngoài ra vẫn còn những giải pháp khác. Bạn có thể tạo ra các bố cục thích ứng một cách dễ dàng bằng việc thay đổi kích thước ảnh nếu cần. Trong bài hôm nay, chúng tôi sẽ chia sẻ một số ý tưởng cho việc áp dụng ảnh vector vào thiết kế web và xu hướng trong tương lai của việc này. 

Những lợi ích đầu tiên của Vector 

 Hầu hết các chuyên gia thiết kế cảm thấy thoải mái với đồ họa bitmap pixel bởi chúng có mọi hỗ trợ phổ biến. Nhưng các bố cục web thích ứng và màn hình reinta đã thay đổi quá trình thiết kế website. Ngày nay, mọi thứ có vẻ đơn giản hơn khi tạo ra một đồ họa vector đơn và sử dụng ảnh có tỷ lệ phù hợp đưa trực tiếp vào website. 

Logo và thương hiệu công ty sẽ hưởng lợi lớn từ định dạng ảnh này. Vector và bitmap có thể xuất hiện tương tự nhau trên màn hình nhưng đồ họa vectoer sẽ mang lại lợi ích hơn. Vậy tại sao bạn không triệt để tận dụng vector? Việc này sẽ không khó khăn gì và thậm chí vector còn cho phép ảnh có kích thước rộng hơn JPG hay PNG.

Một sự thật nữa về thiết kế vector là khả năng làm sống động icon SVG. Trong quá khứ, bạn sẽ dùng Flash hoặc GIF nhưng giờ cả 2 đã lỗi thời. Vector icon hiển thị rõ ràng và chỉ cần nén một chút, bạn cũng không cần plugin như Adobe Flash Player để nhìn thấy những hiệu ứng chuyển động. 

Hỗ trợ trình duyệt

Loại file vector tốt nhất để dùng là SVG. Đây là viết tắt của Scalable Vector Graphic và giữ thông tin toán học thay vì giá trị pixel. Bằng cách này, hình ảnh có thể mở rộng một cách tự nhiên và hình dạng / màu sắc sẽ giữ lại toàn vẹn. Tuy nhiên vấn đề lớn nhất mà bạn sẽ phải đối mặt là trình duyệt hỗ trợ, bởi các trình duyệt hiện tại hỗ trợ tốt hơn cho các tập tin loại cũ thông dụng. 

Hãy nhìn vào biểu đồ SVG này, đây là bản đồ thể hiện hỗ trợ trình duyệt hiện tại. Cho đến năm 2014 tất cả các trình duyệt hiện đại trên máy tính để bàn và di động đã hỗ trợ đồ họa SVG. Bạn sẽ nhận thấy ngay cả IE 10/11 cũng đã nhứng được đồ họa SVG. Điều là sẽ làm phấn khởi các chuyên gia thiết kế web vì IE luôn là trình duyệt gây phiền phức cho họ. Tuy hỗ trợ IE phiên bản hiện đại, xong đồ họa SVG vẫn không hoạt động ở những phiên bản trình duyệt IE cũ hơn. 

Để tìm kiếm giải pháp hỗ trợ với trình duyệt, bạn cần tìm phương án thay thế.  Các phần tử khung HTML5 có thể hỗ trợ nhưng nó cũng phụ thuộc trình duyệt có hỗ trợ HTML5 không. Giải pháp thay thế khác là sử dụng JavaScript, chúng ta có thể kiểm tra các trình duyệt hiện tại và xem nó có hỗ trợ SVG không, nếu không thì hình ảnh thay thế sẽ được hiển thị. 

SVG Magic: các dự phòng SVG hoàn toàn tự động.

Icon Font

Một định dạng vector khác bên cạnh hỉnh ảnh SVG chính là icon font. Nó có thể điều chỉnh đến kích thước của mọi trình duyệt. Icon font không có sự khác biệt, nó cũng chỉ sử dụng các biểu tượng thay cho chữ và số.

Tin tốt là bạn có thể dễ dành điều chỉnh kích thước của nó trong bất kỳ trình duyệt CSS3 nào. Còn không may ở chỗ hầu hết icon font được tô màu giống như chữ nên bạn sẽ không thể đưa nó vào một bảng màu đơn được. Đây có thể không thành vấn đề lớn còn tùy vào cách bạn sử dụng icon như thế nào. Nghĩ đến điều này khi quyết định giữa việc dùng ảnh SGV và nhúng icon font. 

Nếu bạn tìm kiếm sâu trên internet, bạn sẽ khám phá ra rất nhiều nguồn cung cấp icon miễn phí. Fontello và Font Awesome là hai trong số đó. Twitter Bootstrap thậm chí bao gồm một ser iGlyphicons có thể dùng cho thiet ke web của bạn.

CaptainIcon: cung cấp vector icon miễn phí

Một trong những bộ icon mới nhất được yêu thích là Captain Icon. Đây là những icon vẽ tay bao gồm SVG, PNG và font file. Tất cả hoàn toàn miễn phí và nhiều khả năng tùy chỉnh hơn các icon truyền thống. Nếu bạn có thời gian rảnh rỗi, hãy khám phá những gói incon tại đây và ngoài ra hãy tìm kiếm thêm trên Google để kịp thời khám phá những bộ icon mới.