HTML5 – CSS – Tutorial – Step 9

SVG

– SVG là gì?
    • SVG là viết tắt của Scalable Vector Graphics (đồ họa vector mở rộng)
    • SVG được dùng để làm nền cho đồ họa vector trên Web
    • SVG có định dạng XML
    • Chất lượng ảnh SVG không bị ảnh hưởng khi phóng to, thu nhỏ hoặc thay đổi kích thước ảnh
    • Mỗi phần tử và thuộc tính trong files SVG đều linh động
    • SVG được khuyến nghị bởi W3C
– Ưu điểm của SVG
Ưu điểm của việc sử dụng SVG trên các định dạng ảnh (như JPEG và GIF) là:
    • Ảnh SVG có thể được tạo và sửa bằng văn bản.
    • Ảnh SVG có thể tìm kiếm, đặt chỉ mục, xử lý, và nén.
    • Ảnh SVG có khả năng mở rộng.
    • Ảnh SVG có thể in ra hình ảnh chất lượng với bất kỳ độ phân giải nào.
    • Ảnh SVG có thể phóng to thoải mái mà không bị vỡ hình.
    • Nhúng SVG trực tiếp lên trang HTML

Trong HTML5, bạn có thể nhúng trực tiếp phần tử SVG vào trang HTML:

Ví dụ

<!DOCTYPE html> 
<html> 
<body> 
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190" width="200"> 
<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>

– Điểm khác nhau giữa SVG và Canvas
SVG là ngôn ngữ mô tả đồ họa 2D bằng XML.

Canvas vẽ đồ họa 2D bằng script (với JavaScript).

SVG có nền là XML, nghĩa là mọi phần tử đều có sẵn trong SVG DOM. Bạn có thể gán một sự kiện xử lý cho phần tử đó.
In SVG, each drawn shape is remembered as an object. If attributes of an SVG object are changed, the browser can automatically re-render the shape.
Trong SVG, mỗi phần tử được ghi nhớ như một đồi tượng. Nếu thuộc tính của một đối tượng SVG bị thay đổi thì trình duyệt tự động thay đổi hình dạng đối tượng đó.

Canvas được tạo bởi điểm ảnh. Với canvas, hình ảnh không được nhớ bởi trình duyệt. Do đó, nếu một điểm bị thay đổi, toàn bộ phải được vẽ lại.

– So sánh Canvas và SVG
Canvas
    • Phụ thuộc độ phân giải
    • Không hỗ trợ xử lý sự kiện
    • Khả năng vẽ văn bản kém
    • Bạn có thể lưu hình ảnh dưới dạng .png hoặc .jpg
    • Rất thích hợp cho các game đồ họa.

SVG
    • Không phụ thuộc độ phân giải
    • Hỗ trợ xử lý sự kiện
    • Phù hợp nhất cho các ứng dụng với các khu vực dựng hình lớn (Google Maps)
    • Khó thực hiên các hình ảnh phức tạp.
    • Không phù hợp với ứng dụng game.

– SVG
SVG có một số hình dạng đã được định dạng trước vd:
    • Rectangle <rect> – hình chữ nhật
    • Circle <circle> – hình tròn
    • Ellipse <ellipse> – hình bầu dục
    • Line <line> – đường kẻ
    • Polyline <polyline> – đường gấp khúc
    • Polygon <polygon> – hình khép kín tạo bơi các đường thẳng
    • Path <path> – hình khép kín tạo từ 3 điểm


Rectangle

<!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>

hình chữ nhật SVG


Circle

<!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 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>

hình tròn SVG


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>

hình bầu dục


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>

đường kẻ SVG


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="red" />
      </svg>		
   </body>
</html>

polyline SVG


Polygon

<!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 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>

polygon SVG


SVG Gradients

<!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>

gradient 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 align="center">HTML5 SVG Star</h2>
      <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="red"/>
      </svg>
   </body>
</html>

star SVG

Copyright © 2018. Powered by WordPress & Romangie Theme.