Svg File Là Gì?

Hiển thị hình ảnh ở nhiều độ phân giải màn hình có thể là một vấn đề đau đầu đối với bất kỳ ai, cho dù đó là trên web hay ứng dụng dành cho thiết bị di động.

Bài viết hôm nay sẽ giới thiệu đến các bạn một thủ thuật. Nó sử dụng hình ảnh vector, đặc biệt là SVG File, để tiết kiệm công sức, tăng tốc độ tải trang và giảm kích thước trang web.

SVG File là gì?

SVG là viết tắt của Scalable Vector Graphics. SVG là một ngôn ngữ dựa trên XML để mô tả đồ họa vector hai chiều, tĩnh và động. Bạn cũng có thể hiểu nó là một định dạng ảnh (tương tự như ảnh bitmap JPG, PNG…). Sự khác biệt duy nhất là chúng sử dụng cấu trúc XML để hiển thị hình ảnh dưới dạng vectơ, trong khi hình ảnh bitmap sử dụng cấu trúc ma trận pixel. Theo mặc định, các tệp có phần mở rộng .svg được hiểu là tệp SVG.

Tại sao sử dụng SVG?

Chất lượng hình ảnh tốt: Vì là hình ảnh vector nên nó có thể được hiển thị và thu nhỏ tùy ý mà không làm giảm chất lượng hình ảnh. Tiết kiệm không gian: Vì là sơ đồ vector nên nó cồng kềnh. Các tệp hình ảnh SVG nhỏ hơn các tệp hình ảnh bình thường. Vì vậy, chúng ta hoàn toàn có thể sử dụng một tệp SVG duy nhất và tạo hoạt ảnh cho mọi phần tử của hình ảnh đó bằng CSS hoặc Javascript. Nó làm giảm số lượng yêu cầu và làm cho trang web của bạn tải rất nhanh ngay cả với rất nhiều hình ảnh động. Khả năng tương thích tốt: Sau nhiều năm trình duyệt không tương thích, SVG cuối cùng cũng có mặt. Tất cả các trình duyệt hiện đại đều hỗ trợ chúng.

Xem thêm: Sạc pin tiếng anh là gì

Biểu đồ so sánh:

Định dạng bảng loại để sử dụng

JPG Nén không mất dữ liệu Triệu màu Ảnh tĩnh, nhiếp ảnh

Nén không mất dữ liệu PNG-8 Lên đến 256 màu Tương tự như định dạng GIF, độ trong suốt tốt hơn nhưng không có hoạt ảnh, tuyệt vời cho các biểu tượng

Nén không mất dữ liệu PNG-24 Không giới hạn màu Tương tự như định dạng PNG-8, xử lý hình ảnh tĩnh và độ trong suốt

Nén không mất dữ liệu GIF Lên đến 256 màu Hoạt ảnh đơn giản, đồ họa màu đồng nhất, không có đồ họa gradient

SVG Vector / Lossless Nén Đồ họa màu không giới hạn / Logo web, Màn hình Retina / Độ phân giải dpi cao

Một trong những lợi thế của SVG là tất cả các phần tử và thuộc tính của chúng có thể được làm động.

Ví dụ về tệp SVG vẽ một vòng tròn:

Hãy nhìn vào hình ảnh bên dưới, đây là hai hình ảnh giống hệt nhau, bên trái là hình ảnh định dạng thông thường, tức là hình ảnh sử dụng cấu trúc pixel-by-pixel, và bên phải là hình ảnh vector. Khi chúng tôi phóng to, kết quả như sau:

Các yếu tố cơ bản của SVG

là thẻ gói, định nghĩa nó như một phần tử SVG. Tạo một dòng duy nhất. Tạo hình chữ nhật và hình vuông.

Tạo một đa giác có ba cạnh trở lên. Tạo bất kỳ hình dạng nào bạn thích bằng cách xác định các điểm và đường giữa chúng. Xác định tài nguyên có thể tái sử dụng. Không có gì trong phần được hiển thị. Kết hợp nhiều hình dạng thành một nhóm. Đặt các nhóm vào phần này để cho phép chúng được sử dụng lại. Lấy tài nguyên được xác định trong phần đó và hiển thị nó trong SVG.

Xem thêm: Cá tuyết là gì – lời khuyên khi ăn cá

Tham khảo thêm: Như Thế Nào Được Gọi Là Ngôi Kể Thứ 2

Công cụ SVG

Một số công cụ để giúp bạn vẽ hình ảnh SVG là:

Sử dụng SVG cho hình ảnh tĩnh

khi bạn sử dụng thẻ HTML

