SVG là gì ?
SVG là viết tắt của “Scalable Vector Graphics” và là một định dạng hình ảnh vector dựa trên XML.
SVG chủ yếu được sử dụng trên web và mặc dù chúng có công dụng tương tự như các loại hình ảnh JPEG, PNG,…
Nếu như bạn sử dụng các loại ảnh truyền thống thì điều đón dẫn tới khi bạn muốn tăng hoặc giảm kích thước của một hình ảnh thì hình ảnh đó sẽ bị vỡ và có các dấu răng cưa, hoặc bị mờ đi.
Vậy đối với sử dụng file SVG.
- Độ phân giải
- Animation
- Khả năng tiếp cận và SEO
- Tốc độ
- Tính thực tiễn
Độ phân giải
SVG sẽ có thể scale tùy ý mà không hề gây ảnh hưởng tới độ phân giải của hình ảnh. Điều này dẫn tới bạn không cần phải quan tâm về kích thước màn hình hay độ phân giải.
Animation
SVG có thể tạo thành các chuyển động (animation) khi sử dụng với CSS, hoắc kết hợp với Javascript để xử lý các hoạt cảnh khác nhau của hình ảnh sử dụng file svg.
Khả năng tiếp cận và SEO
Nội dung svg dù nằm trong các tệp độc lập hay được nhúng trực tiếp vào các website thì đều được lập chỉ mục (Google index). Điều đó rất tốt cho mục đích SEO nội dung bài viết. Xem thêm phần này ở Google now indexes SVG.
Tốc độ
Do bản chất của đồ họa là vector, việc sử dụng file svg nặng hay nhẹ phụ thuộc vào các layer, hiệu ứng, màu sắc. Tuy nhiên bạn có thể zip các file đó lại để có thể chuyền file ít byte hơn.
Tính thực tiễn
Cái hay ở đây là bạn có thể sử dụng SVG làm logo của mình và sau đó sử dụng nó ở bất cứ đâu bạn muốn mà không cần lo lắng về kích thước, độ phân giải hoặc thời gian tải.