Sử dụng file SVG cho website

Việc hiển thị hình ảnh trên nhiều độ phân giải màn hình là một vấn đề đau đầu với bất kì một ai, dù bạn làm web hay mobile app. Thông thường, khi bạn muốn hiển thị một hình ảnh trên nhiều kích thước màn hình khác nhau, bạn sẽ chọn cách sử dụng nhiều hình ảnh tương ứng với nhiều độ phân giải, và có thể dùng media query của CSS để load chúng ra. Và cách làm này rất tốn kém

- Tốn công (phải vẽ hoặc export nhiều hình ảnh cho nhiều độ phân giải màn hình)
- Tốn dung lượng (vì website phải chứa nhiều hình ảnh trùng lặp)
- Tốn thời gian (tốn thời gian viết query, bản thân media query cũng tốn thời gian xử lý, nếu số lượng lớn thì sẽ ảnh hưởng performance)

Hôm nay mình sẽ giới thiệu cho các bạn một thủ thuật, có thể một số bạn đã biết rồi, một số bạn chưa biết. Đó là việc dùng hình ảnh dạng vector, mà cụ thể là SVG để tiết kiệm công sức, tăng tốc độ load trang, giảm dung lượng website.

1. Nhưng mà... SVG là cái gì vậy?

SVG (Scalable Vector Graphics), là một định dạng hình ảnh (tương tự như JPG, PNG,... mà chúng ta vẫn thường dùng) sử dụng cấu trúc XML để hiển thị hình ảnh dưới dạng vector. Vì là hình ảnh dạng vector nên chúng ta có thể hiển thị, co giãn (scale) thoải mái mà không làm giảm chất lượng hình ảnh. Một ưu điểm của SVG là tất cả mọi element và attribute của các element đó đều có thể animate. Ví dụ một file SVG để vẽ hình tròn:

<svg width="100" height="100">
   <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

2. Tại sao nên dùng SVG?

Bảo đảm chất lượng hình
Một trong những lý do bạn nên dùng SVG đó là để bảo đảm chất lượng hình ảnh.
Hãy xem hình bên dưới, đây là 2 hình ảnh giống nhau, bên trái là hình ảnh với định dạng thông thường, tức là hình ảnh sử dụng cấu trúc từng pixel, hình bên phải là một hình ảnh vector. Và khi chúng ta phóng to hình ra, đây là kết quả:

Hình ảnh vector có thể hiển thị tốt trên bất kì kích thước/độ phân giải nào (vì thế nên các bác designer thích dùng các phần mềm như Corel, Illustrator khi thiết kế các banner quảng cáo/in ấn,...)

Tiết kiệm dung lượng
Vì là hình ảnh dạng vector nên dung lượng một file hình ảnh SVG rất nhỏ so với một file hình ảnh thông thường. Ví dụ hình ảnh sau được vẽ bằng Sketch 3 và export ra SVG, cho dung lượng 22KB, trong khi nếu export ra PNG với kích thước 1440x900 thì sẽ là 1.2MB

Animation
Như đã nói ở trên, tất cả mọi element và thuộc tính của chúng trong file SVG đều có thể animate được. Nên chúng ta hoàn toàn có thể sử dụng một file SVG duy nhất và dùng CSS hoặc Javascript để làm animation cho từng thành phần của hình ảnh đó. Để thực hiện công việc tương tự cho các định dạng ảnh khác, chúng ta phải export từng thành phần muốn làm animation thành từng hình ảnh riêng biệt, điều này sẽ giúp tăng thêm số request để load ảnh và làm cho trang web của bạn load chậm một cách thần kì.

Độ tương thích
Ở thời điểm hiện tại, hầu hết các trình duyệt đã hỗ trợ tốt định dạng SVG, nên chúng ta có thể sử dụng thoải mái mà không cần phải lăn tăn gì nữa. Có thể xem chi tiết về độ tương thích với các trình duyệt tại đây: http://caniuse.com/#feat=svg

3. Khi nào thì dùng SVG?

Tất nhiên không thể dùng SVG trong 100% mọi trường hợp. Nhược điểm của SVG là giới hạn về độ chi tiết và màu sắc, tất nhiên chúng ta có thể sử dụng SVG để vẽ một hình ảnh phức tạp, hoặc thực như ảnh chụp, nhưng nếu làm vậy thì performance sẽ rất tệ. Nhưng với xu hướng hiện nay, phong cách thiết kế phẳng đang là mốt, những website với giao diện đơn giản, sử dụng hình ảnh cũng đơn giản, ít chi tiết thì SVG hoàn toàn có thể phát huy được thế mạnh của mình.

4. Thích rồi đó nha... dùng như thế nào đây?

Để sử dụng hình ảnh SVG trên web, chúng ta có 3 cách dùng:

Dùng trực tiếp
Bạn có thể chèn trực tiếp nội dung file SVG vào trang HTML, cho vào 1 cái thẻ DIV chẳng hạn.

<div class="hinh-cua-tui-ne">
    <svg width="100" height="100">
        <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
    </svg>
</div>

Dùng thông qua thẻ IMG
Hoặc bạn có thể dùng qua thẻ IMG như một hình ảnh bình thường.

<img src="kipalog.svg" />

Dùng trong CSS
Hoặc có thể dùng trong CSS như sau:

// html
<div class="icon-facebook"></div>

// css
.icon-facebook {
    background-image: url("facebook.svg");
}

Rất đơn giản đúng không :D

---

Bài viết được tham khảo tại: https://kipalog.com/posts/Su-dung-file-SVG-cho-website