Show
Đã đăng vào thg 4 19, 2019 9:42 SA 1 phút đọc 1 phút đọc Lời nói đầuCác tính năng ưu việt của svg đã có quá nhiều các bài viết nói về nó, trong bài viết này mình sẽ chỉ giới thiệu về cách sử dụng SVG trong HTML/CSS. 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: :
Dùng trong HTML thế nào?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.
Dùng thông qua thẻ IMGHoặc bạn có thể dùng qua thẻ IMG như một hình ảnh bình thường. Dùng trong CSS thế nào?
Sử dụng Background Image
Sử dụng Mask Imagevới width, height và background color tương ứng
NguồnBài viết phía trên được tham khảo từ Techblog.vn :https://techblog.vn/su-dung-file-svg-cho-website và một số nguồn khác. Phần tới mình sẽ cùng tìm hiểu một số hiệu ứng khá hay khi sử dụng SVG All rights reserved Hướng dẫn bỏ túi để viết SVG ------------------------------------------------------ By Joni Tryhall -----------------------------------------------------Tổng quan
Trước khi bắt đầu
Sử dụng SVG
Phần mềm vẽ vector
Inline SVG cho web
Những thuộc tính này xác định phiên bản của SVG đang được sử dụng và không gian tên của tài liệu. Những điều cần nhớ vào thời điểm này là bạn sẽ thường không cần phải bao gồm những thuộc tính này để làm thành đồ họa của bạn trong trình duyệt. Chúng ta hãy nhìn vào những thuộc tính này bây giờ, trong một ví dụ về mã SVG tạo ra bởi Illustrator, để đảm bảo không làm bạn ngạc nhiên khi bắt đầu:
Khả năng tiếp cận của người dùng
Một khi bạn trở thành kinh nghiệm hơn SVG viết bao gồm cả những yếu tố này sẽ làm cho đồ họa của bạn dễ tiếp cận hơn cho người dùng. Ví dụ, nội dung bên trong phần tử cho phép bạn để cung cấp một mô tả chi tiết của một đồ họa cho người dùng với các trình đọc màn hình. SVG text cũng cung cấp một lợi thế rất lớn so với hình ảnh raster dựa trên truyền thống về khả năng tiếp cận bởi vì SVG text được phát hiện và đọc, và có thể dễ dàng thay đổi kích cỡ để phù hợp với sở thích đọc cụ thể. Ghi chú tổng quan
Các ví dụ trong suốt sử dụng đúng pixel và tỷ lệ phần trăm như là định danh đơn vị. đơn vị chiều dài hỗ trợ cho SVG là: em, ex, px, pt, pc, cm, mm, in, và tỷ lệ phần trăm. Mã SVG trong cuốn sách này có thể được thêm vào bất kỳ soạn thảo văn bản và sau đó xem trong bất kỳ trình duyệt có hỗ trợ Inline SVG. Trong khi trình duyệt hỗ trợ rất mạnh cho SVG nói chung, hỗ trợ này có thể trở nên ít phù hợp với nhiều tính năng tiên tiến như gradients, ví dụ. caniuse.com là một nơi tuyệt vời để kiểm tra hỗ trợ cho các loại tính năng, nhưng cuối cùng không có gì sẽ đánh bại những gì bạn học được qua thử và sai. Tất cả những gì đang được nói, bạn cũng có thể sao chép các mã như là, đặt nó vào phần HTML của 1 pen tại CodePen, và ngay lập tức nhìn thấy ảnh của bạn trên màn hình. Tôi không thể nói hết những điều tuyệt vời về công cụ này vì nó là cơ bản những gì tôi đã quan tâm đến SVG ở lần đầu tiên. Đó là cách yêu thích của tôi để tìm hiểu về: chơi, mày mò, và đôi khi thậm chí thất bại thảm hại. Cuối cùng, một số ví dụ sẽ có các phần của mã của một đồ họa bị comment ra để giảm thiểu kích thước của khối mã, khi mà phần đặc biệt là không liên quan đến chủ đề này.
Section 1. Document OrganizationThông tin của SVG đặt ở trong một phần tử . Phần tử này có chứa một số thuộc tính mà cho phép tuỳ biến bằng "canvas". Trong khi 1 số thuộc tính không hoàn toàn cần thiết để tạo một hình ảnh, bỏ qua chúng có thể để lại đồ họa phức tạp hơn dễ bị ảnh hưởng thay đổi khi hiển thị trên các trình duyệt và làm cho nó dễ bị không render như dự định. Như đã đề cập, hình ảnh inline có thể được viết "bằng tay", hoặc nhúng bằng cách truy cập vào các mã XML được tạo ra bởi phần mềm đồ họa vector. Dù bằng cách nào, tổ chức và cấu trúc phù hợp là rất quan trọng để viết mã SVG hiệu quả, chủ yếu là bởi vì thứ tự của các yếu tố đồ họa xác định thứ tự sắp xếp của chúng. Tổ chức & ngữ nghĩaMột đoạn tài liệu SVG được tạo thành bất kỳ số phần tử SVG chứa trong thẻ 4. Tổ chức trong tài liệu này là rất quan trọng. Nội dung trong tài liệu có thể mở rộng nhanh chóng, và tổ chức thích hợp thúc đẩy khả năng tiếp cận và hiệu quả trong suốt, mang lại lợi ích cả người tạo và người sử dụng. Phần này sẽ giới thiệu các cách để viết SVG - các thẻ 4 - và xem xét một số các thuộc tính phổ biến mà hỗ trợ trong việc thiết lập tài liệu ban đầu.svg ElementCác 4 được phân loại là cả một container và một yếu tố cấu trúc, và có thể được sử dụng để làm tổ một mảnh SVG độc bên trong tài liệu. đoạn này thiết lập hệ tọa độ riêng của mình. Các thuộc tính được sử dụng trong phần này, chẳng hạn như 7, 8, 9 và 0 xác định canvas cho đồ họa bằng văn bản. Khi lấy được mã SVG từ phần mềm vector nhất định có rất nhiều thông tin bổ sung trong phần tử 4, chẳng hạn như số phiên bản SVG (chỉ ra các phiên bản ngôn ngữ SVG đang được sử dụng) và DOCTYPE. Như tôi đã đề cập, thông tin đó sẽ không được bao gồm trong các ví dụ trong suốt hướng dẫn này, và loại trừ chúng sẽ không ngăn đồ họa của bạn vẽ trên màn hình.g ElementCác yếu tố g là một yếu tố container cho nhóm đồ họa có liên quan với nhau. Bằng cách sử dụng các yếu tố này kết hợp với mô tả và tiêu đề các yếu tố cung cấp thông tin về đồ họa của bạn, và hỗ trợ trong việc tổ chức và khả năng tiếp cận bằng cách nhóm các thành phần đồ họa có liên quan với nhau. Ngoài ra, bằng cách nhóm các yếu tố liên quan với nhau, bạn có thể thao tác với các nhóm như một so với các bộ phận riêng rẽ. Điều này đặc biệt có ích khi tạo hiệu ứng động, ví dụ như các hình ảnh động có thể được áp dụng cho nhóm. Bất kỳ yếu tố nào không được chứa trong một g được giả định là nhóm riêng của mình. use Elementphần tử 2 cho phép bạn sử dụng lại các yếu tố trong suốt một tài liệu. Có các thuộc tính bổ sung có thể bao gồm trong phần này, chẳng hạn như x, y, width, và height, trong đó xác định các chi tiết vị trí bản đồ của đồ họa trong hệ thống phối hợp. Sử dụng XLink: thuộc tính href đây cho phép bạn gọi vào các yếu tố được sử dụng lại. Ví dụ, nếu có một 3 với một id là "apple" có chứa những hình ảnh của một quả táo cần thiết để được tái sử dụng hình ảnh này có thể được tham chiếu bởi 2: 5. Phần tử này có thể là một cách tiết kiệm thời gian đáng kể và giúp giảm thiểu mã cần thiết.defs ElementTrong khi 2 cho phép tái sử dụng một hình ảnh đã được trả lại, đồ họa của một 7 không rendered vào canvas, nhưng có thể được tham chiếu và sau đó hiển thị thông qua việc sử dụng các XLink: href. Đồ họa được định nghĩa trong 7 và sau đó có thể được sử dụng trong suốt tài liệu bằng cách tham chiếu tới các id của đồ họa. Ví dụ, đoạn code sau vẽ một gradient rất đơn giản trong một hình chữ nhật:
Nội dung của 7 không có đưa ra hình ảnh cho đến khi gọi bằng cách tham chiếu tới id duy nhất của nó, mà trong trường hợp này đang được thực hiện thông qua các thuộc tính Fill của hình chữ nhật.symbol ElementCác 0 tương tự như 3 vì nó cung cấp một cách để các phần tử nhóm, tuy nhiên, các yếu tố bên trong 0 không có đầu ra hình ảnh (như 7) cho đến khi được gọi với 2. Cũng không giống như các phần tử 3, 0 thiết lập hệ tọa độ riêng của mình tách biệt với khung nhìn nó render. SVG khung nhìn và viewBox, thiết lập những hệ thống phối hợp với các đồ họa được vẽ bản đồ, sẽ được giải quyết trong một phần khác.Stacking OrderCác thứ tự sắp xếp của SVG không thể được tùy chỉnh bởi z-index trong CSS như các yếu tố khác trong HTML. Thứ tự mà các yếu tố SVG được xếp chồng lên nhau phụ thuộc hoàn toàn vào vị trí của chúng trong tài liệu. Chùm nho và dưa hấu dưới đây nằm trong cùng một phần tử 4. Dưa hấu xuất hiện ở phía trước chùm nho vì nhóm chứa các đường dẫn mà tạo nên dưa hấu được liệt kê sau khi nho trong tài liệu.
Nếu nhóm có chứa nho đã được chuyển đến phần cuối của tài liệu này thì chùm nho sẽ xuất hiện ở phía trước quả dưa hấu. 0Phương pháp này xác định thứ tự sắp xếp cũng áp dụng đối với các phần tử riêng biệt trong nhóm. Chương 2 Chương 3update Chương 4update Chương 5update Chương 6update Dịch từ : http://svgpocketguide.com/book |