Đã đăng vào thg 4 19, 2019 9:42 SA 1 phút đọc
Lời nói đầu
Cá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
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ẻ IMG
Hoặ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
.icon-facebook {
background-image: url["facebook.svg"];
...
}
Sử dụng Mask Image
với width, height và background color tương ứng
.icon-facebook {
mask-image: url['facebook.svg'];
display: block;
width: 20px;
height: 20px;
background-color: blue;
}
Nguồn
Bài viết phía trên được tham khảo từ Techblog.vn ://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ệu
- SVG là gì?
- Chèn ảnh SVG vào trang
- Tạo ảnh SVG
- Vẽ các hình trong SVG
- Vẽ hình tròn SVG
- Vẽ hình ellipse SVG
- Vẽ hình vuông
- Vẽ đoạn thẳng SVG
- Vẽ các đường gấp khúc svg
- Vẽ hình đa giác trong svg
- Vẽ theo đường dẫn path – svg
- Ảnh động SVG
- Chèn chữ vào SVG
- tspan
- textPath
- Công cụ
- Kết luận
Giới thiệu
Việ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ụ image.svg
thì ảnh được chèn vào trang bằng cách sử dụng thẻ img
Ví dụ tạo nội dung svg
như sau và ghi lại thành file image.svg
Kết quả:
Tạo ảnh SVG
Các ảnh SVG được tạo ra bằng cách bắt đầu sử dụng thẻ , cú pháp có dạng:
....các thẻ vẽ, thiết lập ở đây
Vẽ các hình trong SVG
Vẽ hình tròn SVG
Sử dụng thẻ vẽ hình tròn
Các thuộc tính trong là:
- cx vị trí tâm, tính từ mép trái của SVG
- cy vị trí tâm, tính từ mép trên
- r bán kính
- fill xác định màu tô
- stroke thêm đường biên
Kết quả:
Vẽ hình ellipse SVG
Dùng để vẽ ellipse:
Kết quả:
Vẽ hình vuông
Dùng để
vẽ hình vuông:
Kết quả:
Vẽ đoạn thẳng SVG
Dùng để vẽ các đoạn thẳng:
Kết quả:
Vẽ các đường gấp khúc svg
Dùng để vẽ đường gấp khúc, trong đó thuộc tính
points
theo tứ tự chỉ ra các tọa độ x,y
của các điểm cần nối lại với nhau:
Kết quả:
Vẽ hình đa giác trong svg
Dùng đa
giác, trong đó
points
xác định tọa độ x,y
của các đỉnh đa giác:
Kết quả:
Vẽ theo đường dẫn path – svg
Sử dụng để vẽ các hình phức tạp, đường dẫn để vẽ được định nghĩa trong thuộc tính
d="cách - lệnh vẽ"
Các lệnh sử
dụng trong thuộc tính d
là:
M
: di chuyển điểm vẽ đến tọa độ x, y [M x y
]L
: vẽ từ điểm hiện tại đến điểm x, y [L x y
]H
: vẽ đường ngang từ điểm hiện tại đến điểm có tọa độ x [H x
]V
: vẽ đường thẳng đứng đến điểm có tọa độ y [V y
]C
: vẽ đường cong cubic-bezier từ điểm hiện tại x0, y0 đến điểm x, y. điểm đầu đường cong tiếp tuyến với đường thẳng x0,y0, x1, y1 điểm thứ 2 của đường cong tiếp tuyến với tường x,y, x2, y2C x1 y1, x2 y2, x, y
S
: vẽ đường cong trơn từ điểm hiện tại x0, y0 đến điểm x, y trong đó điểm đầu tiếp tuyến với đường x0,y0, x2, y2S x2 y2, x y
Q
: vẽ đường cong cubic-bezier từ điểm hiện tại x0, y0 đến điểm x, y. điểm đầu đường cong tiếp tuyến với đường thẳng x0,y0, x1, y1 điểm thứ 2 của đường cong tiếp tuyến với tường x,y, x1, y1C x1 y1, x y
T
: vẽ đường cong cubic-bezier, từ điểm hiện tại đến điểm x,y [T x y
]A
: vẽ cung trònZ
: đóng đường vẽ
Kết quả:
Ảnh động SVG
Sử dụng để tạo ảnh động, ví dụ:
Kết quả:
Trong có các thuộc tính:
attributeName
: chỉ ra thuộc tính sẽ bị tác động để tạo ảnh động.from
: giá trị thuộc tính nhận được ban đầuto
: giá trị thuộc tính nhận được ở điểm cuối của hoạt độngdur
: thời gian ảnh động diễn rafill
: cách thiết lập khởi tạo tạo khi bắt đầu độngremove
khởi tạo giá trị,freeze
giữ giá trị ban đầu.repeatCount
: chỉ ra số lần lặp lại [indefinite
lặp lại vô tận]
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 ví dụ:
Hello World!
Kết quả:
Hello World! có các thuộc tính: font-family, font-style, font-weight, font-variant, font-stretch, font-size, font-size-adjust, kerning, letter-spacing, word-spacing, text-decoration.
tspan
Dùng để định dạng thêm chữ trong text
Hello World! This is bold and red
Kết quả:
Hello World! This is bold and redtextPath
Vẽ text theo một đường cho trước:
This text follows a curve.
Kết quả:
This text follows a curve.Công cụ
Sử dụng công cụ sau để vẽ nhanh SVG: //inkscape.org/en/
Kết luận
Qua đâ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.