[SVG ANIMATION] Tập tành tìm hiểu CSS animation: Bài 4: vẽ bằng SVG (ok)

Tập tành tìm hiểu CSS animation: Bài 4: vẽ bằng SVG

Mở đầu

Tiếp tục trở lại với series CSS animation, lần này mình quyết định tìm hiểu về SVG. Lý do là vì mình muốn tạo hiệu ứng vẽ chữ như trên, mà cái này dùng ảnh hay dùng text đều không được, nên phải nhờ tới SVG.

Chắc hẳn nếu đã từng có ý định tìm hiểu về SVG trong html thì nhiều người đã vô cùng đau đầu khi nhìn 1 cái path đã hoa cả mắt rồi, các tài liệu thì lại đã tiếng anh lại còn khó hiểu. Mình cũng vậy, mấy lần định tìm hiểu xong lại từ bỏ, đến giờ mới tập trung quyết tâm giải trình nó. Thông tin trong bài được tổng hợp từ rất nhiều nguồn khác nhau, mỗi nơi chắt được 1 ít để có thể hiểu hoàn toàn về cách vẽ SVG, và tất nhiên nó bằng tiếng Việt, nên chắc chắn rằng sẽ giúp được những bạn muốn tìm hiểu SVG rút gọn lại con đường so với mình .

Ở bài này, mình sẽ giới thiệu cơ bản về SVG, cách vẽ SVG đơn giản, và cuối cùng là giới thiệu tool render SVG cho nhanh =))

Giới thiệu SVG

SVG là viết tắt của Scalable Vector Graphics, đúng như tên gọi, nó cấu tạo là các vector.

Hiểu đơn giản, hình ảnh thông thường được cấu tạo từ các pixel là các ô vuông, khi bạn zoom lên thì các pixel hiển thị to ra, các ô vuông to lên và hình của bạn trông giống hình game 8 bit vậy. Còn hình ảnh vector nó là các "đường" có hướng, kiểu như nối đường nối giữa 2 điểm, nên dù phóng to cũng ko bị vỡ ra bit.

Với hình ảnh định dạng SVG, thì nó tốn ít "chỗ" hơn, sử dụng cho các icon trên web nhẹ hơn nhiều so với việc load ảnh bình thường (à trừ khi là ảnh SVG của bạn vô cùng phức tạp nhé, thì dùng 1 file png optimize và giảm chất lượng ảnh còn hơn), nhất là khi muốn co kéo mà không bị giảm chất lượng hình ảnh, giống như 180p và full HD vậy

Hình ảnh bit map và ảnh vector khi nhìn qua không khác nhau

Nhưng khi phóng to thì ảnh bitmap bị vỡ, còn ảnh vector thì không

Mọi người cũng có thể xem thêm bài giới thiệu này: https://viblo.asia/p/tim-hieu-ve-svg-gAm5yqd85db

Vẽ với SVG

Các thẻ tag

Trong các thẻ SVG, có thể có nhiều thẻ con, list các thẻ con khá dài, bạn có thể xem chi tiết tất cả tại https://developer.mozilla.org/en-US/docs/Web/SVG/Element (thực ra mình cũng chưa thể tìm hiểu hết đám này). Ở đây mình sẽ giới thiệu 1 số thẻ tạo hình dạng (shape) như sau:

`<circle>`

<svg>
  <circle cx="50" cy="50" r="50"  stroke="red" fill="none"/> //stroke để tô màu cho đường, không có nó lại 'invisible' mọi người bảo mình hướng dẫn linh tinh :D
</svg>

Trong đó: cx, cy là tọa độ tâm đường tròn theo chiều x, y (Mọi người xem lại hệ x, y trong html tại đây nhé); Còn r đương nhiên là bán kính đường tròn theo pixel

`<ellipse>`

Thẻ vẽ đường elip. Cũng giống như đường tròn, tuy nhiên elip thì có nhiều hơn 1 param:

<svg>
  <ellipse cx="100" cy="50" rx="100" ry="50" stroke="red" fill="none" /> 
</svg>

Vì elip có 2 tiêu điểm (cái này học hồi cấp 3 ý), nên thay vì chỉ có bán kính r như đường tròn, ta có rx, và ry. Mọi người có thể search thêm về hình elip để tập vẽ nhé

`<line>`

Thẻ vẽ đường thẳng. Và để vẽ đường thẳng thì cần biết vị trí điểm đầu và vị trí điểm cuối, nên là sẽ có 4 param ở đây:

