12/08/2018, 14:15

HTML5 - SVG

I. HTML5 SVG là gì? SVG là viết tắt của Scalable Vector Graphics . Là một ngôn ngữ để mô tả đồ họa 2D và các ứng dụng đồ họa trong XML và XML sau đó được trả lại bởi một SVG Viewer. SVG trở thành một W3C Recommendation từ 14/1/2003 và bạn có thể kiểm tra phiên bản mới nhất của nó tại: SVG ...

I. HTML5 SVG là gì?

SVG là viết tắt của Scalable Vector Graphics. Là một ngôn ngữ để mô tả đồ họa 2D và các ứng dụng đồ họa trong XML và XML sau đó được trả lại bởi một SVG Viewer.

SVG trở thành một W3C Recommendation từ 14/1/2003 và bạn có thể kiểm tra phiên bản mới nhất của nó tại: SVG Specification.

Ưu điểm

Hình ảnh SVG có thể phóng to nhưng không vỡ ảnh.
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.
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.
SVG hầu như nó được hỗ trợ trên tất cả các trình duyệt

II. Nhúng SVG trong HTML5

HTML5 cho phép nhúng SVG trực tiếp bởi sử dụng thẻ <svg>...</svg> mà có cú pháp đơn giản sau:

<svg xmlns="http://www.w3.org/2000/svg">
   ...
</svg>

HTML5 − Đường tròn SVG

Sau đây là phiên bản HTML5 của một ví dụ SVG mà sẽ vẽ một vòng tròn sử dụng tag <circle>:

<!DOCTYPE html>
<html>
   <head>
      <title>SVG</title>
      <meta charset="utf-8" />
   </head>

   <body>

      <h2>HTML5 SVG Circle</h2>

      <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
         <circle id="redcircle" cx="50" cy="50" r="50" fill="red" />
      </svg>

   </body>

</html>

Kết quả:

HTML5 − Hình chữ nhật SVG

Ví dụ SVG vẽ một hình chữ nhật sử dụng tag <rect>:

<!DOCTYPE html>
<html>
   <head>

      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>

      <title>SVG</title>
      <meta charset="utf-8" />

   </head>
   <body>

      <h2 align="center">HTML5 SVG Rectangle</h2>

      <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
         <rect id="redrect" awidth="300" height="100" fill="red" />
      </svg>

   </body>
</html>

kết quả:

HTML5 − SVG Line

Ví dụ SVG vẽ một đường thẳng sử dụng tag <line>:

<!DOCTYPE html>
<html>

   <head>

      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-50%);
            -ms-transform: translateX(-50%);
            transform: translateX(-50%);
         }
      </style>

      <title>SVG</title>
      <meta charset="utf-8" />
   </head>

   <body>

      <h2 align="center">HTML5 SVG Line</h2>

      <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
         <line x1="0" y1="0" x2="200" y2="100" style="stroke:red;stroke-awidth:2"/>
      </svg>

   </body>
</html>

Bạn có thể sử dụng thuộc tính style mà cho phép bạn thiết lập thông tin style bổ sung như nét, màu, độ rộng của nét, …

Kết quả:

HTML5 − SVG Ellipse

Ví dụ SVG vẽ một hình Ellipse sử dụng tag <ellipse>:

<!DOCTYPE html>
<html>

   <head>

      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>

      <title>SVG</title>
      <meta charset="utf-8" />
   </head>

   <body>

      <h2 align="center">HTML5 SVG Ellipse</h2>

      <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
         <ellipse cx="100" cy="50" rx="100" ry="50" fill="red" />
      </svg>

   </body>
</html>

HTML5 − SVG Polygon

Ví dụ SVG vẽ một hình đa giác sử dụng tag <polygon>:

<!DOCTYPE html>
<html>

   <head>
      <title>SVG</title>
      <meta charset="utf-8" />
   </head>

   <body>

      <h2>HTML5 SVG Polygon</h2>

      <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
         <polygon  points="20,10 300,20, 170,50" fill="red" />
      </svg>

   </body>

