Tự học HTML - Bài 28 - Xử lý Đồ họa – SVG

SVG là gì?

·         SVG dùng để xác định đồ họa dạng vector dưới định dạng XML.

·         SVG dùng trong đồ họa web.

·         SVG hợp với chuẩn W3C.

Thẻ <svg>

Thẻ HTML <svg> chứa đồ họa SVG.

SVG có thể vẽ đường, khối hộp, vòng tròn, chữ và chèn ảnh.

SVG hình tròn

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

SVG hình chữ nhật

<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>

SVG 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>

SVG ngôi sao

<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>

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>

Sự khác nhau giữa SVG và Canvas

SVG là 01 ngôn ngữ dùng mô tả đồ họa 2D trong XML.

Canvas vẽ đồ họa 2D thông qua JavaScript.

SVG có cú pháp XML, trong đó tất cả phần tử nằm trong mô hình SVG DOM. Bạn có thể thêm phần xử lý sự kiện trên mỗi phần tử bằng JavaScript.

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

Canvas được hiển thị từng điểm ảnh một. Trong canvas, 01 khi hình được vẽ lên, trình duyệt sẽ quên nó đi. Nếu vị trí của nó thay đổi, toàn bộ “tấm vải” sẽ được vẽ lại, bao gồm tất cả hình bên trong “tấm vải”.

Canvas	SVG
Độ phân giải không độc lập. Không hỗ trợ xử lý sự kiện. Khả năng hiển thị chữ kém Bạn có thể lưu ảnh kết quả dạng .png hay .jpg Phù hợp cho các trò chơi đồ họa.	Độ phân giải độc lập. Hỗ trợ xử lý sự kiện. Cực kì phù hợp cho các ứng dụng hiển thị diện tích lớn(Google Maps) Hiển thị chậm nếu hình phức tạp (bất kỳ thứ gì dùng mô hình DOM nhiều sẽ chậm) Không phù hợp cho các ứng dụng trò chơi.

Nếu vẫn chưa rõ các bạn xem thêm video clip sau:

 

Xem MỤC LỤC BÀI VIẾT VỀ HTML

• Đăng ký kênh tại đây: https://www.youtube.com/channel/UCXjV9sLt3WgamL7vofLofow?sub_confirmation=1
• Trang fan page: https://www.facebook.com/lophocvitinhcom
• Trang web: http://lophocvitinh.com

Sưu tầm bởi #drM