Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. SVG
Webdesign

Cách xử lý code SVG bằng tay

by
Difficulty:IntermediateLength:LongLanguages:

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Final product image
What You'll Be Creating

Một trong những điều thú vị nhất về đồ hoạ vector (ngoài việc giãn kích thước mà không mất đi chất lượng) đó là khi bạn nắm rõ cơ bản bạn có thể xử lý code những hình dạng đơn giản khá dễ dàng, mà không cần mở một ứng dụng đồ hoạ.

Chỉ với vài dòng code bạn đã có thể có được những icon tuỳ biến cho riêng mình, và bạn sẽ biết chính xác mỗi icon được tạo ra như thế nào.

Trong hướng dẫn này chúng ta sẽ tìm hiểu tất cả những nguyên tắt cơ bản trong việc viết code SVG bằng tay, nhưng tôi sẽ không làm bạn phiền phức với một bài diễn thuyết khô khan chỉ giải thích những dình dạng và thuộc tính có liên quan. Thay vào đó bạn sẽ học cách xử lý code SVG bằng tay thông qua thực hành, tạo sáu icon mà bạn thấy ở phần đầu của bài viết này (hãy xem demo). Trong quá trình thực hiện, bạn sẽ sử dụng tất cả các thành phần cơ bản cần thiết cho việc viết code SVG bằng tay.

Nói về những thành phần cơ bản đó, hãy xem một giới thiệu ngắn về mỗi thành phần.

Những thành phần SVG cơ bản

Bạn có thể đối mặt với rất nhiều sự phức tạp với SVG, nhưng nó không cần thiết cho những icon mà chúng ta sẽ tạo ra. Danh sách dưới đây khái quát những khối mà chúng ta sẽ cần.

  • <svg> Bao bọc và định nghĩa toàn bộ hình. <svg> chính là đồ hoạ vector mà <html> là một trang web.
  • <line> Tạo những đường thẳng đơn.
  • <polyline> Tạo những đường đa đoạn.
  • <rect> Tạo hình chữ nhật và hình vuông.
  • <ellipse> Tạo hình tròn và hình oval.
  • <polygon> Tạo hình đa giác, với ba hoặc nhiều cạnh.
  • <path> Tạo bất kỳ hình nào mà bạn thích bằng cách định nghĩa những điểm và đường thẳng giữa chúng.
  • <defs> Định nghĩa những tài nguyên có thể sử dụng lại. Không có gì nằm trong phần <defs> được hiển thị. <defs> là vector mà <head> là một trang web.
  • <g> Gom nhiều hình dạng thành một nhóm. Đặt các nhóm trong phần <defs> để cho phép chúng được sử dụng lại.
  • <symbol> Liên kết một nhóm, những với một số tính năng phụ. Thông thường được đặt trong phàn <defs>.
  • <use> Lấy những tài nguyên được định nghĩa bên trong phần <defs> và làm cho chúng hiển thị trong SVG.

Khi chúng ta bắt đầu tạo icon, chúng ta sẽ làm việc với những thành phần này theo thứ tự đã thấy ở trên.

Tập tin bắt đầu

Trước khi chúng ta bắt đầu, hãy lấy về một bản sao những tập tin khởi đầu từ repo GitHub. Bạn có thể tải tập tin .zip, hoặc clone repo về hệ thống của mình.

Chúng ta sẽ bắt đầu với một tài liệu có sẵn một số thẻ HTML và CSS cơ bản. Điều này sẽ cho ta một số style cho SVG mà chúng ta sẽ tạo ra, và đồng thời sẽ thiết lập một grid nhỏ trên trang. Chúng ta sẽ tạo các icon bên trên grid này, và hy vọng nó sẽ giúp bạn sắp xếp một cách trực quan hơn với nó khi tạo SVG.

Khi bạn mở "handcodesvg.html" từ thư mục nguồn "Starter Files" bạn sẽ thấy những điều sau đây:

Xác định nhanh các giá trị xy

Khi làm việc trong không gian 2D trên một trang web, trục ngang được biểu diễn bởi x và trục dọc được biểu diễn bởi y. Vị trí theo từng trục này được biểu diễn bởi những con số. Nếu bạn muốn di chuyển thứ gì đó về bên phải, chúng ta sẽ cần tăng giá trị x lên, và để di chuyển về bên trái chúng ta sẽ giảm x. Tương tự, để di chuyển thứ gì đó xuống chúng ta sẽ tăng y và để di chuyển lên trên chúng ta sẽ giảm y.

