Sử dụng file SVG cho website
Web
23
performance
5
SVG
4
Vector
1
White

Huy Trần viết ngày 27/05/2015

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 có thể 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.

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>

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ả:

Ảnh bitmap bể tè le hột me

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

alt text

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

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.

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:

<div class="icon-facebook"></div>
.icon-facebook {
  background-image: url("facebook.svg");
  ...
}

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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Huy Trần

97 bài viết.
1434 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
144 43
Tại sao phải viết blog kĩ thuật? Có rất nhiều bài viết trên mạng nói về vấn đề tại sao một lập trình viên nên thường xuyên viết các bài blog kĩ thu...
Huy Trần viết hơn 2 năm trước
144 43
White
143 37
(Ảnh) Tiếp tục sêri (Link) lần này, chúng ta sẽ cùng tìm hiểu và mô phỏng lại một chức năng mà mọi người đang bắt đầu sử dụng hằng ngày, đó là chứ...
Huy Trần viết hơn 1 năm trước
143 37
White
96 16
Phần 1: Tự truyện Tui và Toán đã từng là hai kẻ thù không đội trời chung trong suốt hơn mười lăm năm ròng rã. Ngay từ ánh nhìn đầu tiên đã ghét nh...
Huy Trần viết gần 2 năm trước
96 16
Bài viết liên quan
White
0 0
CSS pointerevents Ghi chú: Series Today I Learn trong vòng 100 ngày thử thách bản thân: ngày 01. Mỗi ngày 1 câu hỏi, 1 câu trả lời (ngắn nhất có t...
ngminhtrung viết 26 ngày trước
0 0
White
39 13
Tuần này mình tham gia vào nhóm hardcore, là một nhóm nghiên cứu có mục tiêu là tìm hiểu chuyên sâu về các vấn đề công nghệ, các bạn quan tâm có th...
Huy Trần viết hơn 1 năm trước
39 13
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
97 bài viết.
1434 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!