Các trang web hiện nay đa số đều sử dụng biểu tượng bằng SVG vì nó hiển thị tốt với HTML5 lại không cần sử dụng đến webfont icon. Tuy nhiên nếu bạn đang lạm dụng bằng cách chèn liên kết SVG trực tiếp quá nhiều dẫn đến kích thước DOM của trang tăng lên làm cho trang tải chậm hơn, hiệu suất giảm đi.
Khi nào nên sử dụng CSS background thay thế cho liên kết SVG trực tiếp?
Khi liên kết SVG được đặt trong vòng lặp b:loop của bài đăng tại các trang chỉ mục. Hãy thử hình dung trang chủ blog hiển thị 10 bài đăng mới nhất => có 10 liên kết SVG vì mỗi bài đăng có 1 liên kết => kích thước trang tăng lên => trang tải chậm hơn
Nhược điểm khi sử dụngCSS background
Tăng số request vì đã chuyển liên kết SVG sang định dạng ảnh thay thế, tuy nhiên so với mức tăng 1 request mà giảm tải được kích thước DOM vẫn có tác dụng hơn rất nhiều so với chèn SVG trực tiếp
Cách chuyển đổi liên kết SVG sang ảnh
Các bạn có thể tìm kiếm chọn các biểu tượng SVG tại một số trang như https://materialdesignicons.com hoặc https://www.materialpalette.com/icons
Khi có biểu tượng SVG, các bạn truy cập trang chuyển đổi SVG của trang mình để mã hóa URL
Cách tạo CSS cho biểu tượng
Giả sử trang có một biểu tượng twitter khi chèn trực tiếp có dạng
<a class="tw" href="https://twitter.com/vietblogdao/" rel="noopener nofollow" target="_blank" title="Follow us on Twitter">
<svg height="36px" viewBox="0 0 24 24" width="36px"><path fill="fill:#1da1f2" d="M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z"></path></svg>
</a>
Khi bạn mã hóa URL của SVG sẽ có dạng
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='36px' viewBox='0 0 24 24' width='36px'%3E%3Cpath fill='fill:%231da1f2' d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z'%3E%3C/path%3E%3C/svg%3E");
Lúc đó html của biểu tượng bạn chèn lại thành
<a class="tw" href="https://twitter.com/vietblogdao/" rel="noopener nofollow" target="_blank" title="Follow us on Twitter">
<span class="hide-screen">Follow us on Twitter</span>
</a>
Sau đó thiết kế CSS cho biểu tượng
a.tw {
display: inline-block;
}
a.tw:after {
background-image: url(data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 0 24 24' width='24px'%3E%3Cpath fill='%231da1f2' d='M5,3H19A2,2 0 0,1 21,5V19A2,2 0 0,1 19,21H5A2,2 0 0,1 3,19V5A2,2 0 0,1 5,3M17.71,9.33C18.19,8.93 18.75,8.45 19,7.92C18.59,8.13 18.1,8.26 17.56,8.33C18.06,7.97 18.47,7.5 18.68,6.86C18.16,7.14 17.63,7.38 16.97,7.5C15.42,5.63 11.71,7.15 12.37,9.95C9.76,9.79 8.17,8.61 6.85,7.16C6.1,8.38 6.75,10.23 7.64,10.74C7.18,10.71 6.83,10.57 6.5,10.41C6.54,11.95 7.39,12.69 8.58,13.09C8.22,13.16 7.82,13.18 7.44,13.12C7.81,14.19 8.58,14.86 9.9,15C9,15.76 7.34,16.29 6,16.08C7.15,16.81 8.46,17.39 10.28,17.31C14.69,17.11 17.64,13.95 17.71,9.33Z'%3E%3C/path%3E%3C/svg%3E);
background-color: #fff;
background-size: 100%;
content: "";
display: inline-block;
width: 36px;
height: 36px;
border-radius: 3px;
}
.hide-screen {
border: 0!important;
clip: rect(0 0 0 0)!important;
height: 1px!important;
margin: -1px!important;
overflow: hidden!important;
padding: 0!important;
position: absolute!important;
width: 1px!important;
white-space: nowrap!important;
}
Lưu ý bạn có thể tạo background trực tiếp thay vì sử dụng CSS content before, after nhưng nếu sử dụng phải có thuộc tính content:"";
Ngoài ra bạn có thể tải biểu tượng SVG về máy sau đó up lên host lưu trữ nếu không có host có thể sử dụng Github lưu trữ, ví dụ sau khi up lên host mình sẽ có link ảnh dạng sau
https://cdn.jsdelivr.net/gh/thietkeblogspot/images/twitter_icon.svg
Lúc đó mình có thể tạo css background hoặc chèn link ảnh vào thẻ img
<a class="tw" href="https://twitter.com/vietblogdao/" rel="noopener nofollow" target="_blank" title="Follow us on Twitter">
<img alt="Follow us on Twitter" height="36px" src="https://cdn.jsdelivr.net/gh/thietkeblogspot/images/twitter_icon.svg" width="36px" />
</a>