Một cách viết tắt thông dụng để biểu diễn xy của một điểm là (x, y). Ví dụ, một điểm tạo toạ độ x10y50 có thể được viết như sau (10, 50). Tôi sẽ sử dụng lối viết tắt này xuyên suốt trong bài viết này.

Có để ý hai đường đậm nhất trên grid của chúng ta không? Chúng ta sẽ đặt SVG sao cho góc trên bên trái thẳng hàng với vị trí mà chúng giao nhau. Như vậy, điểm giao nhau sẽ biểu diễn vị trí x = 0y = 0, hoặc (0,0) trong SVG của chúng ta.

Grid nền

Mỗi đường grid sáng nhất biểu diễn 10px, và những đường grid dày nhất biểu diễn 100px. Vì vậy nếu chúng ta muốn di chuyển một đối tượng xuống dưới từ một đường dày đến đường kế, chúng sẽ tăng vị trí của nó trên trụng y bằng 100px.

Nếu điều đó vẫn có vẻ chưa rõ lắm, đừng lo lắng điều này sẽ trở nên rõ ràng khi chúng ta bắt đầu thực hành tạo các biểu tượng SVG.

Style SVG Mặc định

Lưu ý rằng trong tập tin HTML khởi đầu có một số CSS với style mặc định cho những icon SVG mà chúng ta sắp làm:

Điều này sẽ thiết lập các icon của chúng ta thành no fill, và troke dày 5px màu đen với rounded là cap và join.

1. Thiết lập SVG

Bước đầu tiên trong việc tạo bất kỳ SVG nào là xây dựng một thẻ phần tử <svg></svg>. Bất kỳ thứ gì mà bạn muốn SVG của bạn hiển thị sẽ phải nằm bên trong hai thẻ này. Có một số thuộc tính mà bạn có thể sử dụng trên phần tử này, nhưng chúng ta sẽ giữ cho mọi thứ đơn giản và chỉ sử dụng widthheight.

Thêm code sau đây vào phần <body> của tài liệu HTML:

Lưu ý: CSS trong tập tin bắt đầu sẽ dịch chuyển SVG này xuống dưới và về bên phải 100px để góc trên bên trái của nó sẽ được đặt tại nơi giao nhau của hai đường tối nhất trên grid nền của chúng ta. Và các giá trị bên trong demo trên CodePen xuyên suốt bài hướng dẫn này cũng có thể hơi khác-nhưng hãy thoải mái với chúng.

2. Tạo Icon "Canh Lề Trái"

Hãy bắt đầu bằng cách sử dụng phần tử <line> để tạo icon canh lề trái này:

Phần tử line có bốn thuộc tính mà bạn sẽ cần phải sử dụng:

  • x1 điểm bắt đầu trên trục ngang
  • y1 điểm bắt đầu trên trục dọc
  • x2 điểm kết thúc trên trục ngang
  • y2 điểm kết thúc trên trục dọc

Tóm lại, bạn sử dụng các thuộc tính x1y1 để thiết lập nơi mà line bắt đầu, và x2y2 để thiết lập nơi mà line kết thúc.

Hãy bắt đầu line đầu tiên, cái ở trên cùng. Chúng ta sẽ tạo cái line dài 45px, tuy nhiên stroke 5px mà chúng ta sẽ sử dụng sẽ thêm một số pixel phụ xung quanh bên ngoài line. Cũng như chúng ta sẽ cần dịch chuyển line của chúng ta xuống dưới và về bên phải 3px để đảm bảo không có các pixel dư ra do troke bị cắt ra.

Vì lý do đó, chúng ta sẽ bắt đầu line của chúng ta tại một vị trí 3 trên trục x3 trên trụng y. Chúng ta có thể thiết lập điểm bắt đầu là (3,3) bằng cách sử dụng thuộc tính x1-"3" y1="3".

Chúng ta muốn line dài 45px, vì thế chúng ta sẽ thêm 45 vào vị trí x bắt đầu là 3, cho chúng ta 48 là giá trị mà chúng ta muốn thiết lập cho x2. Chúng ta muốn line hoàn tất tại cùng vị trí trên trục ngang, vì thế chúng ta sẽ thiết lập y2 bằng 3, tương tự giá trị thiết lập cho y1. Chúng ta sẽ thêm điểm cuối (48,3) này thông qua thuộc tính x2=48" y2="3".

