Html sang hình ảnh svg

Vì là hình ảnh dạng vector nên chúng ta có thể hiển thị, co giãn [tỷ lệ] thoải mái mà không làm giảm chất lượng hình ảnh

 

Phần tử HTML

Phần tử HTML là bộ chứa cho đồ họa SVG.

SVG có nhiều phương thức để vẽ các đường thẳng, hình hộp, hình tròn, văn bản và hình ảnh

 

SVG shape

Ví dụ

 

SVG chữ nhật

Ví dụ

 

SVG hình chữ nhật bo tròn

Ví dụ

 

SVG sao

Ví dụ

 

Biểu trưng SVG

Ví dụ

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

 

Khác biệt giữa SVG với Canvas

SVG là ngôn ngữ để mô tả đồ họa 2D trong XML

Canvas vẽ đồ họa 2D, nhanh chóng [với Javascript]

SVG dựa trên XML, có nghĩa là mọi phần tử đều có sẵn trong SVG DOM. Bạn có thể đính kèm các trình xử lý sự kiện JavaScript cho một phần tử

Trong SVG, mỗi hình dạng được vẽ được ghi nhớ như một đối tượng. Nếu các thuộc tính của đối tượng SVG bị thay đổi, trình duyệt có thể tự động xuất lại định dạng

Canvas được hiển thị theo từng pixel. Trong canvas, một khi đồ họa được vẽ, nó sẽ bị quên đi. Nếu vị trí của nó phải được thay đổi, toàn bộ cảnh cần được vẽ lại, bao gồm bất kỳ đối tượng nào có thể được bao phủ bởi đồ họa

Một trong những điều thú vị nhất về đồ họa vector [ngoài tác dụng giãn kích thước mà không làm mất đi chất lượng] đó là khi bạn nắm rõ cơ bản, bạn có thể xử lý mã những cấu hình đơn giản, khá dễ dàng mà không cần thiết

Chỉ với vài dòng mã, bạn đã có thể có được những biểu tượng tùy biến cho riêng mình, và bạn sẽ biết chính xác từng biểu tượng được tạo ra như thế nào