/ * CSS background * /. Myelement {background-image: url (“https://ift.tt/Jc39T6p} Trình duyệt sẽ tắt mọi tập lệnh, liên kết hoặc các tương tác khác chức năng nhúng vào tệp SVG. Bạn có thể thao tác SVG với CSS giống như các loại hình ảnh bình thường như bộ lọc, chuyển đổi, v.v. Kết hợp CSS với SVG thường mang lại kết quả tốt hơn vì hình ảnh SVG có thể được thu nhỏ vô hạn.

Chèn hình ảnh SVG vào mã CSS

SVG có thể được viết trực tiếp bằng mã CSS sử dụng thuộc tính nền. Nó hoạt động cho các biểu tượng nhỏ, có thể tái sử dụng và tránh các yêu cầu HTTP bổ sung.

.element {background: url (“data: image / svg + xml; utf8,” “) center center no-repeat;} Ở đây ViewBox xác định tọa độ không gian. Trong ví dụ trên, sẽ có đường viền màu đỏ Hình tròn màu vàng và khu vực 800×600 bắt đầu từ vị trí 0,0.

Hình ảnh SVG đáp ứng

Không giống như hình ảnh thông thường, hình ảnh SVG phải có các thuộc tính chiều rộng và chiều cao được chỉ định cho hình ảnh, vì nếu không được đặt, nó sẽ được coi là chiều rộng tối đa bằng 0 và hình ảnh sẽ không hiển thị.

Chèn hình ảnh SVG vào mã HTML

Hình ảnh SVG có thể được đưa trực tiếp vào mã HTML, nơi nó trở thành một phần của cây DOM và có thể được thao tác bằng CSS và Javascript:

SVG được nội tuyến trực tiếp vào HTML:

SVG hiện là một phần của DOM.

Bạn có thể xác định chiều rộng và chiều cao của hình ảnh SVG trong CSS như sau:

#invader {display: block; width: 200px;} #invader path {stroke-width: 0; fill: # 080;} Xem Bút ký của SitePoint SVG có nội dung HTML (

SitePoint) trên CodePen.

Các phần tử SVG như đường dẫn, hình tròn hoặc hình chữ nhật có thể được tạo kiểu giống như CSS:

/ * Kiểu CSS cho tất cả các vòng tròn SVG * / circle {stroke-width: 20; stroke: # f00; padding: # ff0;}

Khi chỉnh sửa như vậy, nó sẽ ghi đè bất kỳ thuộc tính nào được xác định trong SVG vì CSS được ưu tiên hơn. SVG CSS có nhiều lợi ích:

Các kiểu dựa trên thuộc tính có thể bị xóa khỏi SVG để giảm kích thước trang. CSS có thể được sử dụng lại cho các hình ảnh SVG khác trên các trang khác nhau. Các hiệu ứng CSS có thể được sử dụng trên SVG như: di chuột, hoạt ảnh, chuyển tiếp…

SVG sprites là gì?

Thuật ngữ Sprites thực sự là một kỹ thuật để đưa tất cả các hình ảnh trang trí, chẳng hạn như biểu tượng hoặc nút, vào một tệp hình ảnh duy nhất. Sau đó, sử dụng thuộc tính background-position trong CSS để hiển thị đúng vị trí bạn muốn. Ưu điểm của kỹ thuật này là bạn phải nhận nhiều yêu cầu về hình ảnh nhỏ, không phải máy chủ… khiến trang web của bạn tải chậm hơn. Bây giờ bạn chỉ cần đặt tất cả ảnh vào một và máy chủ chỉ nhận được một yêu cầu khiêm tốn, chưa kể ảnh sẽ nhỏ hơn nhiều ảnh khác cộng lại.

SVG cũng có các sprites, giống như các hình ảnh thông thường. Tệp SVG có thể chứa bất kỳ số lượng hình ảnh nào. Ví dụ: tệp .svg này chứa thư mục biểu tượng được tạo bởi IcoMoon. Mỗi biểu tượng được chứa trong một thẻ và có một ID duy nhất.

Tham khảo: Backspace Là Gì?

Mở thư mục cộng trừ tải lên tải xuống

Tất nhiên, SVG File không thể được sử dụng 100% thời gian. Nhược điểm của SVG là hạn chế về chi tiết và màu sắc, tất nhiên chúng ta có thể vẽ những hình ảnh phức tạp bằng SVG, hoặc photo-real, nhưng nếu làm vậy thì hiệu suất sẽ kém.

Hãy thường xuyên truy cập website Riviera Cove của chúng tôi để cập nhật nhiều thông tin hữu ích nhé!

The post Svg File Là Gì? appeared first on Riviera Cove.

Click here for more...
from #Bangladesh #News aka Bangladesh News Now!!!