Code hoàn chỉnh cho line đầu tiên sẽ như sau:

Xem lại trên trình duyệt và bạn sẽ thấy một đường thẳng dài 45px màu đen với hai đầu bo tròn.

Bây giờ chúng ta có thể tiếp tục thêm ba line tiếp theo vào icon của chúng ta. Chúng ta muốn kết thúc với tổng cộng bốn line. Cái đầu và thứ ba sẽ dài 45px, và cái thứ hai và thứ tư sẽ là 62px. Chúng ta cũng muốn một khoảng cách giữa mỗi line là 16px.

Chúng ta có thể làm điều này với code sau đây:

Lưu ý: giá trị y của mỗi line gia tăng 16px để tạo ra khoảng cách cần thiết.

Hãy xem lại preview trên trình duyệt và bạn sẽ thấy tất cả bốn đường. Bạn cũng có thể chỉnh sửa trực tiếp SVG trong pen này:

Tạm thời chuyển Icon thành Comment

Với code đó thì icon đầu tiên của bạn đã được hoàn thành. Chúng ta sẵn sàng chuyển đến tạo icon tiếp theo, và chúng ta sẽ muốn tạo nó ở cùng vị trí trên grid, nhưng ngay bây giờ biểu tượng canh lề trái đang ngáng đường. Như vậy, bây giờ chỉ cần comment đoạn code của nó để trải lại không gian. Chúng ta sẽ bay trở lại và bỏ comment nó sau khi chúng ta chuyển icon của chúng ta thành những tài nguyên có thể sử dụng lại.

Bạn sẽ cần thực hiện tương tự cho mỗi icon khi chúng ta tiếp tục, comment nó khi bạn hoàn tất việc tạo ra nó. Vì lý do đó có lẽ cũng là một ý tưởng hay nếu thêm một ít chú thích bên trên code cho mỗi icon để bạn biết cái nào là cái nào khi bạn quay lại chúng sau này.

3. Tạo Icon "Dấu Lớn hơn"

Đối với icon này, hãy sử dụng sự biến hoá tiếp theo của phần tử <line>: <polyline>. Chúng ta sẽ sử dụng nó để tạo một dấu lớn hơn.

Phần tử <polyline> chỉ có một thuộc tính: points. Trong này bạn sử dụng các cặp số để thiết lập một chuỗi các điểm. Line sẽ tự động được vẽ giữa chúng. Các cặp số được viết đơn giản một số sau một số khác bên trong thuộc tính points. Không yêu cầu dấu phẩy để phân cách, tuy nhiên nó vẫn có thể sử dụng dấu phẩy. Để cho dễ nhìn bạn cũng có thể muốn đặt một cặp giá trị trên một dòng riêng của nó.

Chúng ta sẽ bắt đầu polyline của chúng ta tại cùng vị trí mà chúng ta bắt đầu icon trước đó, đó là (3,3) để đảm bảo stroke và cap không bị cắt. Chúng ta muốn điểm thứ hai di chuyển về bên phải, và xuống dưới 25px, vì thế chúng ta thiết lập nó thành (30,28). Điểm thứ ba của chúng ta sẽ được canh giữa thẳng đứng so với điểm đầu tiên, và di chuyển xuống dưới 25px, vì vậy nó sẽ được thiết lập là (3,53).

Chúng ta có thể thêm những điểm này vào trong thuộc tính points của polyline như sau:

Nếu bạn muốn code ngắn gọn hơn, bạn cũng có thể viết code ở trên như sau:

hoặc

Hãy xem lại trên duyệt của bạn và bạn sẽ thấy icon lớn hơn hiển thị: thêm một icon nữa được hoàn thành, đơn giản vậy thôi!

Một lần nữa, comment nó đi và cho nó một it chú thích để bạn biết là cái nào trước khi tiến hành làm icon tiếp theo.

4. Tạo một Icon "Trình duyệt"

Bây giờ chúng ta đã làm việc với đường thẳng, hãy tạo một số hình dạng, bắt đầu với một hình chữ nhật (<rect>). Chúng ta sẽ sử dụng nó kết hợp với một số <line> để tạo một icon trình duyệt.