Trong hướng dẫn này, chúng tôi sẽ tìm hiểu tất cả các nguyên tắt cơ bản trong công việc viết mã 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ý mã SVG bằng tay thông qua thực thi, tạo sáu biểu tượng mà bạn thấy ở phần đầu của bài viết này [vui lòng 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 mã 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

Các 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 nhất thiết phải chọn những biểu tượng mà chúng ta sẽ tạo ra. Danh sách liệt kê dưới đây là các khái niệm về các khối mà chúng ta sẽ cần

• 3

  76 Bao bọc và định nghĩa toàn bộ cấu hình.

  3

  77 chính là đồ họa vector mà

  3

  78 là một trang web

• 3

  79 Tạo các đường thẳng đơn

• 3

  80 Tạo những đoạn đường đa đoạn

• 3

  81 Tạo hình chữ nhật và hình vuông
  

• 3

  82 Tạo hình tròn và hình bầu dục

• 3

  83 Tạo hình đa giác, có ba hoặc nhiều cạnh

• 3

  84 Tạo bất kỳ hình dạng nào mà bạn thích bằng cách định nghĩa các điểm và đường thẳng giữa chúng
  

• 3

  85 Đị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

  3

  86 được hiển thị.

  3

  86 is vector which

  3

  88 is a page web

• 3

  89 Gom nhiều hình dạng thành một nhóm. Đặt các nhóm trong phần

  3

  86 để cho phép chúng được sử dụng lại

• 3

  91 Liên kết một nhóm, những người có một số tính năng phụ. Thông thường được đặt trong phẩn

  3

  86

• 3

  93 Lấy những tài nguyên được định nghĩa bên trong phần

  3

  86 và làm cho chúng hiển thị trong SVG

Khi chúng ta bắt đầu tạo biểu tượng, 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

The file started

Trước khi chúng ta bắt đầu, hãy lấy về một bản sao các tập tin khởi động từ repo GitHub. You can download file. zip, or 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ố kiểu cho SVG mà chúng ta sẽ tạo ra, và đồng thời sẽ thiết lập một lưới nhỏ trên trang. Chúng ta sẽ tạo các biểu tượng bên trên lưới 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 so với khi tạo SVG

When you open "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ị của

3

95 và

3

96

Khi làm việc trong không gian 2D trên một trang web, trục ngang được diễn bởi

3

95 và trục dọc được diễn bởi

3

96. Vị trí theo từng thành phần này được biểu diễn bởi các con số. Nếu bạn muốn chuyển thứ gì đó về bên phải, chúng ta sẽ cần tăng giá trị

3

95 lên, và để chuyển về bên trái chúng ta sẽ giảm

3

95. Tương tự, để chuyển thứ gì đó xuống chúng ta sẽ tăng

3

96 và để chuyển lên chúng ta sẽ giảm

3

96

Một cách viết tắt thông tin ứng dụng để biểu diễn

3

95 và

3

96 của một điểm là

405. Ví dụ, một điểm tạo ra mức độ

3

95 là

407 và

3

96 là

409 có thể được viết như sau

410. Tôi sẽ sử dụng lối viết tắt xuyên suốt trong bài viết này

Có để ý hai đường đậm nhất trên lưới của chúng ta không? . Như vậy, điểm giao nhau sẽ biểu thị vị trí của

411 và

412, hoặc

413 trong SVG của chúng ta

Lưới nền

Mỗi đường lưới dày nhất biểu diễn

414, và những đường lưới dày nhất biểu diễn

415. Vì vậy nếu chúng ta muốn di chuyển một đối tượng xuống bên dưới từ một đường dày đến đường kế, chúng ta sẽ tăng vị trí của nó trên trụ

3

96 bằng

415

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 hiện hành động tạo các biểu tượng SVG

Style SVG Default

Lưu ý rằng trong tệp HTML khởi động có một số CSS với kiểu mặc định cho những biểu tượng SVG mà chúng ta sắp làm

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

8

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

9

3

0

3

4

3

3

3

4

3

5

3

6

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

80

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

81

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

82

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

83

Điều này sẽ thiết lập các biểu tượng của chúng ta thành không tô, và troke dày

418 màu đen với tròn là nắp và tham gia

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ử

419. Bất kỳ điều gì 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 tôi sẽ duy trì mọi thứ đơn giản và chỉ sử dụng

420 và

421

Thêm mã sau đây vào phần

422 của tài liệu HTML

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

85

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

9

3

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

88

Lưu ý. CSS trong tệp bắt đầu sẽ chuyển SVG này xuống dưới và về bên phải

415 để 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 đa trên nền lưới của chúng tôi. Và những người đánh giá bên trong bản 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 thoải mái với họ

2. Tạo biểu tượng "Canh Lê Trái"

Hãy bắt đầu bằng cách sử dụng phần tử

424 để tạo biểu tượng canh lề trái này

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

• 425 điểm bắt đầu trên trục ngang
  

• 426 start point on vertical line
  

• 427 endpoint on the angle

• 428 endpoints on vertical line

Tóm lại, bạn sử dụng các thuộc tính

425 và

426 để thiết lập nơi mà dòng bắt đầu, và

427 và

428 để thiết lập nơi mà dòng kết thúc

Please started the first line, the at on the same. Chúng ta sẽ tạo ra một dòng dài

433, tuy nhiên nét vẽ

418 mà chúng ta sẽ sử dụng sẽ thêm một số pixel phụ xung quanh dòng bên ngoài. Cũng như chúng ta sẽ cần chuyển dòng của chúng ta xuống dưới và về bên phải

435 để chắc chắn rằng không có pixel dư ra do troke bị cắt ra

Vì lý do đó, chúng ta sẽ bắt đầu dòng đầu tiên của chúng ta tại một vị trí

436 trên trục

3

95 và

436 trên trụ

3

96. Chúng ta có thể thiết lập điểm bắt đầu là

440 bằng cách sử dụng thuộc tính

441

Chúng ta muốn dòng dài

433, vì thế chúng ta sẽ thêm

443 vào vị trí

3

95 bắt đầu là

436, vì chúng ta

446 là giá trị mà chúng ta muốn thiết lập cho

427. Chúng ta muốn hoàn tất dòng tại cùng một vị trí trên trục ngang, vì thế chúng ta sẽ thiết lập

428 bằng

436, tương tự giá trị thiết lập cho

426. Chúng ta sẽ bổ sung điểm cuối

451 này thông qua thuộc tính

452

Mã hoàn chỉnh cho dòng đầu tiên sẽ như sau

_______47____490

Xem lại trên trình duyệt và bạn sẽ thấy một đường thẳng dài

433 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 dòng tiếp theo vào biểu tượng của chúng ta. Chúng ta muốn kết thúc với tổng cộng bốn dòng. Cái đầu và thứ ba sẽ dài

433, còn cái thứ hai và thứ tư sẽ là

455. Chúng ta cũng muốn có một khoảng cách giữa mỗi dòng là

456

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

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

90____49

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

94

3

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

96

3

3

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

98

Lưu ý. giá trị

3

96 của mỗi dòng gia tăng

456 để tạo ra khoảng cách cần thiết

Vui lòng xem lại bản xem trước trên trình duyệt và bạn sẽ thấy tất cả các đường. Bạn cũng có thể chỉnh sửa trực tiếp SVG trong bút này

Pause time convert Icon to Comment

With code that, the first icon of you has been complete. Chúng ta có sẵn để tạo biểu tượng tiếp theo, và chúng ta sẽ muốn tạo biểu tượng đó ở cùng một vị trí trên lưới, nhưng ngay bây giờ biểu tượng bên trái đang cản đường. Như vậy, bây giờ chỉ cần bình luận đoạn mã của nó để trải nghiệm lại không gian. Chúng ta sẽ quay trở lại và bỏ bình luận sau khi chúng ta chuyển biểu tượng 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 phải thực hiện tương tự cho từng biểu tượng khi chúng ta tiếp tục, hãy nhận xét nó khi bạn hoàn thành 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 chút chú thích bên trên mã cho mỗi biểu tượng để 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 Biểu tượng "Dấu Lớn Hơn"

Đối với biểu tượng này, hãy sử dụng sự biến đổi tiếp theo của phần tử

424.

460. Chúng ta sẽ sử dụng nó để tạo ra một dấu hiệu lớn hơn

Phần tử

460 chỉ có một thuộc tính.

462. Trong phần này, bạn sử dụng các cặp số để thiết lập một chuỗi các điểm. Dòng 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

462. 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. Để 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 đa tuyến của chúng ta tại cùng một vị trí mà chúng ta bắt đầu biểu tượng trước đó, đó là

440 để đảm bảo nét và nắp 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

465, vì thế chúng ta thiết lập nó thành

466. Đ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 bên dưới

465, vì vậy nó sẽ được thiết lập là

468

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

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

3

00______49

3

02

3

3

04

3

3

3

06

3

5

3

08

Nếu bạn muốn rút ngắn mã hơn, bạn cũng có thể viết mã ở trên như sau

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

3

0

hoặc

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

3

2

Vui lòng xem lại sự duyệt của bạn và bạn sẽ thấy biểu tượng hiển thị tốt hơn. add an icon nữa đã được hoàn tất, đơn giản thôi

Một lần nữa, hãy bình luận cho nó đi và cho nó một chú thích để bạn biết là cái nào trước khi tiến hành làm biểu tượng tiếp theo

4. Tạo biểu tượng "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ố định dạng, bắt đầu với một hình chữ nhật [

469]. Chúng ta sẽ sử dụng nó kết hợp với một số

