[Tự Học HTML] Tìm Hiểu Về SVG Và Sự Khác Nhau Với Canvas Trong ...

Trang chủ » Học Svg » [Tự Học HTML] Tìm Hiểu Về SVG Và Sự Khác Nhau Với Canvas Trong ...

Có thể bạn quan tâm

🔥CHỌN LỌC TOP NHỮNG KHOÁ HỌC LẬP TRÌNH ONLINE NHIỀU NGƯỜI THEO HOC TẠI ĐÂY🔥

Cafedev chia sẻ về SVG, nó là gì? SVG – Nó định nghĩa đồ họa dựa trên vector theo định dạng XML.

Nội dung chính

Toggle
  • 1. SVG
  • 2. Phần tử <svg>
  • 3. Browser hỗ trợ nó
  • 4. Vẽ SVG với hình tròn
  • 5. Vẽ hình chữ nhật với SVG
  • 6. Vẽ hình chữ nhật và bo góc
  • 7. SVG Star
  • 8. SVG Logo
  • 10. Sự khác biệt giữa SVG và Canvas
      • Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

1. SVG

  • SVG là viết tắt của Đồ họa vectơ có thể mở rộng(Scalable Vector Graphics)
  • SVG được sử dụng để xác định đồ họa cho Web
  • SVG là một khuyến nghị của W3C

2. Phần tử <svg>

Phần tử <svg> trong HTML là một thùng chứa cho đồ họa SVG.

SVG có một số phương pháp để vẽ đường, hộp, vòng tròn, văn bản và hình ảnh đồ họa.

3. Browser hỗ trợ nó

Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ phần tử <svg>.

ElementChromeIEfirefoxsafariopera
<svg>4.09.03.03.210.1

4. Vẽ SVG với hình tròn

<!-- Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam @author cafedevn Contact: [email protected] Fanpage: https://www.facebook.com/cafedevn Group: https://www.facebook.com/groups/cafedev.vn/ Instagram: https://instagram.com/cafedevn Twitter: https://twitter.com/CafedeVn Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/ Pinterest: https://www.pinterest.com/cafedevvn/ YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/ --> <!DOCTYPE html> <html> <body> <svg width="100" height="100"> <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" /> </svg> </body> </html>

Copy and chạy code

5. Vẽ hình chữ nhật với SVG

<svg width="400" height="100"> <rect width="400" height="100" style="fill:rgb(0,0,255);stroke-width:10;stroke:rgb(0,0,0)" /> </svg>

Copy and chạy code

6. Vẽ hình chữ nhật và bo góc

<svg width="400" height="180"> <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" /> </svg>

Copy and chạy code

7. SVG Star

<!-- Cafedev.vn - Kênh thông tin IT hàng đầu Việt Nam @author cafedevn Contact: [email protected] Fanpage: https://www.facebook.com/cafedevn Group: https://www.facebook.com/groups/cafedev.vn/ Instagram: https://instagram.com/cafedevn Twitter: https://twitter.com/CafedeVn Linkedin: https://www.linkedin.com/in/cafe-dev-407054199/ Pinterest: https://www.pinterest.com/cafedevvn/ YouTube: https://www.youtube.com/channel/UCE7zpY_SlHGEgo67pHxqIoA/ --> <svg width="300" height="200"> <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg>

Copy and chạy code

8. SVG Logo

<svg height="130" width="500"> <defs> <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> </linearGradient> </defs> <ellipse cx="100" cy="70" rx="85" ry="55" fill="url(#grad1)" /> <text fill="#ffffff" font-size="45" font-family="Verdana" x="50" y="86">SVG</text> Sorry, your browser does not support inline SVG. </svg>

10. Sự khác biệt giữa SVG và Canvas

SVG là ngôn ngữ để mô tả đồ họa 2D bằng XML.

Canvas vẽ đồ họa 2D, nhanh chóng (bằng JavaScript).

SVG dựa trên XML, có nghĩa là mọi phần tử đều có sẵn trong SVG DOM. Bạn có thể đính kèm các trình xử lý sự kiện JavaScript cho một phần tử.

Trong SVG, mỗi hình dạng được vẽ được ghi nhớ như một đối tượng. Nếu các thuộc tính của đối tượng SVG bị thay đổi, trình duyệt có thể tự động kết xuất lại hình dạng.

Canvas được hiển thị pixel theo pixel. Trong canvas, một khi đồ họa được vẽ, nó sẽ bị trình duyệt quên lãng. Nếu vị trí của nó phải được thay đổi, toàn bộ cảnh cần được vẽ lại, bao gồm bất kỳ đối tượng nào có thể được bao phủ bởi đồ họa.

Bảng bên dưới cho thấy một số khác biệt quan trọng giữa Canvas và SVG:

CanvasSVG
– Độ phân giải phải phụ thuộc. – Không hỗ trợ xử lý sự kiện– Khả năng kết xuất văn bản kém– Bạn có thể lưu hình ảnh kết quả là .png hoặc .jpg– Rất thích hợp cho các game chuyên sâu về đồ họa. – Độ phân giải độc lập– Hỗ trợ xử lý sự kiện– Phù hợp nhất cho các ứng dụng có khu vực kết xuất lớn (Google Maps)– Kết xuất chậm nếu phức tạp (mọi thứ sử dụng DOM nhiều sẽ chậm)– Không phù hợp với các ứng dụng trò chơi

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

  • Group Facebook
  • Fanpage
  • Youtube
  • Instagram
  • Twitter
  • Linkedin
  • Pinterest
  • Trang chủ

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

Từ khóa » Học Svg