Hình chữ nhật và hình vuông có thể được tạo ra với phần tử <rect>, phần tử này có bốn thuộc tính mà bạn sẽ cần cung cấp:

  • x góc trên bên trái nằm trên trục x
  • y góc trên bên trái nằm trên trục y
  • width chiểu rộng của cái hình
  • height chiều rộng của hình

Lưu ý: bạn cũng có thể sử dụng các thuộc tính rxry để tạo các góc bo tròn nếu bạn thích.

Chúng ta sẽ tạo một hình chữ nhật với góc trên bên trái của nó dịch chuyển 3px theo cả hai hướng, một lần nữa hạn chế việc cắt mất stroke, vì vậy chúng ta sẽ sử dụng các thuộc tính x="3" y="3". Chúng ta muốn nó rộng 80px cao 60px, vì vậy chúng ta cũng sẽ sử dụng các thuộc tính width="80" height="60".

Như vậy code đầy đủ cho hình chữ nhật là:

Lưu code của bạn và xem lại trên trình duyệt. Bạn sẽ thấy một hình chữ nhật nhỏ nhắn nằm trên đó.

Bây giờ tất cả những gì chúng ta cần làm là thêm một đường thẳng nằm ngang ở bên trên, thêm một đường thẳng đứng gần với góc trên bên trái. Chúng ta sẽ sử dụng phương thức tạo đường thẳng tương tự như chúng ta đã làm, code hoàn chỉnh cho icon trình duyệt sẽ là:

Dành chút thời gian để xem toạ độ được cung cấp trong thuộc tính của hai đường thẳng, và có thể thay đổi các giá trị của chúng để bạn có thể thấy được chúng hoạt động như thế nào trong icon này.

5. Tạo một Icon "Cảnh báo"

Bây giờ chúng ta đã tạo được hình chữ nhật, hãy thử sử dụng <ellipse>. Chúng ta sẽ sử dụng hai trong số chúng, cùng với một <line>, để tạo icon cảnh báo này:

Tương tự như hình chữ nhật, phần tử <ellipse> cũng yêu cầu bốn thuộc tính, tuy nhiên chúng hơi khác so với những thuộc tính của hình chữ nhật. Thay vì sử dụng width và height chúng ta thiết lập một bán kính ngang và dọc.

  • cx là vị trí giữa trên trục x. Cứ coi như "cx là center x đi".
  • cy là vị trí giữa trên trục y. Hãy nghĩ về "cy là center y".
  • rx là kích thước của bán kính trên trục x, lấy chiều cao của cái hình chia cho hai. Hãy xem "rx là radius x".
  • ry kích thước của bán kính trên trục y, lấy chiều dài của cái hình chia cho hai. Hãy xem "ry là radius y".

Chúng ta muốn một hình tròn rộng 80px cao 80px, cho nghĩa là chúng ta cần bán kính của nó là 40px trên cả hai trục. Chúng ta sẽ thiết lập nó là rx="40" ry="40".

Chúng ta cũng muốn hình tròn nằm ngang bằng với những đường thẳng tối nhất trên hình của chúng ta. Giả sử hình tròn của chúng ta sẽ rộng và cao 80px, thì sẽ cần đặt tâm điểm tại 40px. Chúng ta cũng cần dịch chuyển 3px để tránh bị cắt xén, do đó tâm điểm của hình tròn sẽ là 43px trên cả hai trục. Chúng ta sẽ thiết lập điều này với các thuộc tính cx="43" cy="43".

Gom lại tất cả những thứ đó, chúng ta có code này:

Xem lại trình duyệt và bạn sẽ thấy một hình tròn trên trang web.

Bây giờ chúng ta sẽ thêm một hình tròn thứ hai, để tạo dấu chấm ở phía dưới của cái dấu chấm than. Chúng ta sẽ tạo cái này theo cách tương tự, sự khác biệt duy nhất là chúng ta sẽ sử dụng một style nội tuyến để thiết lập fill thành màu đen.

Sau cùng, chúng ta chỉ cần thêm một đường thẳng để tạo phần khác của dấu chấm than. Một lần nữa chúng ta sẽ sử dụng những kỹ thuật tương tự như với những đường thẳng khác mà chúng ta đã sử dụng cho đến lúc này, duy chỉ khác chúng ta sẽ sử dụng một style nội tuyến để làm dày stroke từ 5px lên 8px.