424 để tạo một trình duyệt biểu tượng

Hình chữ nhật và hình vuông có thể được tạo ra với phần tử

469, phần tử này có đặc tính mà bạn cần cung cấp

• 3

  95 góc trên bên trái nằm trên trục

  3

  95
  

• 3

  96 góc trên bên trái nằm trên trục

  3

  96
  

• 420 chiều rộng của cái hình
  

• 421 chiều rộng của hình
  

Lưu ý. bạn có thể sử dụng các thuộc tính

478 và

479 để tạo các góc bo tròn nếu bạn cũng 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

435 theo cả hai hướng, một lần nữa hạn chế cắt giảm đột quỵ, vì vậy chúng ta sẽ sử dụng các thuộc tính của

481. Chúng ta muốn nó rộng

482 cao

483, vì vậy chúng ta cũng sẽ sử dụng các thuộc tính của

484

Như vậy mã đầy đủ cho cấu hình chữ nhật là

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

3

4

Lưu mã của bạn và xem lại trên trình duyệt. Bạn sẽ thấy một tin nhắn chữ nhật nhỏ 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, mã hoàn chỉnh cho biểu tượng trình duyệt sẽ là

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

3

4____49____58

3

40

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

5. Tạo biểu tượng "Cảnh báo"

Bây giờ chúng ta đã tạo được hình chữ nhật, hãy thử sử dụng

