[ CODE ] Code site chuyển SVG thành background và sử dụng SVG làm background

Chắc hẳn các bạn hay designer thừa biết rằng 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, dù bạn làm web hay làm 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:

1-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)
2-Tốn dung lượng (vì website phải chứa nhiều hình ảnh trùng lặp)
3-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 nhỏ cho website của bạn, 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 bằng việc đặt background website là file SVG.

Vậy , 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.
Sau đây mình sẽ lấy ví dụ một file SVG để vẽ hình tròn:

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

Và , Tại sao lên dùng SVG ???
1-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ì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,…)

2-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 1440×900 thì sẽ là 1.2MB

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

4-Độ 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ó phải khi nào ta cũng dùng file 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.

Đặt file ảnh SVG làm background thế nào ?
Đầu tiên các bạn down source code ở cuối bài hoặc có thể vào trực tiếp tại website này :
SVG-Background
Giao diện như sau :

các bạn có thể upload file ảnh SVG của bạn lên hoặc có thể copy thẳng code của file SVG vào , sau khi nhập vào website sẽ tự động chuyển sang cho bạn để có thể chèn vào css website của bạn.

Chúng ta còn có thế dùng file ảnh SVG như thế nào ?

Để sử dụng hình ảnh SVG trên web, chúng ta có 3 cách dùng:
1-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.

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

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

HTML<img src="namhong.svg" />

3-Dùng trong CSS như sau:

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

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

Chúc các bạn thành công , cảm ơn các bạn đã xem .

DOWNLOAD

Pass giải nén : kid1412-it.blogspot.com