PHƯƠNG PHÁP VẼ HÌNH BẰNG SVG

 

VẼ HÌNH BẰNG VECTOR THEO SVG

SVG hương dẫn dủng tọa độ x,y để vẽ những hình gọi là Vector Graphics.

SVG là chữ viết tắt của SCALABLE VECTOR GRAPHICS đã thành tiêu chuẩn quốc tế www.w3.org/2000/svg từ năm 2001.

SVG  được tạo ra lẫn đầu tiên vào năm 1999 bởi nhóm nghiên cúu quốc tế W3C dùng để vẽ những hình rất nhẹ khi bị kéo co giãn không bị hư haị nên rất cần đế thiết kế những trang Web có những hình ảnh chuyển động theo ý muốn và in những logos rất lớn.

                   -------------------------------

Thí dụ đơn giản. Muốn vẽ một đường thẳng và một hình tam giác tô màu thi phải làm gì?

I-VẼ THỬ ĐỂ XEM HINH THẾ NÀO.

 TÌM HIỂU CHI TIẾT VÀ KHUYẾT ĐIỂM TRONG PHẦN SAU.

   1-Vẽ một đường thẳng nối hai điểm có tọá độ

 200 150, 54 180.

           Mở Notepad chép phần nầy vào.

<svg xmlns = “htpp:// www.w3.org/2000/svg”>

<path  d= "M 200 150, 54 180" stroke= "red" stroke-width = "4" fill= "none"/>

</svg>  .

 Dùng Browser sẽ thấy xuất hiện hình vẽ là một đường thẳng maù đỏ.

 2-Vẽ hĩnh tam giác.

II-TIM HIẾU CÁCH VẼ

Theo SVG trước khi vẽ, cần phải có viewport và viewbox trên bản vè.

Có thể vè không cần viewport và viewbox. Nhưng nếu có thì vẽ dể dàng hơn.

Viewport có hai trục tọa độ x và y .Trục x nằm ngang hương về bên phải gọi là Width .Trục y hương theo chiều âm nằm dưới trục x gọi la Height .Có thể gọi viewport là khung vẽ.

Thí dụ    width="300" height="200" .

Đơn vị tính trên hai trục là pixel.Tất cả hình vẽ nằm trong viewport có độ lớn tự động được tính bằng pixel.

Viewbox có hai trục x và y nằm trong viewport . SVG sẽ tự đông chuyển đổi độ lớn của hình vẽ trong viewbox theo tỷ lệ của độ lớn của viewport.

Thí dụ.            

 width="300"height="200"viewBox="0 0 1500 1000"

Trục x của viewbox có đơn vị đo là 300/1500px = 1/5px  không phải 1 pixel

Trục y của viewbox có đơn vị đo là 200/1000px = 1/5px

Vậy muốn thay đổi kích thước của hình vẽ thì thay đổi kích thước của viewbox ="0 0 1500 1000". Hai con số (0 0) là gốc của x , y.           

Tìm hiểu codes vẽ ra hỉnh tam giác nầy.

<svg width="200" height="200" viewBox="0 0 200 200" xmlns = "htpp:// www.w3.org/2000/svg">

<path  d= "M 200 150, 54 180, 60 100, 200 150" stroke= "red" stroke-width = "4" fill= "blue"/>

</svg> 

1- Trên đầu của bản vẽ phải có root declaration hay declaration statement, có viewport, viewbox chứa trong tag của svg và được viết rất gọn như sau.

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

             width  height và viewbox.

2- 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 có tên là : path, rect, circle, ellipse, line, polyline, polygon, image…

Với hướng dẫn nầy chúng ta chọn chữ 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 chữ 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 .

3-  Sau khi chọn chữ path thì viết chử d = “…..”.

Chữ d có nghĩa là vẽ (draw) từ tọa độ (x , y) do chúng ta muốn chọn.

SVG tự động dùng parser làm ngòi bút ( pen) vẽ hình chứ không vẽ băng tay của chúng ta.

 Parser sẽ vẽ theo tên của command mà chúng ta chọn. 
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.

            Có tổng cọng 20 commands.

                     MoveTo: M, m

                     LineTo: L, l, H, h, V, v

                     Cubic Bézier Curve: C, c, S, s

                     Quadratic Bézier Curve: Q, q, T, t

                     Elliptical Arc Curve: A, a

                     ClosePath: Z, z

M nghĩa là move to làm ngòi bút (parser) phải di chuyển.

Thí dụ.  

 Cho lịnh ngoì bút phải bắt đầu từ tọa độ (x=200,y=150 ) và dừng lại ở tọa độ ( x=54, y=180) thì viết

        d="M 200 150,54 180Z” 

 Parser sẽ vẽ một đường thẳng.

