HTML5 SVG
SVG là gì?
SVG là viết tắt của Scalable Vector Graphics (một định dạng hình ảnh, tương tự như JPG, PNG,…) 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.
Phần tử HTML <svg>
Phần tử HTML <svg> là bộ chứa cho đồ họa SVG.
SVG có nhiều phương thức để vẽ các đường thẳng, hình hộp, hình tròn, văn bản, và hình ảnh.
SVG hình tròn
Ví dụ
<!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>
SVG hình chữ nhật
Ví dụ
<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 hình chữ nhật bo tròn
Ví dụ
<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
Ví dụ
<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
Ví dụ
<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>
Khác biệt giữa SVG là Canvas
SVG là ngôn ngữ để mô tả đồ họa 2D trong XML.
Canvas vẽ đồ họa 2D, nhanh chóng (với 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ị theo từng pixel. Trong canvas, một khi đồ họa được vẽ, nó sẽ bị trình duyệt quên đi. 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.
So sánh giữa Canvas và SVG
|
Canvas |
SVG |
|
|
Trích nguồn từ: (https://www.w3schools.com/html/html5_svg.asp)