485. Chúng ta sẽ sử dụng hai trong số chúng, cùng với một

424, để tạo biểu tượng cảnh báo này

Tương tự như hình chữ nhật, phần tử

485 cũng yêu cầu bốn thuộc tính, tuy nhiên chúng hơi khác so với thuộc tính của hình chữ nhật. Thay vì sử dụng chiều rộng và chiều cao, chúng ta thiết lập một bán kính ngang và dọc

• 488 is the position between on the

  3

  95. Cứ coi như "cx is center x go"
  

• 490 is the position between on the

  3

  96. Please think about "cy is center y"
  

• 478 là kích thước của bán kính trên trục

  3

  95, lấy chiều cao của cái hình chia cho hai. Vui lòng xem "rx là bán kính x"
  

• 479 size of bán kính trên trục

  3

  96, lấy chiều dài của cái hình chia cho hai. Please see "ry is radius y"
  

Chúng ta muốn một hình tròn rộng

482 cao

482, nghĩa là chúng ta cần bán kính của nó là

498 trên cả hai trục. Chúng ta sẽ thiết lập nó là

499

Chúng ta muốn hình tròn nằm ngang bằng với những đường thẳng tối đa 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

482, thì cần đặt tâm điểm tại

498. Chúng ta cũng cần dịch chuyển

435 để tránh bị cắt xén, do đó tâm điểm của hình tròn sẽ là

3

303 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

3

304

Quay lại tất cả những thứ đó, chúng ta có mã này

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

42

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 dấu chấm than. Chúng ta sẽ tạo ra 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 kiểu nội tuyến để thiết lập điền vào màu đen

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

44

Sau cùng, chúng ta chỉ cần thêm một đường dẫn để tạo phần khác của dấu chấm hơn. 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 kiểu nội tuyến để làm dày nét từ

418 đến

3

306

Hoàn chỉnh mã cho biểu tượng cảnh báo của chúng ta như sau

6. Tạo biểu tượng "Phát"

Bây giờ chúng ta đã có hình chữ nhật và hình elip, chúng ta đã sẵn sàng sử dụng thành phần

3

307. Chúng ta đã thấy việc tạo ra bất kỳ hình dạng đ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ữ mọi thứ đơn giản và tạo ra một giác quan. Chúng ta sẽ kết hợp nó với một

485 để tạo ra một trò chơi biểu tượng

Phần tử

3

307 hoàn toàn giống với phần tử

