SVG to CSS Converter

Tính năng nổi bật

Tại sao dùng SVG trong CSS background-image?

Inline SVG trong CSS mang lại nhiều lợi ích cho web performance. Giảm HTTP requests: Thay vì browser phải request file SVG riêng, SVG được embed trực tiếp trong CSS. Với nhiều icons nhỏ, điều này giảm đáng kể số requests. Caching hiệu quả: CSS file được cache, SVG đi kèm cũng được cache. Không cần quản lý nhiều files. Không FOUC: SVG load cùng CSS, không có flash of unstyled content. Critical CSS: Có thể inline CSS với SVG vào HTML cho above-the-fold content. Khi nào dùng: Icons nhỏ, decorative elements, background patterns. Khi nào không dùng: SVG lớn (> 5KB), SVG cần animate bằng JS, SVG cần accessible (cần inline trong HTML với title/desc).

Lợi ích khi sử dụng

• •Giảm HTTP requests - website load nhanh hơn
• •Cải thiện Core Web Vitals (LCP, FCP)
• •SVG được cache cùng CSS file
• •Không có flash of unstyled content
• •Dễ maintain - SVG và CSS ở cùng chỗ
• •Không cần quản lý nhiều asset files
• •Works offline sau khi CSS loaded
• •Tương thích mọi browsers hiện đại

Cách chuyển SVG sang CSS background-image

1. 1Copy SVG code từ file hoặc design tool (Figma, Illustrator)
2. 2Paste SVG code vào ô input bên trái
3. 3Hoặc click 'Ví dụ' để load sample SVG
4. 4Xem preview SVG gốc và trên các màu nền khác nhau
5. 5Kiểm tra SVG hiển thị đúng trên cả nền sáng và tối
6. 6Copy 'URL Encoded' output (recommended, nhẹ hơn)
7. 7Hoặc copy 'Base64 Encoded' nếu cần compatibility
8. 8Hoặc copy 'CSS Class' hoàn chỉnh để dùng ngay
9. 9Paste vào CSS file của bạn

URL Encoded vs Base64 - Nên dùng cái nào?

URL Encoded: Encode các ký tự đặc biệt (<, >, #, etc.) thành %XX format. Ưu điểm: Nhẹ hơn Base64 khoảng 20-30%. Human-readable (có thể đọc SVG trong CSS). Dễ debug. Nhược điểm: Một số browsers rất cũ có thể không support. Base64 Encoded: Convert binary thành ASCII string. Ưu điểm: Compatibility cao với tất cả browsers. Ít edge cases. Nhược điểm: Tăng size 33% so với original. Không readable. Recommendation: Dùng URL encoded cho projects hiện đại. Dùng Base64 nếu cần support IE cũ hoặc gặp issues với URL encoded.

Best practices khi dùng SVG trong CSS

Optimize SVG trước: Dùng SVGO hoặc tool SVG Optimizer của chúng tôi để giảm size. Remove comments, metadata, unnecessary attributes. Giữ SVG nhỏ: Chỉ inline SVG < 5KB. SVG lớn hơn nên dùng external file với proper caching. Đảm bảo xmlns: SVG trong data URI cần xmlns='http://www.w3.org/2000/svg'. Tool tự động thêm nếu thiếu. Test trên nhiều backgrounds: SVG với stroke='currentColor' sẽ không hoạt động trong CSS background. Đảm bảo colors được hardcode. Accessibility: SVG trong CSS background không accessible cho screen readers. Dùng cho decorative elements only. Cho meaningful icons, inline SVG trong HTML với proper ARIA.

Sử dụng CSS custom properties với SVG

Một hạn chế của SVG trong CSS background là không thể thay đổi colors dynamically. Workaround: Tạo multiple versions với different colors. Dùng CSS mask-image thay vì background-image (cho single-color icons). Ví dụ với mask-image: .icon { background-color: currentColor; mask-image: url('data:image/svg+xml,...'); mask-repeat: no-repeat; mask-position: center; mask-size: contain; } Với cách này, icon sẽ inherit color từ parent element. Lưu ý: mask-image cần prefix -webkit- cho Safari.

Câu hỏi thường gặp (FAQ)

Từ khóa liên quan