Sử dụng mã SVG làm ảnh nền trực tiếp trong CSS

Demo

Các đề mục của bài viết này là demo sử dụng trực tiếp mã SVG làm ảnh nền của tiêu đề. Điều này giúp bạn giảm được yêu cầu đến máy chủ, lại có thể tùy ý thay đổi màu sắc cho nền nếu muốn.

SVG sang CSS

Đầu tiên, bạn cần tìm tập tin SVG mong muốn, mã SVG có dạng, ví dụ:

<svg width="215" height="44" viewBox="0 0 215 44" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M20 9h195l-12.037 35H20V9z" fill="#FFBC69" />
    <path d="M0 0h204l-12 36H0V0z" fill="url(#paint0_linear)" />
    <path d="M108.81 0H204l-12.108 36H90l18.81-36z" fill="url(#paint1_linear)" />
    <defs>
        <linearGradient id="paint0_linear" y1="15.3" x2="204" y2="15.3" gradientUnits="userSpaceOnUse">
            <stop stop-color="#3B66F5" />
            <stop offset="1" stop-color="#163BCD" />
        </linearGradient>
        <linearGradient id="paint1_linear" x1="199.969" y1="23" x2="75.027" y2="24.805" gradientUnits="userSpaceOnUse">
            <stop stop-color="#3B66F5" />
            <stop offset="1" stop-color="#3B66F5" stop-opacity=".69" />
        </linearGradient>
    </defs>
</svg>

Bạn không thể sử dụng mã này để làm ảnh nền trực tiếp. Bạn cần chuyển mã này thành CSS bằng công cụ SVG to CSS converter.

Sau khi dán mã SVG vào, bạn sẽ được, ví dụ mình dán mã trên:

url('data:image/svg+xml,<svg width="215" height="44" viewBox="0 0 215 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 9h195l-12.037 35H20V9z" fill="%23FFBC69"/><path d="M0 0h204l-12 36H0V0z" fill="url(%23paint0_linear)"/><path d="M108.81 0H204l-12.108 36H90l18.81-36z" fill="url(%23paint1_linear)"/><defs><linearGradient id="paint0_linear" y1="15.3" x2="204" y2="15.3" gradientUnits="userSpaceOnUse"><stop stop-color="%233B66F5"/><stop offset="1" stop-color="%23163BCD"/></linearGradient><linearGradient id="paint1_linear" x1="199.969" y1="23" x2="75.027" y2="24.805" gradientUnits="userSpaceOnUse"><stop stop-color="%233B66F5"/><stop offset="1" stop-color="%233B66F5" stop-opacity=".69"/></linearGradient></defs></svg>')

Lưu ý: Trước khi chuyển mã, bạn có thể nén SVG để tối ưu hóa dung lượng mã SVG.

CSS

Bây giờ bạn có thể sử dụng vào CSS.

.svg-title {
    color: #fff;
    height: 40px;
    line-height: 20px;
    display: inline-block;
    background-repeat: no-repeat;
    padding: 6px 32px 0 8px;
    background-position: 100% 50%;
    background-image: url('data:image/svg+xml,<svg width="215" height="44" viewBox="0 0 215 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 9h195l-12.037 35H20V9z" fill="%23FFBC69"/><path d="M0 0h204l-12 36H0V0z" fill="url(%23paint0_linear)"/><path d="M108.81 0H204l-12.108 36H90l18.81-36z" fill="url(%23paint1_linear)"/><defs><linearGradient id="paint0_linear" y1="15.3" x2="204" y2="15.3" gradientUnits="userSpaceOnUse"><stop stop-color="%233B66F5"/><stop offset="1" stop-color="%23163BCD"/></linearGradient><linearGradient id="paint1_linear" x1="199.969" y1="23" x2="75.027" y2="24.805" gradientUnits="userSpaceOnUse"><stop stop-color="%233B66F5"/><stop offset="1" stop-color="%233B66F5" stop-opacity=".69"/></linearGradient></defs></svg>');
}

Thay đổi màu sắc

Nếu bạn muốn thay đổi màu sắc, bạn có thể khai báo tại :root như sau:

:root {
    --title-background: url('data:image/svg+xml,<svg width="215" height="44" viewBox="0 0 215 44" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20 9h195l-12.037 35H20V9z" fill="%23f3b838"/><path d="M0 0h204l-12 36H0V0z" fill="url(%23paint0_linear)"/><path d="M108.81 0H204l-12.108 36H90l18.81-36z" fill="url(%23paint1_linear)"/><defs><linearGradient id="paint0_linear" y1="15.3" x2="204" y2="15.3" gradientUnits="userSpaceOnUse"><stop stop-color="<?php echo urlencode($themecolor); ?>"/><stop offset="1" stop-color="<?php echo urlencode(tint($themecolor, 0.6)); ?>"/></linearGradient><linearGradient id="paint1_linear" x1="199.969" y1="23" x2="75.027" y2="24.805" gradientUnits="userSpaceOnUse"><stop stop-color="<?php echo urlencode($themecolor); ?>"/><stop offset="1" stop-color="<?php echo urlencode($themecolor); ?>" stop-opacity=".69"/></linearGradient></defs></svg>');
}

Với $themecolor là biến chứa màu sắc và tint() là phương thức trộn màu. Sau đó, cập nhật CSS của lớp .svg-title:

.svg-title {
    color: #fff;
    height: 40px;
    line-height: 20px;
    display: inline-block;
    background-repeat: no-repeat;
    padding: 6px 32px 0 8px;
    background-position: 100% 50%;
    background-image: var(--title-background);
}

Một số lưu ý

Nếu bạn đang sử dụng plugin cache, cụ thể là W3 Total Cache, bạn cần tắt nén HTML tại HTML minify settings trong Performance → Minify.

Vì chức năng này sẽ xóa các dấu ", gây ra lỗi hiển thị SVG.

Kết luận

Nếu bạn đang tối ưu giao diện nhẹ và nhanh cho mobile-first, thì việc dùng SVG kiểu này không chỉ giảm tải server mà còn giúp bạn tạo ra giao diện linh hoạt, có thể đổi màu dễ dàng bằng biến CSS.

Chúc các bạn thành công!