VẼ CỤM PARABOLS BẦNG SVG

 VẼ CỤM PARABOLS BẰNG SVG ĐỂ SO SÁNH.

SVG là chữ viết tắt của SCALABLE VECTOR GRAPHICS do nhóm nghiên cứu quốc tê W3C tạo ra từ năm1999, được phổ biến để thế giới xử dụng từ năm 2001 với tên www.w3.org/2000/svg

Hình vẽ theo SVG có rất nhiễu đặc điểm rất nhẹ, bị kéo co giản không thay đổi phẫm chất, in được nhiều cở rất  lơn theo nhu cẫu và dùng làm hình chuyến động rất thuận tiện trên wesites.

 

I- THỰC TẬP.

Muốn vẽ loại hình gì theo SVG, 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 và cần phải biết chọn tên cúa 20 COMMENTS như sau.

                     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 gọi là parser phải di chuyển.

Vẽ hình theo vector tọa độ của SVG phải dung ngoì but parser chứ không vẽ bằng tay.

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” 

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

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.

II- KINH NGHIỆM CHỌN TỌA ĐỘ X,Y.

 Thay đổi tọa độ tiếp theo chữ Q sẽ tìm được 

parabol vưà ý. Chọn chữ Q để vẽ theo đường 

cong gọi là QUADRATIC BEZIER.

<!...1-Path nây tốt,parabol 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 100 Z " 

stroke= "red"

 stroke-width = "4" fill= "none"/>

</svg>

<!...2-Path nầy tốt nhưng parabol 

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 100 Z "

stroke= "blue" stroke-width = "4" fill = "none"/>

</svg>

  <!...3-Path nầy tốt hơn hết nhưng đáy 

của parabol 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 400 Z" 

stroke= "green" stroke-width = "4" fill="none"/>

</svg>

 <!...4-Path nầy tốt vẽ parabol 

đã đượ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 400 Z" 

stroke= "purple" stroke-width = "4" fill="none"/>

</svg>

B-Vẽ riêng ba parabols để so sánh.
Parabol màu đỏ.
Path nầy vẽ parabol 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 100 Z"
stroke= "red" stroke-width = "4" fill= "none"/>
</svg>

Parabol màu xanh.
Path nầy vẽ parabol 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 độ tiếp theo chữ Q thì 
đáy của parabol rộng ra hoặc hẹp lại.
 Parabol 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>
  

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>
 
 

CÁCH DÙNG SPAN TAG

CÁCH DÙNG SPAN TAG-HOW TO USE SPAN TAG

TẠI SAO DÙNG SPAN TAG ?

Tại sao phải dùng span tag - Cách xử dụng

Span tag rất phổ thông và rất quan trọng chúng ta cần phải biết rành khi muốn viết bài theo phương pháp html.

Trong bài html những gì liên hệ đến chữ viết như kiểu chữ, độ lớn, màu sắc và cách đem hình vào hoặc làm hình xuất hiện hay biến mất khi tiếp xúc với curser  v.v…chúng ta phải xử  dụng span tag thay cho CSS( Cascading Style Sheet )vì rất đơn giản.

Những gì chứa trong span tag phải viết theo qui định của CSS và phải có chữstyle đứng đầu

Không cần phải lồng span tag trong html vì span tag tự nó là html rồi.

Sáu cách viết sau đây rất thông dụng.

                            
                            Nối kết với trang html khác và đem hình vào bài viết html .