<svg>
  <line x1="0" y1="80" x2="100" y2="20" stroke="red" fill="none" />
</svg>

x1, y1 là tọa độ x, y của điểm bắt đầu, và x2, y2 là tọa độ của điểm kết thúc.

`<polygon>`

Thẻ vẽ hình đa giác. Với thẻ này, bạn sẽ định nghĩa các điểm là các đỉnh của đa giác, và sẽ nối các điểm theo thứ tự bạn viết và sau đó sẽ tự động nối điểm cuối cùng về điểm đầu để tạo 1 hình khép kín.

<svg>
  <polygon points="0,100 50,25 50,75 100,0" stroke="red" fill="none"/>
</svg>

Trong attribute points chính là danh sách các cặp tọa độ của mỗi đỉnh đa giác.

`<polyline>`

<svg>
    <polyline points="100,100 150,25 150,75 200,0" fill="none" stroke="black" />
</svg>

`<react>`

Vẽ hình chữ nhật. Với thẻ này, ngoài việc vẽ hình chữ nhật 4 góc nhọn thông thường, thì còn có thể bo góc cho hình nữa:

<svg>
    <rect x="120" y="60" width="200" height="100" rx="15" />
</svg>

Ở đây, x, y là tọa độ đỉnh trên bên trái. width là chiều rộng của hình chữ nhật, height là chiều cao của hình chữ nhật. Để bo góc cho hình, có thể sử dụng thêm 2 param là rx và ry. Nếu chỉ ghi rx, mặc định sẽ là rx = ry. rx là chiều rộng của đường bo, ry là chiều cao của đường bo tròn. Mọi người tham khảo hình minh họa phía dưới để hình dung rõ hơn nhé:

`<path>`

<path> thì không có các attribute x, y, points như các thẻ trên, mà chỉ có attribute chính là d đại diện cho chữ 'data' (tất nhiên là còn attribute thông thường như style, class, id,... như các tag khác nữa). Và bên trong cái d này mới là sự phức tạp này. Để vẽ các đường nét thì tất cả thông tin dùng để vẽ sẽ được đặt trong thẻ d này

<path d="M 10,30
       A 20,20 0 0,1 50,30
       A 20,20 0 0,1 90,30
       Q 90,60 50,90
       Q 10,60 10,30 z"/>

Bên trong attribute d này có các phần tử con chính như sau (lưu ý là đây vẫn là 1 đường liền, tức là điểm trước nối điểm sau, vẽ không nhấc bút cho tới điểm cuối cùng nhé: end point thằng trước là start point vẽ thằng sau):

M - move to: Đây là điểm bắt đầu đặt bút vẽ, đi kèm theo sau là cặp tọa độ của điểm đặt bút này.

M[point-x],[point-y]
VD: 'M282,360'

L: viết tắt của 'Line', đi theo sau cũng là 1 cặp tọa độ, có nghĩa là từ điểm trước đó vẽ 1 đường thẳng tới điểm có tọa độ đi kèm

L[endPoint-x],[endPoint-y]
VD: 'L30,60'

A: Arcs - Vẽ cung elip. Theo sau là 4 bộ tham số cách nhau bới dấu space: VD: A 20,20 0 0,1 50,30 (có thể có cách viết khác các cặp tham số này, nhưng mình viết theo cặp dấu phẩy cho dễ phân tích)
- Cặp thứ 1: theo thứ tự là X radius và Y radius, nếu X radius = Y radius thì sẽ là vẽ cung của đường tròn, còn nếu 2 tham số khác nhau thì sẽ là vẽ cung của đường elip. Xem hình react đã minh họa phía trên, thì X radius (rx) là độ cao đường cong. Trên thực tế thì đây là 1 góc tư của hình elip được vẽ với chiều cao elip = 2ry, chiều rộng elip = 2rx. Như vậy, cặp thứ 1 sẽ định nghĩa đường elip với chiều cao elip = 2 * Y radius và chiều rộng = 2 * X radius
- Cặp tham số cuối: xác định điểm cuối của elip. Điểm đầu của elip được xác định bằng điểm kết thúc của hình vẽ trước đó, nên điểm cuối elip này cũng sẽ là điểm bắt đầu vẽ của hình tiếp theo.

A[X-radius],[Y-radius] [x-axis-rotation] [large arc sweep flag],[sweep flag] [endPoint-x],[endPoint-y]
VD: 'A20,20 0 0,1 50,30'