460. Nó chỉ có một thuộc tính,

462, trong đó bạn sử dụng những cặp giá trị để thiết lập mỗi điểm tạo nên cái hình cũng vậy. Sự khác biết đó là khi một đa tuyến sẽ luôn luôn mở, thì một đa giác 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à đa giác của chúng ta sẽ nằm trong đó. Chúng ta sẽ sử dụng hình elip mà chúng ta đã tạo ra trong biểu tượng cảnh báo

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

42

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

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

48

Hoàn chỉnh code cho icon play là

7. Tạo biểu tượng "Tải xuống"

Bây giờ chúng ta sẽ chuyển đến cái có thể là phức hợp tạo ra nhất, nhưng đồng thời là cái linh hoạt nhất trong việc tạo ra những SVG hình, và đó là phần tử

3

312. Việc tạo một đường dẫn khá giống với việc tạo một đa giác, nơi bạn tạo từng phần của định dạng hình. Tuy nhiên, với đường dẫn bạn trực tiếp tạo từng điểm và đường mà không có sự tự động, và bạn cũng có tùy chọn để tạo hình cung giữa các điểm thay vì chỉ có đường

Một đường dẫn 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ó, tốt hơn là bạn nên sử dụng một ứng dụng vector thiết bị kết nối thay vì viết mã bằng tay. Vì lý do đó, chúng tôi sẽ tập trung vào một bộ tính năng đường dẫn và sử dụng nó để tạo biểu tượng tải xuống này

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

Chúng ta sẽ chỉ sử dụng một thuộc tính của

3

312, và đó là

3

314.

3

314 viết tắt của "data", and it with it you will định nghĩa tất cả các điểm và đường của đường dẫn. Bên trong thuộc tính này, các điểm thiết lập duy nhất của một đường dẫn và tạo các dòng giữa chúng được cung cấp thông tin qua các ký tự đơn

3

316 hoặc

3

317, theo sau bởi một bộ cấp độ

3

95 và / hoặc

3

96

Có một số chỉ thị, nhưng để cho bạn dễ hình dụng khi làm việc với

3

312 chúng ta sẽ làm việc với một số cái mà có thể thực tế hơn khi viết mã bằng tay. We like after

• 3

  316 Đại diện cho

  3

  322. Nó bắt đầu một con đường với tại một điểm cho trước, được định nghĩa bởi

  3

  95 và

  3

  96. Hãy tưởng tượng điều này giống như di chuyển chuột lên một điểm trên màn hình, rồi vẽ.

  3

  316 Hoa xác định công việc được chuyển đến một bộ định mức. [

  3

  326 thường sẽ xác định các đối số tương thích]
  

• 3

  317 Biểu diễn cho

  3

  328. Vẽ một dòng từ điểm hiện tại đến một điểm mới.

  3

  317 Hoa xác định công việc được chuyển đến một bộ định mức. [

  3

  330 thường sẽ xác định các đối số tương thích]

• 3

  331 Biểu diễn cho

  3

  332. Nó chuyển đổi đường dẫn 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 đường dẫn

Bạn nhất định phải xem ba cái chỉ thị này, [và biểu tượng mà chúng ta sẽ tạo ra với chúng], như một giới thiệu cơ bản nhất về phần tử

3

312. Để tận hưởng nó, bạn sẽ cần phải tự làm quen với tất cả các thị trường duy nhất

Viết code cho Icon Download

Để tải xuống biểu tượng mã này, tôi khuyên bạn trước tiên nên thêm vào đường dẫn phần tử trống

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

3

30____49

3

32

3

3

34

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

1. Đầu tiên, chúng ta cần chuyển đến

   3

   334, 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ị

   3

   335 vào thuộc tính

   3

   314 của đường dẫn
   