</html>

Nó sẽ cho kết quả

HTML5 − SVG Polyline

Ví dụ SVG vẽ một hình nhiều mặt sử dụng tag <polyline>:

<!DOCTYPE html>
<html>

   <head>

      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-20%);
            -ms-transform: translateX(-20%);
            transform: translateX(-20%);
         }
      </style>

      <title>SVG</title>
      <meta charset="utf-8" />
   </head>

   <body>

      <h2 align="center">HTML5 SVG Polyline</h2>

      <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
         <polyline points="0,0 0,20 20,20 20,40 40,40 40,60" fill="green" />
      </svg>

   </body>
</html>

Kết Quả:

HTML5 − SVG Gradients

Ví dụ sử dụng tag <radialGradient>:

Với cách tương tự, bạn có thể sử dụng thẻ <linearGradient> để tạo SVG Linear Gradient:

<!DOCTYPE html>
<html>
   <head>
      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>
      <title>SVG</title>
      <meta charset="utf-8" />
   </head>
   <body>
      <h2 align="center">HTML5 SVG Gradient Ellipse</h2>
      <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
         <defs>
            <radialGradient id="gradient" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
               <stop offset="0%" style="stop-color:rgb(200,200,200); stop-opacity:0"/>
               <stop offset="100%" style="stop-color:rgb(0,0,255); stop-opacity:1"/>
            </radialGradient>
         </defs>
         <ellipse cx="100" cy="50" rx="100" ry="50" style="fill:url(#gradient)" />
      </svg>
   </body>
</html>

Kết quả:

HTML5 − SVG Star

<html>

   <head>

      <style>
         #svgelem{
            position: relative;
            left: 50%;
            -webkit-transform: translateX(-40%);
            -ms-transform: translateX(-40%);
            transform: translateX(-40%);
         }
      </style>

      <title>SVG</title>
      <meta charset="utf-8" />
   </head>
   <body>

      <h2 >HTML5 SVG Star</h2>
      <div style="background:red; awidth:250px; padding-top:20px; padding-left: 100px">

      <svg id="svgelem" height="200" xmlns="http://www.w3.org/2000/svg">
         <polygon points="100,10 40,180 190,60 10,60 160,180" fill="yellow"/>
      </svg>

      </div>

    </body>
</html>

Kết quả:

III. Các điểm khác nhau giữa SVG và Canvas

Bảng sau so sánh vài điểm khác nhau quan trọng giữa SVG và Canvas.

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.

Canvas	SVG
Phụ thuộc vào độ phân giải	Không phụ thuộc độ phân giải
Không hỗ trợ xử lý sự kiện.	Hõ trợ xử lý sự kiện
Thành phần HTML đơn tương tự thẻ,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 script	Chỉnh sửa qua script và css
Kéo giãn vỡ chất lượng	Kéo giãn vẫn giữ chất lượng tốt
Dựa trên pixel	Dựa trên vector

Link demo : https://jsfiddle.net/tuanvh/07dwstee/6/

Tham khảo: Tutorialspoint.com

Bình luận về bài viết này

Tạ Quốc Bảo

23 chủ đề

7270 bài viết

HTML5 - SVG

I. HTML5 SVG là gì?

Ưu điểm

II. Nhúng SVG trong HTML5

HTML5 − Đường tròn SVG

HTML5 − Hình chữ nhật SVG

HTML5 − SVG Line

HTML5 − SVG Ellipse

HTML5 − SVG Polygon

HTML5 − SVG Polyline

HTML5 − SVG Gradients

HTML5 − SVG Star

III. Các điểm khác nhau giữa SVG và Canvas

Đăng ký nhận thông báo

HỖ TRỢ HỌC VIÊN

VỀ CODE24H

HỢP TÁC VÀ LIÊN KẾT

KẾT NỐI VỚI CHÚNG TÔI

TẢI ỨNG DỤNG TRÊN ĐIỆN THOẠI