SVG là viết tắt của Scalable Vector Graphics. Về cơ bản, nó là một định dạng hình ảnh vector có thể phóng to, thu nhỏ đến một kích thước bất kỳ mà không mất đi sự rõ ràng, dịch sang ngôn ngữ đánh dấu XML dễ dàng làm cho các trình duyệt để đọc và hiển thị trên màn hình.
Một lịch sử ngắn gọn
SVG, không phải là một định nghĩa mới. Trên thực tế, nó đã tồn tại khoảng từ năm 1998, được phát triển bởi Nhóm làm việc SVG W3C. Tại thời điểm đó hai tập tin hình ảnh vector dựa trên XML khác đã được giới thiệu. VML của Macromedia và Microsoft và PGML bởi Adobe Systems và Sun Microsystems, nhưng nó là SVG 1.0 mà cuối cùng đã trở thành một khuyến nghị của W3C vào ngày 4 tháng 9 năm 2001.
Kể từ sau đó, sau SVG 1.1 (tháng 1 năm 2003), SVG Tiny 1.2 (tháng 12 năm 2008) và SVG 1.1 Second Edition, bao gồm tất cả các errata và giải thích, nhưng không có các tính năng mới cho SVG gốc 1.1. Nó được phát hành vào ngày 16 tháng 8 năm 2011. Công việc hiện đang trong tiến trình trên SVG 2 với các tính năng web mới như CSS, HTML5 và WOFF.
Ưu điểm của SVG là gì?
Kích thước file nhỏ mà nén tốt
Hình ảnh SVG, XML, chứa nhiều mảnh lặp đi lặp lại của văn bản, vì vậy chúng rất thích hợp cho các thuật toán nén lossless dữ liệu. Khi một hình ảnh SVG đã được nén bằng thuật toán tiêu chuẩn gzip, nó được gọi là một hình ảnh "svgz" và sử dụng phần mở rộng tên tập tin .svgz tương ứng.
Trông rất tuyệt trên màn hình retina
SVGs như với tất cả các đồ họa vector, có thể được thu nhỏ đến kích thước bất kỳ mà không mất đi sự rõ ràng (trừ rất nhỏ). Nói cách khác, bạn có thể phóng to để một SVG tất cả các bạn muốn và họ sẽ luôn luôn nhìn sắc nét. Vì vậy, bạn không còn phải tạo ra một @ 2x Retina phiên bản cho logo hình ảnh của bạn.
Có thể làm ảnh động
Sử dụng thẻ svg để nhúng các hình ảnh trên trang web của chúng tôi cho phép chúng tôi để định dạng một cách dễ dàng thông qua CSS, giống như cách chúng tôi làm với thẻ HTML thông thường. Chúng tôi có thể thay đổi thuộc tính đối tượng như màu nền, độ mờ đục, vị trí, chiều rộng, vv Ngoài ra, chúng ta có thể thêm các hiệu ứng hình ảnh động ấn tượng bằng cách sử dụng sự kết hợp của các thư viện JS và CSS.
Hỗ trợ đầy đủ
Sau nhiều năm không tương thích trình duyệt, SVGs cuối cùng đã đến. Chúng được hỗ trợ trong tất cả các trình duyệt hiện đại bao gồm IE9 (nguồn: caniuse.com). Bạn thậm chí có thể sử dụng Fallbacks nếu bạn vẫn còn quan tâm đến IE8.
Thời gian tải tốt hơn
SVGs tuyệt vời cho thiết kế web, vì nó có độ phân giải vô hạn và kích thước file rất nhỏ. Nó có thể được nhúng trực tiếp vào một tài liệu HTML với thẻ svg, do trình duyệt không cần phải tải về đồ họa. Điều này có nghĩa rằng trang web của bạn sẽ được tải nhanh hơn!
Các công cụ hổ trợ SVG
Ứng dụng Desktop
Một lịch sử ngắn gọn
SVG, không phải là một định nghĩa mới. Trên thực tế, nó đã tồn tại khoảng từ năm 1998, được phát triển bởi Nhóm làm việc SVG W3C. Tại thời điểm đó hai tập tin hình ảnh vector dựa trên XML khác đã được giới thiệu. VML của Macromedia và Microsoft và PGML bởi Adobe Systems và Sun Microsystems, nhưng nó là SVG 1.0 mà cuối cùng đã trở thành một khuyến nghị của W3C vào ngày 4 tháng 9 năm 2001.
Kể từ sau đó, sau SVG 1.1 (tháng 1 năm 2003), SVG Tiny 1.2 (tháng 12 năm 2008) và SVG 1.1 Second Edition, bao gồm tất cả các errata và giải thích, nhưng không có các tính năng mới cho SVG gốc 1.1. Nó được phát hành vào ngày 16 tháng 8 năm 2011. Công việc hiện đang trong tiến trình trên SVG 2 với các tính năng web mới như CSS, HTML5 và WOFF.
Ưu điểm của SVG là gì?
Kích thước file nhỏ mà nén tốt
Hình ảnh SVG, XML, chứa nhiều mảnh lặp đi lặp lại của văn bản, vì vậy chúng rất thích hợp cho các thuật toán nén lossless dữ liệu. Khi một hình ảnh SVG đã được nén bằng thuật toán tiêu chuẩn gzip, nó được gọi là một hình ảnh "svgz" và sử dụng phần mở rộng tên tập tin .svgz tương ứng.
Trông rất tuyệt trên màn hình retina
SVGs như với tất cả các đồ họa vector, có thể được thu nhỏ đến kích thước bất kỳ mà không mất đi sự rõ ràng (trừ rất nhỏ). Nói cách khác, bạn có thể phóng to để một SVG tất cả các bạn muốn và họ sẽ luôn luôn nhìn sắc nét. Vì vậy, bạn không còn phải tạo ra một @ 2x Retina phiên bản cho logo hình ảnh của bạn.
Có thể làm ảnh động
Sử dụng thẻ svg để nhúng các hình ảnh trên trang web của chúng tôi cho phép chúng tôi để định dạng một cách dễ dàng thông qua CSS, giống như cách chúng tôi làm với thẻ HTML thông thường. Chúng tôi có thể thay đổi thuộc tính đối tượng như màu nền, độ mờ đục, vị trí, chiều rộng, vv Ngoài ra, chúng ta có thể thêm các hiệu ứng hình ảnh động ấn tượng bằng cách sử dụng sự kết hợp của các thư viện JS và CSS.
Hỗ trợ đầy đủ
Sau nhiều năm không tương thích trình duyệt, SVGs cuối cùng đã đến. Chúng được hỗ trợ trong tất cả các trình duyệt hiện đại bao gồm IE9 (nguồn: caniuse.com). Bạn thậm chí có thể sử dụng Fallbacks nếu bạn vẫn còn quan tâm đến IE8.
Thời gian tải tốt hơn
SVGs tuyệt vời cho thiết kế web, vì nó có độ phân giải vô hạn và kích thước file rất nhỏ. Nó có thể được nhúng trực tiếp vào một tài liệu HTML với thẻ svg, do trình duyệt không cần phải tải về đồ họa. Điều này có nghĩa rằng trang web của bạn sẽ được tải nhanh hơn!
Ứng dụng Desktop
- Adobe Illustrator (Premium)
- CorelDraw (Premium)
- Xara (Premium)
- InkScape (FREE)
Biên tập bởi Designervn.Net