2. Tiếp theo chúng ta cần sử dụng chỉ thị

   3

   317 để tạo một dòng vẽ từ điểm bắt đầu của đường dẫn dọc theo trục

   3

   95 có chiều dài

   3

   339. Để làm điều đó, hãy thêm chỉ thứ hai.

   3

   340. 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

   3

   341 bằng cách thêm

   3

   342
4. Sau đó thẳng về bên phải

   3

   343 với

   3

   344
5. Tiếp theo chúng ta phải bắt đầu tạo mũi tên. Chúng ta cần vẽ một đường chéo xuống dưới chế độ về bên trái. Chúng ta sẽ làm điều này với

   3

   345
6. Và sau đó chúng ta sẽ có một đường chéo lên trên và hướng về phía bên trái với

   3

   346
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

   3

   347
8. To close shape of them ta we do not need to just an point to draw a line to that. Tất cả những gì chúng ta cần làm là thêm chỉ thị

   3

   331, cái mà sẽ tự động đóng hình dạng cho chúng ta

Code for arrow name will look as after

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

3

30

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

9

3

38

3

3

40

3

3

3

42

3

5

3

44

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

80

3

46

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

82

3

48

3

49

3

50

3

51

3

52

3

53

3

34

Để tìm hiểu thêm về

3

312, hãy tham khảo một số bài viết ở bên dưới

8. Thêm Phần tử

3

86

Chúng ta đã viết xong sáu biểu tượng, 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 lại tất cả sáu icon, [hiện đang comment], những icon với tag

3

351

_______47____556____49____558

3

3

60

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

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

9. Tạo nhóm với

3

352

Có hai cách để sử dụng biểu tượng của mình. by way transfer them to group, or to symbol. Chúng ta sẽ chuyển các biểu tượng phân nữa thành nhóm, và các phân nửa còn lại thành biểu tượng để chúng ta có thể cấu hình các dung lượng khác nhau

To convert a in number icon of them ta to a group, thì tất cả những gì chúng ta phải làm đều được bọc bên trong thẻ

3

353. Để 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ụ

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

3

62

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

9

3

64

3

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

90

3

3

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

94

3

5

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

96

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

80

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

98

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

82

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

804

Từng biểu tượng trong nhóm đầu tiên với

3

353 và thêm các ID, như sau

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

3

62

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

9

3

64

3

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

90

3

3

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

94

3

5

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

96

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

80

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

98

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

82

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

804

3

49

3

51

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

821

3

53

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

823

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

824

3

00

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

826

3

02

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

828

3

04

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

830

3

06

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

832

3

08

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

834

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

804

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

836

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

837

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

838

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

839

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

840

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

841

3

4

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

843

3

8

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

845

40

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

847

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

804

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

3

355

Bây giờ chúng ta có ba biểu tượng được định nghĩa là các nhóm bên trong phần tử

3

86, 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ử

3

355, [ đảm bảo là bổ sung nó sau và bên ngoài phần tử

3

86], và thiết lập một thuộc tính

3

359 cho ID của biểu tượng cần thiết

Ví dụ, để sử dụng biểu tượng canh trái thêm mã sau

_______47____4850

Để đặt biểu tượng ở một vị trí công cụ có thể bổ sung thuộc tính

3

95 và

3

96

_______47____4852

Code to add all ba icon and distance them will like after

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

852

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

9

3

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

857

3

3

3

5

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

860

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

11. Create Symbol with

3

362

Thay vì sử dụng nhóm để định nghĩa các biểu tượng, bạn cũng có thể sử dụng biểu tượng. 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 hộp xem 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 biểu tượng mà chúng ta đã tạo. Chúng ta sẽ chuyển ba biểu tượng còn lại thành biểu tượng, sau đó tinh chỉnh chúng để lấp đầy khoảng không cao

415 và canh giữa theo chiều ngang trong không gian đó

Chúng ta tạo biểu tượng theo cùng một cách với nhóm, chỉ là chúng ta sẽ nhóm từng mã cho từng biểu tượng trong thẻ

3

