HTML5 - SVG

StylingSVGuse.jpg

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ả:

Screenshot_9.png

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" width="300" height="100" fill="red" />
      </svg>

   </body>
</html>

kết quả:

Screenshot_6.png

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-width: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ả: Screenshot_7.png

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>

Screenshot_8.png

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ả

Screenshot_11.png

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ả: Screenshot_12.png

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ả:

Screenshot_13.png

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; width: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ả:

Screenshot_15.png

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