SVG giúp chúng ta vẽ vector images bằng cách dùng code tọa độ x và y chứa trong XML tag.
SVG xuất hịên vào năm 1999 do những công ty Adobe, Apple và IBM (a group of companies within the W3C) tìm ra và đã thành tiêu chuẩn quốc tế từ ngày 4-Sept-2001 với tên www.w3.org/2000/svg.
Thí dụ đây là một hình vẽ theo phương pháp svg.
Mở Notepad chép nguyên văn svg code nây.
Save với ký hiệu svg.html rồi mở xem bằng browser Chrome hoặc IE9 sẽ thấy một hình màu xanh có viền đỏ xuất hiện giống như bên cạnh.
Nếu mở xem bằng IE8 thì không thấy hình xuất hiện.
SVG có những ưu điểm như sau.
- Hình vẽ nhẹ hơn hình bitmap,nghĩa là không chiếm chỗ rộng như hình bitmap hoặc hình GIF, PNG…
- Hình vẽ, chúng ta có thể thu nhỏ lại hoặc làm lớn dễ dàng nhưng vẫn sắc sảo.Khi in ra hình có high resolution.
- Hình vẽ tuy ở trạng thái bất động (static) nhưng có thể di động (animated,dynamic) dễ dàng nếu muốn mà không cần phải dùng JavaScript function.
- Khi muốn vẽ hình chỉ cần có Notepad là làm được tất cả theo ý muốn.Tất cả computer đều có Notepad.
Cắt nghĩa chi tiết cách vẽ hình trên.
* Trước tiên cần phải có root declaration hay declaration statement chứa trong tag của svg và có thể viết rất gọn như sau vẫn có kết quả tốt.
svg xmlns="http://www.w3.org/2000/svg
* Trước khi muốn vẽ loại hình gì thì phải chọn element hay object thích ứng với loại hình đó. SVG có nhiều elements như path, rect, circle, ellipse, line, polyline, polygon, image…
* Với hướng dẫn nầy chúng ta chọn path vì nó có đặc tính vẽ được nhiều hình phức tạp kết hợp bởi đường cong và đường thẳng.Còn các elements khác thì chỉ vẽ được một kiểu hình mà thôi.Xử dụng path hơi khó gọi là “ hardest element to master ” để vẽ những hình có các đường cong .
* Sau khi chọn path thì viết chử d = “…..”.Chữ d có nghĩa là bắt đầu vẽ hình bằng cách chọn tọa độ x , y.
SVG dùng parser làm ngòi bút ( pen) chứ không phải ngòi bút của tay chúng ta.
Khi chọn command thì parser sẽ làm theo command đó.
Commands gồm có những chữ sau đây viết hoa hoặc viết thường
M , L , H , V , S , C , Q , T , A , Z .Viết hoa khi chúng ta muốn ngoì bút ở position absolute còn viết thường thì chỉ cần ngòi bút ở position relative.
Commands gồm có những chữ sau đây viết hoa hoặc viết thường
M , L , H , V , S , C , Q , T , A , Z .Viết hoa khi chúng ta muốn ngoì bút ở position absolute còn viết thường thì chỉ cần ngòi bút ở position relative.
M nghĩa là ngòi bút phải moveto bắt đầu từ tọa độ (x=200 , y=150 ) và dừng lại ở tọa độ ( x=200, y=150).Nếu muốn cho ngòi bút vẽ thêm thì tiếp tục viết thêm tọa độ.
Z nghĩa là closepath ,dừng lại.Chúng ta có thể viết thêm chữ nầy vào tọa độ cuối cùng tức là nơi chúng ta muốn dừng lại.
d="M 200 150,54 180,60 100,200 150 Z ”
Khởi hành từ tọa độ (200,150) ,đi xuống tới tọa độ (54,180),đi lên tới tọa độ ( 60,100), trở về điểm khởi hành có tọa độ (200,150) .
Khởi hành từ tọa độ (200,150) ,đi xuống tới tọa độ (54,180),đi lên tới tọa độ ( 60,100), trở về điểm khởi hành có tọa độ (200,150) .
* stroke ở đây nghĩa là đường vẽ của ngòi bút mà chúng ta vẽ (a movement by the pen).Đường vẽ nầy cần tô màu hay không và có bề rộng bao nhiêu tùy chúng ta muốn.
* fill .Khi vẽ xong nếu muốn tô màu xanh thì viết fill=”blue”.Nếu không muốn tô màu thì viết fill=”none”.Nếu viết fill = “ …” hoặc hoặc không viết chữ fill thì default tô màu đen thui.
---------------------------------------------------------------
Cách vẽ đường thẳng và đường cong (curve)
Áp dụng hướng dẫn cách vẽ ở phần trên,chúng ta chỉ cần bỏ bớt tọa độ hoặc giử nguyên những tọa đô đó rôi viết thêm ký hiệu của command thì những đường thẳng hay đường cong sẽ xuất hiện tuỳ theo command đã chọn.
Muốn vẽ đường thẳng thì chỉ cần xác định 2 toạ độ như sau.
d="M 200 150,54 180Z ”
Muốn vẽ đường cong thì viết thêm chữ C trước tọa độ mà đường cong sẽ bị bẻ cong.
d="M 200 150,C 54 180,60 100,200 150 Z ”. Chữ C nghĩa là Curve .
Nghĩa là chỉ cần thêm chữ C vao trước tọa độ thì hình tam giác phía trên biến ra hình dưới đây.
Đường cong từ tọa độ ( 54,180) lao tới tọa độ ( 60,100) rồi quay trở về toạ độ mà ngòi bút khởi hành ( 200,150)
Đường cong từ tọa độ ( 54,180) lao tới tọa độ ( 60,100) rồi quay trở về toạ độ mà ngòi bút khởi hành ( 200,150)
Tóm lại từ một hình tam giác vẽ theo svg,chúng ta có thể chuyển đổi thành một hình phức tạp bằng cách tự mình suy nghĩ chọn tọa độ x,y và dùng các ký hiệu commands thì parser sẽ theo command vẽ cho chúng ta.
Chuyển đổi hình trên thành con cá di động bằng cách thay đổi commands và viết như sau.
----------------------------------
Cách vẽ đường cong “ Quadratic Bézier Curve”
Command của đường cong nầy là chữ Q.
Đường cong cần phải có :
- Tọa độ x,y của hai điểm tựa goị là điểm khởi hành (start point) và điểm dừng lại (final point) .
- Phải có thêm tối thiểu một toạ độ x,y của một điểm nữa goị là control point.
Thực tập vẽ con cá màu xanh.
How to draw a green fish by using svg ?
How to draw a green fish by using svg ?
* Trước tiên vẽ thân của con cá bằng cách viết tọa độ như sau.
path d="M 200 160,C 250 200,350 120,200 160,
Tọa độ chỗ đuôi gắn vào thân con cá là ( 200,160 )
* Tiế́p theo viết tọa độ của 2 đường thẳng nối vào phần cuối của thân con cá.
L 200 160,180 170,
L 200 160,175 150,
* Tiếp theo viết tọa độ của đường cong nối 2 đầu cuối cùng của 2 đường thẳng vừa vẽ.
C 175 150,185 160,180 170 Z"
* Tiếp theo nữa viết tọa độ vòng tròn tượng trưng cho con mắt của cá như sau.
circle cx="260" cy="155" r="3" stroke="black" fill="blue"
* Cuối cùng góp hết những gì vừa vẽ xong vào chung một bảng như dưới đây thì sẽ thấy một con cá màu xanh viền đỏ xuất hiện khi mở Browser Chrome.
Chúng ta sẽ dùng con cá nầy để học những bài kế tiếp về animation by SMIL. Nhớ phải dùng Browser Chrome thì mới thấy con cá xuất hiện.
Chúng ta đã có những bài học về JavaScript đăng trong Blogger nầy rồi.Nhưng JavaScript hơi phức tạp phải mất nhiều thời gian học và thực tập mới xử dụng dễ dàng.
Còn SMIL(Synchronized Multimedia Integration Language ) thì rất đơn giản và rất hửu hiệu khi làm chuyển động nhưñg hình svg .
Bài kế tiếp : Xử dụng SMIL làm chuyển động hình vẽ bằng SVG
