SVG HTML là gì ?
SVG là viết tắt của Scalable Vector Graphic, nó có nghĩa là Đồ họa vector.
SVG <svg> được định nghĩa dưới dạng XML và đồ họa vector.
SVG không dựa vào các điểm ảnh pixel để tạo nên hình ảnh mà thay vào đó là dữ liệu vector nên có thể thoải mái khéo co giãn, phóng to hay thu nhỏ ảnh mà không làm ảnh hưởng đến chất lượng hình ảnh. Bằng cách sử dụng SVG, bạn sẽ nhận được hình ảnh có thể mở rộng đến bất kỳ độ phân giải nào.
SVG được sử dụng để tạo và vẽ đồ họa cho web như tạo icon, logo, hình ảnh, hiệu ứng hình ảnh, hoạt ảnh (Animations)...
SVG có thể tích hợp và tương tác SVG với CSS, DOM, XSL và JavaScript.
Bạn có thể sử dụng Javascript để tương tác với SVG để vẽ đồ họa các hình : Hình chữ nhật, hình tròn, hình Elip, hình tam giác, đường thắng, đường cong, đa giác... và các hiệu ứng lọc ảnh, làm mờ ảnh, xoay ảnh, tạo ảnh chuyển động...
Cách tạo ảnh SVG
Ví dụ
<!DOCTYPE html>
<html>
<body>
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" rx="10" ry="10" fill="green" />
<ellipse cx="100" cy="50" rx="80" ry="45" fill="yellow" />
<text x="100" y="60" font-size="30" text-anchor="middle" fill="red">SVG</text>
</svg>
</body>
</html>
Kết quả:
Tạo hình chữ nhật Rectangle trong SVG
Ví dụ
<svg width="200" height="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="green" />
</svg>
Kết quả:
Tạo hình tròn Circle trong SVG
Ví dụ
<svg width="160" height="160" xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="50" stroke="green" stroke-width="4" fill="yellow" />
</svg>
Kết quả:
Tạo hình Elilpse trong SVG
Ví dụ
<svg width="200" height="160" xmlns="http://www.w3.org/2000/svg">
<ellipse cx="100" cy="60" rx="80" ry="55" stroke="green" stroke-width="3" fill="orange" />
</svg>
Kết quả:
Tạo hình ngôi sao Star trong SVG
Ví dụ
<svg width="300" height="200">
<polygon points="100,10 40,198 190,78 10,78 160,198"
style="fill:yellow;stroke:#f70202;stroke-width:5;fill-rule:evenodd;" />
</svg>
Kết quả:
Tạo chữ Text trong SVG
Ví dụ
<svg width="250" height="100" xmlns="http://www.w3.org/2000/svg">
<rect width="100%" height="100%" fill="green" />
<text fill="#ffffff" font-size="25" font-family="Verdana" x="60" y="36"> Học SVG </text>
<text fill="#ffffff" font-size="14" font-family="Verdana" x="20" y="66"> Tại website: ihoclaptrinh.com </text>
</svg>
Kết quả:
