2. Cho điểm của cán bộ phản biện: ( Điểm ghhi bằng số và chữ )
2.3.2Scalable Vector Graphics
SVG là gì?
SVG là viết tắt của Scalable Vector Graphics
SVG được sử dụng để vẽ các đối tượng vector dựa trên nền web SVG định nghĩa đồ họa trong định dạng XML
Đồ họa SVG không mất chất lượng hình ảnh khi phóng to hoặc thay đổi kích thước ảnh.
Mọi thành phần và thuộc tính trong SVG có thể tạo chuyển động. SVG được phát triển bởi W3C
Những điểm mạnh của SVG
Ưu điểm của việc sử dụng SVG so với các định dạng ảnh khác (như JPEG và GIF) là:
Ảnh SVG có thể được tạo và chỉnh sửa với bất kỳ trình biên tập văn bản nào. Ảnh SVG có thể được tìm kiếm, lập chỉ mục, nén…
Ảnh SVG có thể được co giãn kích thước
Ảnh SVG có thể được in với chất lượng cao ở bất kỳ độ phân giải nào. Ảnh SVG có thể phóng to hoặc thu nhỏ mà không mất chất lượng ảnh.
Chèn SVG vào trang HTML
Trong HTML5, SVG có thể được chèn vào trang HTML với thẻ <svg>
Ví dụ: <!DOCTYPE html> <html> <body> <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
<polygon points="100,10 40,180 190,60 10,60 160,180" style="fill:lime;stroke:purple;stroke-width:5;fill- rule:evenodd;"> </svg> </body> </html> Kết quả: Hình 2.4. Ví dụ vẽ hình bằng SVG Điểm khác nhau giữa SVG và Canvas
SVG là một ngôn ngữ miêu tả đồi họa 2D trong XML. Còn canvas xử lý đồ họa 2D với JavaScript
SVG có nền tảng trên XML, mọi thành phần của nó đều trong SVG DOM, tuy nhiên ta có thể sử dụng JavaScript để xử lý các sự kiện cho các thành phần của SVG.
Trong SVG, mỗi hình được vẽ ra sẽ được coi như một đối tượng. Nếu những thuộc tính của một đối tượng SVG được thay đổi, trình duyệt sẽ tự động tạo lại hình đó.Còn canvas được tạo theo các điểm ảnh. Trong canvas một khi hình đồ họa được vẽ, trình duyệt không lưu giữ nhưng thông tin của hình đó. Nếu trình duyệt bị thay đổi thì ta phải vẽ lại hình đó.
Bảng 2.3. So sánh giữa Canvas và SVG
Canvas SVG
Độ phân giải bị phụ thuộc Không hỗ trợ xử lý sự kiện Khả năng đọc văn bản thấp Có thể lưu hình ảnh dưới định dạng .png hoặc .jpg
Phù hợp cho các việc tạo các game chuyên sâu
Độ phân giải không bị phụ thuộc
Hỗ trợ xử lý sự kiện
Phù hợp nhất cho các ứng dụng có kích thước hình lớn
Dựng hình chậm
Không phù hợp cho việc tạo ứng dụng game