|
|
|
Sử dụng file SVG cho website |
Cập nhật: 9/12/2018 - Số lượt đọc: 7746 |
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. 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");...}
Nguồn: sưu tầm từ internet
|
|
Tags
Thiết kế web giá rẻ
thiet ke web gia re
web giá rẻ
web gia re
Thiết kế web khó giá rẻ
thiet ke web kho gia re
|
|
CÁC TIN KHÁC |
|
Xem thêm... |
| |
Thời gian làm việc: Sáng từ 8h => 12h Chiều từ 14h => 17h Nghỉ chiều thứ 7 + ngày CN
Hotline: 0989383638 Tel: 0243.55 948 55
Tư vấn thiết kế web
|
|
|
|
Hướng dẫn sử dụng
|
|
|
|
|
|
|
|

|
Lượt truy cập:
10985045
|
|
Đang online:
7 |
|
|
|