364. Chúng ta sẽ cần thêm một ID duy nhất vào từng biểu tượng

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 các phần sẽ được hiển thị trên mỗi biểu tượng. Khi trình duyệt truy cập đến thông tin này, nó có thể thư giãn và biểu tượng canh một cách chính xác

Chúng ta sẽ cần phải có thuộc tính

3

365 của chúng ta bốn giá trị. Hai cái đầu tiên sẽ định nghĩa các điểm phía bên trái của biểu tượng, 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 biểu tượng "cảnh báo", chiều rộng và cao của nó đều là

3

366 vì thế chúng ta sẽ thiết lập

3

365 của nó là

3

368 như sau

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

862

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

9

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

864

3

42

3

3

44

3

5

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

870

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

80

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

872

Biểu tượng "play" cũng rộng và cao

3

366, còn biểu tượng "download" rộng là

3

370 cao

3

371. Mã tương ứng cho các ký hiệu sẽ như sau

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

862

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

9

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

864

3

42

3

3

44

3

5

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

870

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

80

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

872

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

82

3

49

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

887

3

51

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

889

3

53

42

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

824

48

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

826

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

804

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

828

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

830

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

898

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

832

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

900

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

834

3

30

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

836

3

38

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

837

3

40

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

839

3

42

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

841

3

44

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

843

3

46

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

845

3

48

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

847

3

50

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

917

3

52

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

919

3

34

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

921

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

872

12. Use Symbol with

3

355

Bây giờ chúng ta có thể sử dụng các ký hiệu 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 tôi cũng sẽ cung cấp cho mỗi chiều rộng và chiều cao là

3

373

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

924

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

9

3

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

927

3

3

3

5

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

930

Bạn sẽ thấy mỗi biểu tượng điền và canh trong khoảng thời gian

415 nhân

415 của nó

Cố gắng áp dụng các thuộc tính

420 và

421 vào phần tử

3

355 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à do trình duyệt dựa trên các giá trị của

3

365, [cái mà một nhóm không có], để biết cách giãn biểu tượng

tóm tắt

Mã hoàn chỉnh sẽ như sau

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

7

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

932

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

9

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

934

3

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

936

3

3

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

938

3

5

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

940

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

80

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

942

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

82

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

944

3

49

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

946

3

51

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

948

3

53

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

950

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

824

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

952

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

826

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

954

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

828

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

956

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

830

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

958

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

832

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

960

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

834

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

962

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

836

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

956

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

837

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

966

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

839

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

968

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

841

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

970

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

843

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

972

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

845

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

974

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

847

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

976

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

917

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

978

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

919

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

980

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

921

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

956

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

983

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

984

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

985

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

986

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

987

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

988

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

989

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

990

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

991

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

992

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

993

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

994

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

995

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

968

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

997

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

998

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

999

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

956

3

001

3

002

3

003

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

986

3

005

3

006

3

007

  
    
      
      
    
  
  
  SVG
  Sorry, your browser does not support inline SVG.

990

3

009

3

010

3

011

3

012

3

013

3

014________

Điều đó đã mô tả những điều cơ bản về viết mã 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ử

  3

  77 của bạn để bao bọc toàn bộ định dạng bộ định dạng của bạn
• Sử dụng
  424 và
  460 để tạo các dòng
  
• Sử dụng
  469,
  485 và

  3

  307 để tạo các định dạng đóng
  
• Sử dụng

  3

  312 để tạo bất kỳ thứ gì bạn muốn
• Nhóm các định dạng lại với nhau bằng phần tử

  3

  352
• Đối với nhóm cộng thêm một số tính năng phụ, sử dụng

  3

  362
  
• Sử dụng phần tử

  3

  86 để định nghĩa bất kỳ ký hiệu nào và nhóm có thể sử dụng lại
• Sử dụng biểu tượng và nhóm có thể sử dụng lại bằng phần tử

  3

  355

Chúng ta đã nghiên cứu 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 lại ở đâ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.