Code hoàn chỉnh cho icon cảnh báo của chúng ta như sau:

6. Tạo một Icon "Play"

Bây giờ chúng ta đã có hình chữ nhật và ellipse, chúng ta đã sẵn sàng sử dụng thành phần <polygon>. Chúng ta có thấy tạo ra bất kỳ hình đa giác nào mà chúng ta muốn với phần tử này, từ hình lục giác cho đến hình sao. Tuy nhiên chúng ta sẽ giữ cho mọi thứ đơn giản và tạo một tao giác. Chúng ta sẽ kết hợp nó với một <ellipse> để tạo một icon play:

Phần tử <polygon> hoàn toàn giống với phần tử <polyline>. Nó cũng chỉ có một thuộc tính, points, trong đó bạn sử dụng những cặp giá trị để thiết lập mỗi poin tạo nên cái hình. Sự khác biết đó là trong khi một polyline sẽ luôn luôn mở, thì một polygon sẽ tự động đóng lại chính nó.

Bắt đầu bằng cách lấy một hình tròn mà polygon của chúng ta sẽ nằm trong đó. Chúng ta sẽ sử dụng hình ellipse mà chúng ta đã tạo ra trong icon cảnh báo:

Bây giờ hãy tạo polygon của chúng ta. Chúng ta sẽ đặt ba point, và line sẽ tự động được tạo ra giữa những point này để tạo ra một hình tam giác. Các point sẽ là (35,23), (60,43) và (35,63). Như vậy code cho polygon sẽ là:

Code hoàn chỉnh cho icon play là:

7. Tạo một Icon "Download"

Bây giờ chúng ta sẽ chuyển đến cái có thể là phức tạo nhất, nhưng đồng thời là cái linh hoạt nhất trong việc tạo ra những hình SVG, và đó là phần tử <path>. Việc tạo một path là khá giống với việc tạo một polygon, nơi mà bạn tạo từng phần của hình dạng. Tuy nhiên với path bạn trực tiếp tạo mỗi point và line mà không có sự tự động, và bạn cũng có tuỳ chọn để tạo hình cung giữa các điểm thay vì chỉ có line.

Một path có thể được sử dụng để tạo ra bất cứ thứ gì, nhưng với sự phức tạp của nó bạn tốt hơn là nên sử dụng một ứng dụng thiết kết vector thay vì viết code bằng tay. Vì lý do đó, chúng ta sẽ tập trung vào một bộ tính năng con của path, và sử dụng nó để tạo icon download này:

Về mặt kỹ thuật, bạn có thể tạo hình dạng ở trên với một polygon, nhưng việc sử dụng path sẽ cho chúng ta biết cách phần tử path hoạt động như thế nào.

Chúng ta sẽ chỉ sử dụng một thuộc tính của <path>, và đó là d. d viết tắt của "data", và nó với nó bạn sẽ định nghĩa tất cả các point và line của path. Bên trong thuộc tính này, các chỉ thị thiết lập point của một path và tạo các line giữa chúng được cung cấp thông qua những ký tự đơn M hoặc L, theo sau bởi một bộ toạ độ x và / hoặc y.

Có một số chỉ thị, nhưng để cho bạn dễ hình dung khi làm việc với <path> chúng ta sẽ làm việc với một số cái mà có thể thực thế hơn khi viết code bằng tay. Chúng như sau:

  • M Đại diện cho moveto. Nó bắt đầu một path với tại một điểm cho trước, được định nghĩa với xy. Hãy tưởng tượng điều này giống như di chuyển chuột lên trên một điểm ở trên màn hình, rồi vẽ. M hoa xác định việc di chuyển đến một bộ toạ độ cố định. (m thường sẽ xác định các toạ độ tương đối).
  • L Biểu diễn cho lineto. Vẽ một line từ điểm hiện tại đến một điểm mới. L hoa xác định việc di chuyển đến một bộ toạ độ cố định. (l thường sẽ xác định các toạ độ tương đối).
  • Z Biểu diễn cho closepath. Nó chuyển đổi path thành một hình đóng bằng cách vẽ một đường thẳng giữa điểm hiện tại đến điểm đầu tiên được tạo ra trong path.

Bạn nhất định phải xem ba cái chỉ thị này, (và icon mà chúng ta sẽ tạo với chúng), như là một giới thiệu cơ bản nhất về phần tử <path>. Để tận dụng nó bạn sẽ cần tự làm quen với tất cả các chỉ thị.