Chư Z nghĩa là closepath ngoì bủt dừng lại tại tọa độ thứ hai.

Nếu muốn cho ngòi bút vẽ thêm thì tiếp tục viết thêm tọa độ và dời chữ Z tới toạ độ múốn dừng.

Chúng ta viết thêm chữ Z nầy vào tọa độ cuối cùng  tức là nơi chúng ta muốn dừng lại.

Thí dụ.

        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ề và dừng lại  tại điểm khởi hành có tọa độ (200,150)  khi gập chứ Z là closepath .

Chú ý khi con số của y càng lớn thi vector đi xùống xa trục x nằm ngang.

stroke nghĩa là đườ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.

 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.

III-VẼ ĐƯỜNG THẲNG KẾT HƠP VỚI ĐƯƠNG CONG

  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 .

 Chỉ cần thêm chữ C vào trước tọa độ thì hình tam giác phía trên biến ra hình nây.

       
Đường cong vẽ 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).

Á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 tên của command thì những đường thẳng hay những đường cong sẽ xuất hiện tuỳ theo ý muốn.

IV-VẼ VÒNG TRÒN VÀ ELLIPSE

   Vẽ vòng tròn thì viết như sau.

 <svg width="200" height="200"   xmlns = "htpp:// www.w3.org/2000/svg">

<circle cx="150" cy="150" r ="20" stroke= "red" stroke-width = "4"

 fill= "blue"/> </svg>

 cx, cy là tọa độ của tâm vòng tròn. r là đường kinh

  Vẽ ellipse thì viết như sau.     

 <svg width="200" height="200" xmlns = "htpp:// www.w3.org/2000/svg">

<ellipse cx="60" cy="100" rx="50" ry= "20" stroke="red"stroke-width="4"

 fill= "green"/> </svg>   

  cx, cy là tọa độ của tâm ellipse, rx, ry là trục dài và trục ngắn cùa 

ellipse.

V-VẼ PARABOL THEO KINH NGHIỆM

1-Path nây vẽ thẳng đứng nhưng ngắn 
quá.
<svg width="400" height="400" 
 xmlns = "htpp:// www.w3.org/2000/svg">
<path d="M 50 100, Q100 150 ,150 100, 50 100Z" 
stroke= "red" 
stroke-width = "4" fill= "none"/></svg>
 
2-Path nầy vẽ tốt nhưng rộng quá
<svg width="400" height="400"  
xmlns = "htpp:// www.w3.org/2000/svg">
<path d="M 50 100, Q200 350 ,350 100, 50 100Z" 
stroke= "red" stroke-width = "4" fill= "none"/>
</svg>
 
3-Path nầy vẽ tốt hơn hết nhưng đáy hơi 
lệch
<svg width="500" height="500" 
xmlns = "htpp:// www.w3.org/2000/svg">  
<path d="M 50 100, Q200 450 ,300 100, 50 400Z" 
stroke= "red" stroke-width = "4" fill= "none"/>
</svg>
 
4-Path nầy được chỉnh lệch.
<svg width="500" height="500"  
xmlns = "htpp:// www.w3.org/2000/svg">  
<path d="M 50 100, Q160 450 ,300 100, 50 400Z" 
stroke= "red" stroke-width = "4" fill= "none"/>
</svg>
 
Parabol số 1 màu đỏ.
Path nầy có hai đầu ngang nhau nhưng 
hẹp
 <svg width="500" height="500"  
xmlns = "htpp:// www.w3.org/2000/svg">
 <path d="M 100 100, Q160 450 ,200 100,100 100Z" 
stroke= "red" stroke-width = "4" fill= "none"/>
</svg>
Parabol số 2 màu xanh.
Path nầy có hai đầu ngang nhau nhưng
 rộng hơn.
<svg width="500" height="500" 
 xmlns = "htpp:// www.w3.org/2000/svg">
 <path d="M 100 100, Q160 350 ,200 100, 100 100 Z"
 stroke= "blue" stroke-width = "4" fill= "none"/>
</svg>
 
Chú ý.Thay đổi hai tọa độ của Q thì đáy
 của parabol rống ra hoặc hẹp lại.
 
Parabol số 3 màu xanh lá cây.
Path nây vẽ parabol nằm nghiêng.
<svg width="500" height="500" 
xmlns = "htpp:// www.w3.org/2000/svg">
<path d="M 200 150, Q54 280, 260 280, 200 150 Z " 
stroke= "green" stroke-width = "4" fill= "none"/>
</svg>