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 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.
 

SVG là gì?

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

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.
 

Dùng như thế nào?

 
Để 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");
  ...
}

 

Để hiểu thêm về SVG, các bạn có thể xem thêm tại đây

Related Post


5 điều bạn có thể làm với thẻ HTML Meta
Monday, January 5, 2015
Thẻ Meta thường được dùng để lưu trữ những mẩu thông tin trên một trang web. Mục đích của nó thường hướng đến  trình duyệt hoặc bộ máy tìm kiếm hiểu và biết trang tốt hơn.
Công cụ hỗ trợ kiểm tra & chụp ảnh Giao Diện Web Responsive
Thursday, October 16, 2014
Hôm nay mình muốn giới thiệu với mọi người một công cụ nhỏ, khá hay. Giúp xem nhanh trang web của bạn trên nhiều kích thước màn hình khác nhau, từ desktop, tablet đến di động. Hơn nữa là dễ dàng, để chụp ảnh màn hình web responsive và gửi cho khách hàng hoặc đối tác.
Search

Đăng ký nhận bài mới


Category

Blog Archive