Viết code cho Icon Download

Để code icon download này tôi khuyên bạn trước tiên nên thêm vào một phần tử path rỗng.

Từ đây, thêm từng chỉ thị một, lưu và xem lại quá trình cái hình được tạo ta để bạn có thể thấy nó được tạo ra như thế nào. Tôi cũng khuyên là đặt từng chỉ thị trên một dòng riêng của nó để dễ nhìn.

  1. Đầu tiên, chúng ta cần di chuyển đến (18,3), point tại đó chúng ta muốn cái mũi tên của chúng ta bắt đầu. Để làm điều này chúng ta sẽ thêm chỉ thị M 18 3 vào thuộc tính d của path.
  2. Tiếp theo chúng ta cần sử dụng chỉ thị L để tạo một line mà vẽ từ point bắt đầu của path dọc theo trục x có chiều dài 28px. Để làm điều đó hãy thêm chỉ thị thứ hai: L 46 3. Xem lại trên trình duyệt và bạn sẽ thấy một đường nhỏ nằm ngang.
  3. Bây giờ hãy vẽ một đường thẳng xuống dài 37px bằng cách thêm L 46 40.
  4. Sau đó thẳng về bên phải 15px với L 61 40
  5. Tiếp theo chúng ta phải bắt đầu tạo đầu mũi tên. Chúng ta cần vẽ một đường chéo xuống dưới chếch về bên trái. Chúng ta sẽ làm điều này với L 32 68.
  6. Và sau đó chúng ta sẽ có một đường chéo lên trên và chếch về bên trái với L 3 40.
  7. Bây giờ chúng ta sẽ hoàn tất đầu mũi tên bằng cách vẽ một đường dẫn nhỏ về bên phải một lần nữa với L 18 40.
  8. Để đóng shape của chúng ta chúng ta không cần phải chỉ định một point để vẽ một line đến đó. Tất cả những gì chúng ta cần làm là thêm chỉ thị Z, cái mà sẽ tự động đóng shape cho chúng ta.

Code cho mũi tên sẽ trông như sau:

Để tìm hiểu thêm về <path> hãy tham khảo một số bài viết ở bên dưới.

8. Thêm Phần tử <defs>

Chúng ta đã viết xong sáu icon, giờ chúng ta có thể sử dụng lại chúng sau này trong SVG.

Để làm điều này chúng ta sẽ bọc tất cả sáu icon lại, (hiện đang comment), những icon với tag <defs></defs>:

Điều này nói cho hệ thống biết rằng tất cả các icon mà chúng ta đã tạo ra mặc định là ẩn đi, cho tới khi chúng ta sử dụng chúng.

Bây giờ bạn đã có thể bỏ comment từng icon và chúng sẽ không được nhìn thấy trên trang.

9. Tạo nhóm với <g>

Có hai cách để sử dụng icon của mình: bằng cách chuyển chúng thành nhóm, hoặc thành symbol. Chúng ta sẽ chuyển phân nữa icon thành nhóm, và phân nửa còn lại thành symbol để chúng ta có thể hình dung được sự khác nhau.

Để chuyển đổi một trong số icon của chúng ta thành một nhóm thì tất cả những gì chúng ta phải làm là bọc nó bên trong thẻ <g></g>. Để làm cho nhóm đó có thể sử dụng lại chúng ta cũng sẽ cần cho nó một ID duy nhất.

Ví dụ:

Bọc từng icon trong nhóm đầu tiên với <g></g> và thêm các ID, như sau:

10. Sử dụng nhóm với <use>

Bây giờ chúng có ba icon được định nghĩa như các nhóm bên trong phần tử <defs>, như vậy chúng ta đã sẵn sàng để sử dụng chúng trong SVG của chúng ta. Để làm điều này, tất cả những gì chúng ta phải làm là thêm một phần tử <use>, (đảm bảo là thêm nó sau và bên ngoài phần tử <defs>), và thiết lập một thuộc tính href đến ID của icon cần thiết.

Ví dụ, để sử dụng icon canh trái thêm code sau:

Để đặt icon ở một vị trí cụ thể thêm thuộc tính xy:

Code để thêm tất cả ba icon và cách khoảng chúng sẽ như sau:

