[Bài 5]: HTML5 SVG là gì? Cách vẽ HTML5 SVG

5/5 - (1 bình chọn)

HTML5 SVG là gì?

Ở bài trước các bạn đã tìm hiểu về HTML5 Canvas và ứng dụng của nó trong lập trình web. Hôm nay chúng ta sẽ tìm hiểu tiếp một thành phần khác trong HTML5 đó là HTML5 SVG.

HTML5 SVG là gì?

SVG (Scalable Vector Graphics) là là một định dạng hình ảnh dựa trên XML dùng để định nghĩa những đối tượng đồ và vector đồ họa hai chiều cho website. Một hình ảnh vector có thể kéo to ra hay nhỏ xuống mà không ảnh hưởng đến chất lượng hình ảnh đó. Hình ảnh SVG dựa trên định dạng XML vì thế nó có thể được tạo và chỉnh sửa với các trình soạn thảo chữ.

html5-svg

Lợi ích của SVG so với hình ảnh thông thường

  • Hình ảnh SVG có thể được in với chất lượng cao ở bất kỳ độ phần giải nào.
  • Hình ảnh SVG có thể được tạo và chỉnh sửa bằng javascript trong thời gian thực.
  • Hình ảnh SVG có thể tìm kiếm, đánh chỉ mục, nén,…
  • Hình ảnh SVG có thể chuyển động sử dụng các thành phần animation đã xây dựng sẵn.
  • Hìn ảnh SVG có thể chứa liên kết đến bất kỳ tài liệu nào khác.

Vẽ đường thẳng

<svg width="300" height="200">

<line x1="50" y1="50" x2="250" y2="150" style="stroke:red; stroke-width:3;" />

</svg>

Vẽ hình chữ nhật

<svg width="300" height="200">

<rect x="50" y="50" width="200" height="100" style="fill:orange; stroke:black; stroke-width:3;" />

</svg>

Vẽ hình tròn

<svg width="300" height="200">
<circle cx="150" cy="100" r="70" style="fill:lime; stroke:black; stroke-width:3;" />
</svg>

Vẽ chữ với SVG

<svg width="300" height="200">

<text x="20" y="30" style="fill:purple; font-size:22px;">

Welcome to Our Website!

</text>

<text x="20" y="30" dx="0" dy="20" style="fill:navy; font-size:14px;">

Here you will find lots of useful information.

</text>

</svg>

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

HTML5 Canvas or SVG

HTML5 giới thiệu hai thành phần đồ họa là Canvas và SVG nhưng chúng lại có nhiều điểm khác nhau. Nắm được sự khác nhau đó sẽ giúp các bạn sử dụng chúng hiệu quả hơn.

CanvasSVG
Dựa trên pixelDựa trên vector
Thành phần HTML đơn tương tự thẻ <img> trong hành xửNhiều thành phầ đồ học, trở thành một phần của DOM
Chỉ chỉnh sửa qua scriptChỉnh sửa qua script và css
Kéo giãn vỡ chất lượngKéo giãn vẫn giữ chất lượng tốt

Add Comment