Công cụ hỗ trợ xem, tách ảnh và tải về ảnh SVG Sprite

CSS Sprite là một kỹ thuật tối ưu hóa web bằng cách kết hợp nhiều hình ảnh nhỏ thành một file ảnh lớn duy nhất, sau đó sử dụng CSS để hiển thị từng phần cụ thể của ảnh đó.

Cách hoạt động của CSS Sprite

1. Tạo sprite sheet: Ghép nhiều icon, button, hoặc hình ảnh nhỏ vào một file ảnh duy nhất

2. Sử dụng CSS background-position: Dịch chuyển vị trí hiển thị để chỉ show phần ảnh mong muốn

.icon {
    background-image: url('sprite.png');
    background-repeat: no-repeat;
    width: 32px;
    height: 32px;
}

.icon-home {
    background-position: 0 0; /* Hiển thị icon đầu tiên */
}

.icon-search {
    background-position: -32px 0; /* Dịch trái 32px để show icon thứ 2 */
}

.icon-user {
    background-position: -64px 0; /* Dịch trái 64px để show icon thứ 3 */
}

Ưu điểm:

• Giảm HTTP requests: Thay vì tải 10 ảnh riêng lẻ → chỉ cần 1 request
• Tăng tốc độ tải trang: Ít request = load nhanh hơn
• Tiết kiệm bandwidth: Kích thước tổng thể thường nhỏ hơn
• Tránh hiệu ứng “nhấp nháy” khi hover

Nhược điểm:

• Khó maintain và update
• File sprite lớn có thể chậm khi load lần đầu
• Không flexible với responsive design
• Phức tạp khi có nhiều kích thước khác nhau

Thời đại hiện tại:

CSS Sprites ít được sử dụng hơn do:

• Icon fonts (Font Awesome, Material Icons)
• SVG sprites linh hoạt hơn
• HTTP/2 giải quyết vấn đề nhiều requests
• Build tools tự động optimize

Tuy nhiên, CSS Sprites vẫn hữu ích cho các dự án cần tối ưu tối đa performance hoặc hỗ trợ browser cũ.

Ở trên là các thông tin do AI tạo để cho bạn biết về CSS Sprite là gì, còn trong bài này thì đang đi theo hướng ngược lại là nếu bạn có 1 ảnh SVG Sprite được gom nhiều ảnh vào trong 1 ảnh thì có cách nào để có thể tách và tải toàn bộ ảnh svg nằm bên trong 1 cách dễ dàng!

Để làm được việc này dễ hơn cả việc bạn nhai kẹo, hãy thử với website hỗ trợ SVG Sprite Viewer nhé.

Bạn chỉ cần truy cập vào soconvert , sau đó dán url svg dạng SVG Sprite inline hoặc tải lên ảnh svg SVG Sprite là website tự động tách riêng ra từng file nhỏ cho bạn xem và bạn có thể click để tải về hoặc bạn cũng có thể copy svg dạng inline để sử dụng luôn nên cực kỳ tiện lợi cho việc phát triển web, app

Okay, bài viết share 1 mẹo nhỏ để bạn có thể tách ảnh từ SVG Sprite ra nhanh chóng thôi, hy vọng nó sẽ giúp ích được cho nhiều người.

Xin cảm ơn.