Mã html vòng tròn

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”, do 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 hay được sử dụng bởi những tiện ích mà nó mang lại. Vậy SVG là gì?

>> Xem ngay Tài liệu Java Core giúp bạn “Nâng cấp” kỹ năng lập trình

SVG là gì?

SVG [Scalable Vector Graphics] là định dạng ảnh vector được sử dụng để hiển thị 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 [tỷ lệ] 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 tiêu chuẩn khác như HTML, XHTML… Các tập tin có đuôi “. svg” được mặc định hiểu là SVG file. SVG có thể phóng to thu nhỏ mọi kích thước mà không làm giảm chất lượng hình ảnh. Vì thế, nó được sử 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ên thu hút 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? . Các điểm này sẽ được kết nối với nhau trong khoảng thời gian không hai để tạo nên các hình ảnh thực tế. Bởi vì khía cạnh này chỉ mang tính tương đối với hệ thống tại thời điểm vẽ nên 1 đơn vị trong đồ họa vector có thể là 10 pixel, 20 pixel hoặc 100 pixel

Chèn ảnh SVG vào trang

Ảnh SVG có thể được lưu thành tệp riêng biệt với trang hoặc vẽ trực tiếp trên trang. Nếu lưu tệp riêng biệt ví dụ 

4 thì ảnh được thêm vào trang bằng cách sử dụng thẻ 

5

Ví dụ tạo nội dung 

6 như sau và ghi lại thành tệp 

4

Kết quả

Create SVG image

Các ảnh SVG được tạo ra bằng cách bắt đầu sử dụng thẻ 

8, cú pháp có định 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 

9

Các thuộc tính trong 

9 là

• cx location trí, tính từ mép trái của SVG
• cy location trí, tính từ lật trên
• r bán kính
• điền xác định màu tô
• nét vẽ đường biên

Kết quả

Vẽ hình elip SVG

Sử dụng 

    ....các thẻ vẽ, thiết lập ở đây

1 để vẽ hình elip

2

Kết quả

Vẽ hình vuông

Sử dụng 

    ....các thẻ vẽ, thiết lập ở đây

2 để vẽ hình vuông

4

Kết quả

Vẽ đoạn thẳng SVG

Sử dụng 

    ....các thẻ vẽ, thiết lập ở đây

3 để vẽ các đoạn thẳng

6

Kết quả

Vẽ các đường gấp khúc svg

Sử dụng 

    ....các thẻ vẽ, thiết lập ở đây

4 để vẽ đường gấp khúc, trong đó thuộc tính 

    ....các thẻ vẽ, thiết lập ở đây

5 theo tứ tự chỉ ra các tọa độ 

    ....các thẻ vẽ, thiết lập ở đây

6 của các điểm cần nối lại với nhau

0

Kết quả

Vẽ hình đa giác trong svg

Sử dụng 

    ....các thẻ vẽ, thiết lập ở đây

7 đa giác, trong đó 

    ....các thẻ vẽ, thiết lập ở đây

5 xác định tọa độ 

    ....các thẻ vẽ, thiết lập ở đây

6 của các đỉnh đa giác

4

Kết quả

Vẽ theo đường path – svg

Sử dụng 

0 để vẽ các hình phức tạp, đường dẫn để vẽ được định nghĩa trong các thuộc tính 

1

Các lệnh sử dụng trong thuộc tính

2 là

• 3. di chuyển điểm vẽ đến tọa độ x, y [
  4]

• 5. điểm vẽ từ hiện tại đến điểm x, y [
  6]

• 7. vẽ đường ngang từ điểm hiện tại đến điểm có tọa độ x [_______98]

• 9. đường vẽ thẳng đến điểm có tọa độ y [
  20]

• 21. vẽ đường cong cube-bezier từ điểm hiện tại x0, y0 đến điểm x, y. điểm đầu của đường cong thẳng với đường thẳng x0,y0, x1, y1 điểm thứ 2 của đường cong thẳng với tường x,y, x2, y2 
  22

• 23. vẽ đường cong trơn từ điểm hiện tại x0, y0 đến điểm x, y trong đó điểm đầu tuyến với đường x0,y0, x2, y2 
  24

• 25. vẽ đường cong cube-bezier từ điểm hiện tại x0, y0 đến điểm x, y. điểm đầu đường cong thẳng với đường thẳng x0,y0, x1, y1 điểm thứ 2 của đường cong thẳng với tường x,y, x1, y1 
  26

• 27. vẽ đường cong khối-bezier, từ điểm hiện tại đến điểm x,y [
  28]

• 29. vẽ cung tròn

• 40. close road drawing

6

Kết quả

Ảnh động SVG

Sử dụng 

41 để tạo ảnh động, ví dụ

0

Kết quả

Trong 

41 có các thuộc tính

• 43. chỉ thuộc tính sẽ được tác động để tạo ảnh động

• 44. Thuộc tính value value was ban đầu

• 45. giá trị thuộc tính nhận được ở điểm cuối của hoạt động

• 46. diễn đàn time image

• 47. cách thiết lập khởi tạo khi bắt đầu khởi động 
  48 khởi tạo giá trị, 
  49 giữ giá trị ban đầu

• 60. only out of the timesặp lại [
  61 lặp lại vô tận]

Chèn chữ vào SVG

Để thêm chữ vào SVG bắt đầu tại vị trí [x,y] thì sử dụng 

62 ví dụ

1

Kết quả

Chào thế giới

62 có các thuộc tính. họ phông chữ, kiểu phông chữ, trọng lượng phông chữ, biến thể phông chữ, độ giãn phông chữ, cỡ chữ, điều chỉnh cỡ chữ, kerning, khoảng cách chữ cái, khoảng cách từ, trang trí văn bản

tspan

Dùng để định dạng thêm chữ trong

64

2

Kết quả

Chào thế giới. Đây là màu đậm và màu đỏ

đường dẫn văn bản

Vẽ văn bản theo một đường cho trước

3

Kết quả

Văn bản này đi theo một đường cong

tool

Sử dụng công cụ sau để vẽ nhanh SVG. https. //inkscape. tổ chức/vi/

Kết luận

Qua đây là một số chia sẻ về việc sử dụng SVG trong HTML, mời các bạn tiếp tục theo dõi các bài viết sau để hiểu rõ hơn về HTML