Trong html, bạn có thể nhúng các phần tử svg trực tiếp vào một trang html.
Show
Đã đăng vào thg 4 19, 2019 9:42 SA 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
Giới thiệuViệc hiển thị hình ảnh trên nhiều màn hình có kích thước khác nhau là một vấn đề “đau đầu”, bởi cách sử dụng CSS thông thường rất tốn thời gian và công sức. Thay vào đó, thủ thuật SVG trong HTML lại rất được ưa chuộng bởi những tiện ích mà nó mang lại. Vậy SVG là gì? Hãy cùng tìm hiểu ngay nhé! >> Xem ngay Tài liệu Java Core giúp bạn “Nâng Cấp” kỹ năng lập trình SVG (Scalable Vector Graphics) là định dạng ảnh vector dùng để thể hiện các đối tượng đồ họa hai chiều và có hỗ trợ tương tác từ phía người dùng cũng như ảnh động. 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. SVG thuộc tiêu chuẩn mở và được quản lý bởi tổ chức World Wide Web Consortium, một tổ chức quản lý nhiều chuẩn khác như HTML, XHTML… Các tập tin có đuôi “.svg” được mặc định hiểu là tập tin SVG. SVG có thể phóng to thu nhỏ mọi kích cỡ mà không giảm chất lượng hình ảnh. Vì thế, nó được dùng nhiều trong các bản đồ, sơ đồ. Điều gì làm cho đồ họa vector trở nên hấp dẫn đến mức rất nhiều công ty lớn trong ngành công nghệ cũng như hãng phần mềm thiết kế nhảy vào cùng phát triển? Bạn có thể tưởng tượng rằng trong đồ họa vector, mọi đường thẳng, đường cong, hình tròn, hình chữ nhật… đều được vẽ ra đều dựa vào các điểm tọa độ. Các điểm này sẽ được nối với nhau trong không gian hai chiều để tạo nên các hình ảnh thực sự. Bởi vì tọa độ này chỉ mang tính tương đối so với hệ trục tại thời điểm vẽ nên 1 đơn vị trong đồ họa vector có thể là 10 pixel, 20 pixel hay 100 pixel. Chèn ảnh SVG vào trangẢnh SVG có thể được lưu thành file riêng biệt với trang hoặc vẽ trực tiếp trên trang. Nếu lưu ra file riêng biệt ví dụ Ví dụ tạo nội dung Kết quả: Tạo ảnh SVGCác ảnh SVG được tạo ra bằng cách bắt đầu sử dụng thẻ Vẽ các hình trong SVGVẽ hình tròn SVGSử dụng thẻ vẽ hình tròn Các thuộc tính trong
Kết quả: Vẽ hình ellipse SVGDùng Kết quả: Vẽ hình vuôngDùng Kết quả: Vẽ đoạn thẳng SVGDùng Kết quả: Vẽ các đường gấp khúc svgDùng Kết quả: Vẽ hình đa giác trong svgDùng Kết quả: Vẽ theo đường dẫn path – svgSử dụng Các lệnh sử
dụng trong thuộc tính
Kết quả: Ảnh động SVGSử dụng Kết quả: Trong
Chèn chữ vào SVGĐể thêm chữ vào SVG bắt đầu tại tọa độ (x,y) thì sử dụng Kết quả: Hello World!
tspanDùng để định dạng thêm chữ trong Kết quả: Hello World! This is bold and redtextPathVẽ text theo một đường cho trước: Kết quả: This text follows a curve.Công cụSử dụng công cụ sau để vẽ nhanh SVG: https://inkscape.org/en/ Kết luậnQua đây là một số chia sẻ về sử dụng SVG trong HTML, mời bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML. Các bạn có thể tham khảo các bài viết hay về HTML tại đây. Hãy tham gia nhóm Học lập trình để thảo luận thêm về các vấn đề cùng quan tâm. |