Kiểm tra trình duyệt và bạn sẽ thấy tất cả ba icon đầu tiên của bạn:

11. Tạo Symbol với <symbol>

Thay vì sử dụng nhóm để định nghĩa các icon bạn cũng có thể sử dụng symbol. Symbol hoàn toàn giống với nhóm, tuy nhiên bạn được truy xuất các thiết lập bổ sung để điều khiển viewbox và tỷ lệ.

Điều này có thể rất hữu ích nếu bạn muốn làm những thứ như canh giữa icon mà chúng ta đã tạo. Chúng ta sẽ chuyển ba icon còn lại thành symbol, sau đó tinh chỉnh chúng để fill khoảng không cao 100px, và canh giữa theo chiều ngang trong không gian đó.

Chúng ta tạo ra symbol theo cùng cách với nhóm, chỉ là chúng ta sẽ nhóm mỗi code cho mỗi icon trong thẻ <symbol></symbol>. Chúng ta sẽ cần thêm một ID duy nhất vào từng icon.

Tuy nhiên những gì chúng ta cũng sẽ làm là thêm một thuộc tính viewBox. Thuộc tính này sẽ cho phép chúng ta định nghĩa phần sẽ được hiển thị của mỗi icon. Khi trình duyệt truy cập đến thông tin này thì nó có thể giãn và canh symbol một cách chính xác.

Chúng ta sẽ cần cho thuộc tính viewBox của chúng ta bốn giá trị. Hai cái đầu tiên sẽ định nghĩa điểm phía trên bên trái của icon, và cái thứ ba và thứ tư định nghĩa chiều rộng và chiều cao tương ứng của nó.

Bắt đầu với icon "cảnh báo", chiều rộng và cao của nó đều là 86px vì thế chúng ta sẽ thiết lập viewBox của nó là 0 0 86 86 như sau:

Icon "play" cũng rộng và cao 86px, và icon "download" rộng là 64px cao 71px. Code tương ứng cho các symbol sẽ như sau:

12. Sử dụng Symbol với <use>

Bây giờ chúng ta có thể sử dụng các symbol của chúng ta theo cách tương tự như chúng ta đã làm với nhóm. Tuy nhiên chúng ta cũng sẽ cung cấp cho mỗi cái chiều rộng và cao là 100:

Bạn sẽ thấy mỗi symbol fill và canh trong không gian 100px nhân 100px của nó:

Thử áp dụng thuộc tính widthheight vào phần tử <use> của một trong những nhóm của bạn. Bạn sẽ thấy rằng không có gì thay đổi. Điều này là vì trình duyệt dựa trên các giá trị của viewBox, (cái mà một group không có), để biết cách giãn icon.

Tóm tắt

Code hoàn chỉnh sẽ như sau:

Điều đó đã khái quát những điều cơ bản về viết code SVG bằng tay! Hãy tổng hợp lại những gì chúng ta đã học được:

  • Thiết lập phần tử <svg> của bạn để bao bọc toàn bộ hình dạng của bạn.
  • Sử dụng <line><polyline> để tạo các line.
  • Sử dụng <rect>, <ellipse><polygon> để tạo các hình dạng đóng.
  • Sử dụng <path> để tạo bất kỳ thứ gì bạn muốn.
  • Nhóm các hình dạng lại với nhau bằng phần tử <g>.
  • Đối với nhóm cộng thêm một số tính năng phụ, sử dụng <symbol>
  • Sử dụng phần tử <defs> để định nghĩa bất kỳ symbol và nhóm có thể sử dụng lại.
  • Sử dụng symbol và nhóm có thể sử dụng lại bằng phần tử <use>.

Chúng ta đã học một số kiến thức cơ bản trong hướng dẫn này, nhưng có rất nhiều thứ mà bạn có thể làm với SVG vì vậy đừng dừng ở đây, hãy tiếp tục khám phá thêm những điều thú vị mà bạn có thể làm được!

Trong lúc đó, hy vọng bạn không còn cảm thấy hoàn toàn phụ thuộc vào các ứng dụng thiết kế vector trong việc tạo SVG, và bạn tự tin tạo ra một số đồ hoạ bằng tay. Đối với đồ hoạ phức tạp hơn, các ứng dụng thiết kết vẫn là cách tốt nhất, nhưng có rất nhiều thứ bạn có thể làm với những gì bạn học được.

Các liên kết liên quan:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.