Q: Vẽ đường cong bậc 2 - Quadratic Bezier Curves. Đường này dùng để nối 2 điểm 1 cách "smooth" khi có 1 tiêu điểm. Với Q, bạn sẽ xác định 2 param: cặp tham số đầu tiên là tọa độ tiêu điểm, cặp tham số thứ 2 là tọa độ end point của hình vẽ. Với tiêu điểm được xác định và 2 điểm start point, end point, ta sẽ vẽ được 2 đường thẳng cắt nhau tại tiêu điểm. Để giải thích bằng lời thì khá dài dòng, mọi người hãy đọc thêm bài http://www.svgbasics.com/curves.html để hiểu về đường Quadratic Bezier Curves này nhé. Ngoài ra thì có thể đọc thêm bài này và thực hành luôn (rất có ích cho việc tìm hiểu phần tử C tiếp theo đây): http://apex.infogridpacific.com/SVG/svg-tutorial-lesson18-path-quadratics.html

Q[controlPoint-x],[controlPoint-y] [endPoint-x],[endPoint-y]
VD: 'Q90,60 90,50'

Vẽ hình với các control point

Khi 2 control point nằm trên 1 đường thẳng, thì đường C tạo thành cũng là 1 đường thẳng.

Đường C có 3 cặp tham số: Cặp đầu tiên là tọa độ Control point của start point, cặp tiếp theo là tọa độ control point của end point, cuối cùng là tọa độ end point

C[controlStartPoint-x],[controlStartPoint-y] [controlEndPoint-x],[controlEndPoint-y] [endPoint-x],[endPoint1-y]
VD: 'C3,63 61,5 121,5'

Dưới đây là hình mình vẽ sử dụng pen tool của Adobe Illustrator vẽ theo hướng dẫn tạo control point như hình con sóc kia, nhân tiện kẻ lưới để dễ xác định point vẽ lại bằng svg (1 ô nhỏ = 5px, 1 ô lớn = 70px)

Và đây là thành quả sau khi phân tích tọa độ các điểm: https://codepen.io/bunnypi04/pen/jObqxRX

(Mình đã vẽ thêm grid bằng JS cho mọi người dễ hình dung và xác định tọa độ)

Tổng hợp các Path Command

Dưới đây là danh sách các command để vẽ dành cho path data. Mỗi command được ký hiệu bởi 1 chữ cái, và theo sau là các bộ tham số. Các chữ cái viết hoa sẽ diễn giải tọa độ theo hệ tọa độ xOy thông thường (tức là tính từ góc trên cùng bên trái của đối tượng SVG bao nó là gốc tọa độ - Vị trí tuyệt đối), còn chữ cái viết thường sẽ có chức năng command tương tự nhưng với diễn giải tọa độ với gốc tọa độ là điểm endPoint ngay trước đó (vị trí tương đối). Giả sử so với gốc tọa độ O của đối tượng SVG: điểm M có tọa độ 5, 5; điểm N có tọa độ 15,15; thì vị trí tuyệt đối của N là 15, 15 (vì so với gốc tọa độ); còn vị trí tương đối của N khi M là điểm start Point của nó là 10, 10.

Command

Params

Tên

Thông tin

x,y

move to

Di chuyển tới điểm x,y mà ko vẽ line

x,y

move to

Cũng như trên nhưng x,y có gốc tọa độ điểm dừng bút trước đó

x,y

line to

Vẽ 1 đường thẳng tới điểm x,y

l (L nhỏ, không phải i in hoa nhé)

x,y

line to

Cũng là vẽ 1 đường thẳng nhưng điểm x,y x,y có gốc tọa độ là điểm dừng bút trước đó

horizontal line to

Vẽ 1 đường thẳng ngang từ điểm dừng bút trước đó (song song với Ox ấy) tới giao điểm với đường thẳng y = x

horizontal line to

Vẽ 1 đường thẳng ngang từ điểm dừng bút trước đó (song song với Ox ấy) tới giao điểm với đường thẳng y = x-params nhưng gốc tọa độ là điểm dừng bút trước đó

vertical line to

Vẽ 1 đường thẳng dọc từ điểm dừng bút trước đó (song song với Oy ấy) tới giao điểm với đường thẳng x = y-params

vertical line to

Vẽ 1 đường thẳng dọc từ điểm dừng bút trước đó (song song với Oy ấy) tới giao điểm với đường thẳng x = y-params nhưng gốc tọa độ là điểm dừng bút trước đó

x1,y1 x2,y2 x,y

curveto

Vẽ đường cong tới điểm (x,y) với control Start point là (x1,y1) và control End point là (x2, y2)

x1,y1 x2,y2 x,y

curveto