- Messages
- 585
- Points
- 10
- Language
- Tiếng Việt
SVG là một dạng hình ảnh đồ hoạ có nhiều cải tiến đáng giá và đang được sử dụng phổ biến thay cho các hình ảnh truyền thống, nhất là trên các website bởi các ưu điểm nổi bật của nó. Tên gọi SVG là viết tắt của cụm từ "Scalable Vector Graphics" và cấu trúc của nó là ngôn ngữ đánh dấu XML dùng để mô tả hình ảnh đồ hoạ các vector hai chiều. Hiện nay, SVG đã trở thành tiêu chuẩn mở và được quản lý bởi tổ chức World Wide Web Consortium (W3C), một tổ chức quốc tế quản lý các tiêu chuẩn phổ biến hiện nay như HTML, CSS,...
SVG xuất hiện lần đầu tiên vào năm 1999 nhưng mãi cho tới thời gian gần đây thì SVG mới trở nên phổ biến, đặt biệt là trong lĩnh vực web thì SVG càng được ưu ái hơn bởi gọn nhẹ, khả năng co giản mà không làm giảm chất lượng hình ảnh. Trước tiên phải kể đến số lượng màu sắc tối đa cho mỗi loại hình ảnh, nếu ảnh GIF cho phép tối đa 256 màu sắc, ảnh JPG tới hàng triệu thì ảnh SVG là không giới hạn (Tương tự như ảnh PNG nén không mất dữ liệu PNG-24). Nếu xét về dung lượng thì chắc chắn các hình ảnh dạng bitmap thông thường sẽ có dung lượng lớn hơn nhiều so với SVG, ví dụ với một hình ảnh PNG có kích thước chiều rộng và chiều dài là 100px thì nó cần tới 10.000 pixel, với mỗi pixel cần tới 4 byte cho các màu phổ biến như đỏ, xanh,... thì dung lượng ảnh PNG lớn thế nào. Trong khi đó, hình ảnh SVG cần không quá 150 byte, nhỏ hơn rất nhiều so với PNG.
Với một vài thông tin tôi cung cấp cho các bạn sẽ giúp các bạn có cái nhìn tổng quan về SVG, một trong những loại hình ảnh nên được sử dụng trên các website thay cho các hình ảnh bitmap truyền thống. Trên các website, các bạn nên sử dụng hình ảnh SVG thay thế cho các biểu tượng, các hình ảnh đơn sắc sẽ dễ dàng hơn. Việc thiết kế một hình ảnh SVG bằng ngôn ngữ XML phục vụ cho việc thiết kế website cũng không quá khó khăn. Các bạn có thể tham khảo ví dụ sau để vẽ một hình tròn:
Các bạn lưu nội dung ở trên vào một tập tin và lưu nó với phần mở rộng ".svg", tiếp theo chèn hình ảnh SVG mới được tạo vào website để thấy kết quả. Các bạn cũng thử thay đổi kích thước hình ảnh từ nhỏ cho tới lớn, rất lớn để thấy được hình ảnh SVG là như nhau với mọi kích thước, không bị vỡ hình khi phóng to, thu nhỏ.
Các bạn có thể tìm hiểu thêm về hình ảnh SVG tại địa chỉ https://www.w3schools.com/graphics/svg_intro.asp.
SVG xuất hiện lần đầu tiên vào năm 1999 nhưng mãi cho tới thời gian gần đây thì SVG mới trở nên phổ biến, đặt biệt là trong lĩnh vực web thì SVG càng được ưu ái hơn bởi gọn nhẹ, khả năng co giản mà không làm giảm chất lượng hình ảnh. Trước tiên phải kể đến số lượng màu sắc tối đa cho mỗi loại hình ảnh, nếu ảnh GIF cho phép tối đa 256 màu sắc, ảnh JPG tới hàng triệu thì ảnh SVG là không giới hạn (Tương tự như ảnh PNG nén không mất dữ liệu PNG-24). Nếu xét về dung lượng thì chắc chắn các hình ảnh dạng bitmap thông thường sẽ có dung lượng lớn hơn nhiều so với SVG, ví dụ với một hình ảnh PNG có kích thước chiều rộng và chiều dài là 100px thì nó cần tới 10.000 pixel, với mỗi pixel cần tới 4 byte cho các màu phổ biến như đỏ, xanh,... thì dung lượng ảnh PNG lớn thế nào. Trong khi đó, hình ảnh SVG cần không quá 150 byte, nhỏ hơn rất nhiều so với PNG.
Với một vài thông tin tôi cung cấp cho các bạn sẽ giúp các bạn có cái nhìn tổng quan về SVG, một trong những loại hình ảnh nên được sử dụng trên các website thay cho các hình ảnh bitmap truyền thống. Trên các website, các bạn nên sử dụng hình ảnh SVG thay thế cho các biểu tượng, các hình ảnh đơn sắc sẽ dễ dàng hơn. Việc thiết kế một hình ảnh SVG bằng ngôn ngữ XML phục vụ cho việc thiết kế website cũng không quá khó khăn. Các bạn có thể tham khảo ví dụ sau để vẽ một hình tròn:
XML:
<svg width="100" height="100">
<circle cx="50" cy="50" r="30" stroke="green" stroke-width="3" fill="blue" />
</svg>Các bạn có thể tìm hiểu thêm về hình ảnh SVG tại địa chỉ https://www.w3schools.com/graphics/svg_intro.asp.