Thiết kế đồ họa SVG trong trình duyệt của bạn

Feb 2, 2026

Cách

Các Vecteezy Editor. là một bộ chỉnh sửa vector miễn phí chạy ngay trong trình duyệt của bạn. Hướng dẫn này bao gồm các công cụ chỉnh sửa và các công cụ hình dạng cơ bản mà bạn có thể sử dụng để chỉnh sửa bất kỳ vectơ nào trên trang web. Bằng cách này, bạn có thể xây dựng huy hiệu, nút, logo hoặc bất cứ thứ gì khác với sự dễ dàng tương đối.

GUI cho trình soạn thảo này cảm thấy tương tự như phần mềm Adobe, vì vậy nếu bạn đã sử dụng Photoshop hoặc Illustrator, bạn sẽ có thời gian học các sợi dây dễ dàng hơn. Nhưng ngay cả những người mới bắt đầu hoàn thành cũng có thể lao vào điều này và nhận những điều cơ bản từ đầu.

Nhận Adobe Creative Cloud

Chúng ta sẽ sử dụng các biểu tượng mua sắm này từ Vecteezy.

Chỉ cần truy cập trang biểu tượng và nhấp vào 'Chỉnh sửa & amp; Tải xuống nút '. Điều này sẽ mở biên tập viên ngay trong trình duyệt của bạn để bạn có thể tùy chỉnh và xây dựng dựa trên các đồ họa này. Đối với hướng dẫn này, chúng tôi sẽ chỉ cho bạn cách nab một số biểu tượng này và chuyển đổi chúng thành một đồ họa thanh tiến trình lớn hơn - sự lựa chọn hoàn hảo cho bất kỳ trang chủ thương mại điện tử nào.

Vì vậy, với những biểu tượng mua sắm mở trong trình soạn thảo Vecteezy, chúng ta có thể bắt đầu!

01. Chọn các biểu tượng

Click into the icon group and select one icon, then click Duplicate at the top — Nhấp vào nhóm biểu tượng và chọn một biểu tượng, sau đó nhấp vào Sao chép ở trên cùng

Nhấp đúp vào nhóm biểu tượng để chọn tất cả các biểu tượng (bạn có thể cần phải nhấp đúp hai lần). Tôi sẽ sử dụng ba biểu tượng cụ thể cho hướng dẫn này: túi mua sắm, thẻ tín dụng và hộp quà tặng.

Chọn túi mua sắm và nhấp vào Sao chép ở đầu trang. Điều này sẽ cung cấp cho bạn một bản sao của toàn bộ biểu tượng. Di chuyển điều này lên trên cùng và nhân đôi hai cái kia.

LƯU Ý: Hộp quà tặng không được nhóm hoàn toàn, vì vậy khi bạn nhấp để sao chép, bạn sẽ chỉ chọn một phần của biểu tượng. Để khắc phục điều này, chỉ cần kéo một hộp chọn trên toàn bộ biểu tượng quà tặng, sau đó ở đầu nhấp vào Chỉnh sửa- & GT; Nhóm. Bây giờ, bạn có thể sao chép toàn bộ biểu tượng hiện tại chỉ bằng một cú nhấp chuột.

Khi bạn có bản sao của cả ba biểu tượng, nhấp đúp vào bất cứ nơi nào trên khung vẽ trống. Điều này mang lại cho bạn bên ngoài nhóm các biểu tượng để bạn có thể chọn các đối tượng khác trên trang. Nếu bạn nhấp vào bất kỳ biểu tượng cũ nào, bạn sẽ chọn toàn bộ nhóm. Điều này là hoàn hảo, bởi vì bạn sẽ muốn kéo chúng xuống vải để chúng khuất tầm nhìn.

02. Xóa rác

Change the background opacity if you want it to be white instead of transparent — Thay đổi độ mờ nền nếu bạn muốn nó có màu trắng thay vì trong suốt

Nhấp đúp vào từng biểu tượng trùng lặp để truy cập các hình dạng riêng lẻ bên trong. Chúng tôi chỉ cần biểu tượng chính, vì vậy bạn nên chọn và xóa các hình nền vòng tròn đầy màu sắc và thả bóng.

Để làm điều này, chỉ cần phóng to rất gần và chọn vòng tròn nền. Sau đó nhấn XÓA, và nó sẽ biến mất.

Nếu toàn bộ biểu tượng biến mất - đừng hoảng sợ. Chỉ cần nhấp vào Hoàn tác gần trên cùng hoặc nhấn Ctrl / Cmd + Z và thử lại. Bạn có thể cần phải nhấp đúp để vào trong nhóm biểu tượng.

Cuối cùng, bạn nên có ba biểu tượng sạch sẽ sẵn sàng để sử dụng. Nếu bạn không thích nền trong suốt, bạn luôn có thể truy cập bảng nền trong menu bên trái (nút thứ ba) và tăng độ mờ đục xuống 100% cho nền trắng tinh khiết.

03. Thêm văn bản.

Add text labels under each icon with the same font settings — Thêm nhãn văn bản trong mỗi biểu tượng có cùng cài đặt phông chữ

Thanh tiến trình này sẽ là vô cùng đơn giản; Chỉ cần quảng cáo ba giai đoạn của một cửa hàng thương mại điện tử.

Để nhấn mạnh quá trình này, hãy thêm nhãn bên dưới mỗi biểu tượng. Trong thanh công cụ bên trái, tìm công cụ văn bản (nút thứ hai) sau đó nhấp vào bên dưới biểu tượng túi để thêm một khối văn bản. Thêm văn bản 'cửa hàng' và nhấn enter trên bàn phím của bạn.

Điều này tự động chọn văn bản để bạn có thể di chuyển nó xung quanh và tìm một vị trí tốt. Nhưng nếu bạn chọn lại công cụ văn bản, bạn có thể thay đổi gia đình phông chữ, màu sắc, kích thước, khoảng cách chữ cái và các tính năng khác.

Tôi đang sử dụng sans mở sans size 30 với khoảng cách chữ -1.50. Màu văn bản là # 525252.

Sao chép văn bản này hai lần và đặt các bản sao dưới các biểu tượng khác. Sử dụng văn bản 'thanh toán' trong biểu tượng thẻ tín dụng và 'nhận' trong hộp quà tặng.

Bạn nên sử dụng công cụ chọn để định vị lại các biểu tượng phía trên văn bản. Ngoài ra, không gian mỗi biểu tượng gần nhau để xa nhau nếu có thể.

04. Điều chỉnh đồ họa.

Shift+click to select the ribbon shapes and change the background colour — Shift + Bấm để chọn hình dạng ruy băng và thay đổi màu nền

Trước khi tạo thanh tiến trình, bạn có thể thay đổi bất kỳ màu nào bạn thích trong các biểu tượng.

Để thực hiện việc này, bấm đúp để nhập bất kỳ nhóm biểu tượng nào, sau đó chọn bất kỳ hình dạng nào bạn muốn thay đổi. Trong trường hợp này, tôi sẽ chỉnh sửa ruy băng hộp quà để thay đổi màu từ màu xanh sang màu xanh lá cây.

Khi bạn đang ở trong nhóm biểu tượng, hãy giữ Shift trong khi nhấp để chọn nhiều mục cùng một lúc. Tôi sẽ chọn hình chữ nhật ngang và dọc, cộng với hình dạng cung ở trên cùng.

Trong bảng chọn (biểu tượng đầu tiên trong menu bên trái) tìm các cài đặt điền. Bạn sẽ thấy màu mặc định là # 2E3192. Nhấp vào menu điền đó để truy cập một bánh xe màu thả xuống. Ở đây, bạn có thể kéo xung quanh để tìm màu bạn muốn hoặc nhập trực tiếp mã hex.

Nhập # 518531 và nhấn enter. Điều này sẽ lưu kết quả và cập nhật tất cả ba hình dạng cùng một lúc. Hãy chơi xung quanh với bất kỳ cài đặt màu nào khác mà bạn muốn thay đổi!

05. Bắt đầu thanh tiến trình

Click the top-left circle in the Elements panel to add a new circle to the canvas — Nhấp vào vòng tròn trên cùng bên trái trong bảng Các phần tử để thêm một vòng tròn mới vào khung vẽ

Để tạo một thanh tiến trình, bạn chỉ cần hai hình dạng: quầng thâm và hình chữ nhật. Rất may, cả hai đều có sẵn trong bảng Elements nằm ở dưới cùng của menu Công cụ.

Nhấp vào Bảng phần tử và chọn hình tròn, đó là mục đầu tiên trong danh sách. Nó sẽ tự động đặt một vòng tròn màu xám đen ở trung tâm của không gian làm việc của bạn.

Bạn có thể thay đổi kích thước vòng tròn bằng cách kéo các hộp vuông nhỏ màu trắng vào góc hoặc ranh giới chọn. Điều này hoạt động tốt, nhưng nó không chính xác như tính năng thay đổi kích thước trực tiếp.

Vì vậy, thay vào đó, hãy quay lại công cụ Chọn và đảm bảo vòng tròn mới của bạn được chọn. Ở đầu bảng điều khiển Chọn Công cụ, bạn sẽ thấy kích thước lựa chọn có giá trị chiều cao và chiều rộng.

Nhập 100 trong cả hai trường và kéo vòng tròn đầu tiên của bạn dưới biểu tượng đầu tiên.

06. Dấu trùng lặp

Resize the circle and duplicate twice, then move them under each shopping icon — Thay đổi kích thước vòng tròn và sao chép hai lần, sau đó di chuyển chúng dưới mỗi biểu tượng mua sắm

Với hình dạng vòng tròn của bạn được chọn, nhấp vào Sao lưu trong menu trên cùng. Bây giờ, định vị lại bản sao này để nó phù hợp với vòng tròn gốc của bạn. Cố gắng để có được nó ngay trên đầu vòng tròn đầu tiên để chúng trông giống như một hình dạng.

Bây giờ, nếu bạn giữ Shift và nhấp, bạn có thể kéo vòng tròn trùng lặp này theo một đường thẳng theo chiều ngang. Điều này cho phép bạn hoàn toàn căn chỉnh tất cả các vòng tròn của bạn với nhau theo một đường thẳng (hoặc đủ gần với một).

Làm điều này cho đến khi bạn có ba hình tròn khác nhau ở 100 x 100, mỗi hình được đặt bên dưới ba biểu tượng.

07. Thêm một số dòng kết nối

Select the rectangle shape and arrange it behind the three circles — Chọn hình chữ nhật và sắp xếp nó phía sau ba vòng tròn

Di chuyển trở lại bảng điều khiển các phần tử và tìm hình vuông. Nhấn vào đây để thêm một hình vuông vào khung vẽ.

Với hình dạng này được chọn, di chuyển trở lại công cụ Chọn và tìm bảng điều khiển kích thước chiều cao / chiều cao. Vì hình chữ nhật này sẽ trải dài toàn bộ chiều rộng của thanh tiến trình, chúng ta chỉ cần một hình dạng thực sự dài. Vì vậy, thay đổi chiều cao thành 10 và chiều rộng đến bất kỳ số nào bạn cần để kết nối tất cả các vòng tròn của bạn với nhau. Của tôi rộng 750.

Bây giờ, với hình chữ nhật ở vị trí này, hãy nhìn về phía dưới cùng của bảng chọn nơi nó nói sắp xếp & amp; Lật. Nhấp vào biểu tượng thứ hai ở hàng trên cùng, cho phép bạn di chuyển bất kỳ hình dạng được chọn đằng sau các hình dạng khác.

Lưu ý: Bạn có thể phải nhấp vào nút thấp hơn một vài lần để có được hình chữ nhật phía sau cả ba vòng tròn. Nhưng bây giờ, hình chữ nhật kết nối chỉ hiển thị giữa các hình vòng tròn, để chúng ta có thể thêm văn bản vào các vòng tròn sau này.

08. Tái tạo

Recolour all the shapes and include a small stroke on the three circles — Recolour tất cả các hình dạng và bao gồm một cú đánh nhỏ trên ba vòng tròn

Thanh tiến trình hiện tại trông hơi tối, vì vậy hãy thay đổi màu sắc một chút.

Nhấp để chọn hình chữ nhật dài và tìm các cài đặt điền trong bảng công cụ. Thay đổi màu thành # C5C5C5 và nhấn enter.

Bây giờ, nhấp vào bất cứ nơi nào ngoài vải để bỏ chọn hình chữ nhật. Chúng tôi cũng muốn thay đổi màu tròn, và chúng nên nhẹ hơn, sử dụng màu xám đen hơn như một màu viền.

Giữ ca, và nhấp vào từng vòng tròn. Điều chỉnh màu tô cho # f5f5f5, nhấn enter và sau đó nhấp vào biểu tượng X để đóng bảng tô màu chọn. Dưới đây, bạn sẽ tìm thấy các cài đặt đột quỵ. Thay đổi Đột quỵ điền vào # C5C5C5 và nhấn Enter.

Nhấp vào biểu tượng X để đóng bảng chọn màu này, sau đó thay đổi kích thước Stroke thành 6. Ở giai đoạn này, tôi cũng khuyên bạn nên nhóm tất cả các vòng tròn và hình chữ nhật lại với nhau bằng cách kéo hộp chọn và đi đến Chỉnh sửa & GT; Nhóm. Bây giờ, bạn có thể điều chỉnh vị trí của tất cả các hình dạng ngay lập tức một cách dễ dàng.

09. Thêm các bước tiến độ

Add a text label into the first circle and duplicate the text for all three shapes — Thêm nhãn văn bản vào vòng tròn đầu tiên và sao chép văn bản cho cả ba hình dạng

Hãy thêm một số số vào mỗi vòng tròn để hoàn tất thiết kế thanh tiến trình.

Nhấp vào công cụ văn bản và nhập số 1 vào vòng tròn đầu tiên. Tôi đang sử dụng Sans mở Extra-Bold, Size 45 với màu # C5C5C5 để khớp với đường viền. Kéo văn bản này để nó được định vị ở trung tâm của vòng tròn.

Nhân đôi phần tử văn bản và di chuyển nó vào vòng tròn thứ hai với văn bản '2'. Làm tương tự cho vòng tròn thứ ba với văn bản '3'.

10. Đánh dấu bước đầu tiên

Recolour the first circle blue so it appears like the active progress step — ReColour vòng tròn đầu tiên màu xanh để nó xuất hiện như bước tiến độ hoạt động

Như một liên lạc hoàn thiện, hãy làm nổi bật bước đầu tiên bằng cách sử dụng một phác thảo màu xanh nhạt hơn. Đầu tiên chọn số '1' bạn vừa tạo và thay đổi điền vào # 4976A3. Sau đó nhấp để chọn vòng tròn phía sau văn bản. Tìm các cài đặt đột quỵ và thay đổi màu Stroke thành # 4976A3. Điều này sẽ thêm một đường viền màu xanh đậm xung quanh vòng tròn. Với vòng tròn vẫn được chọn, nhấp vào cài đặt điền và thay đổi màu thành # e2ebfa.

Và đó là nó! Bây giờ bạn có thể xuất thứ này dưới dạng PNG / JPG bằng tính năng tải xuống ở góc trên bên phải. Bạn cũng có thể ẩn nền trắng để xuất khẩu này dưới dạng PNG trong suốt và thay đổi kích thước tài liệu tổng thể bằng bảng nền (nút thứ ba trong menu bên trái).

Hoặc nếu bạn muốn lưu điều này để thay đổi trong tương lai, chỉ cần truy cập vào Tệp & GT; Tiết kiệm sau. Bạn sẽ phải tạo một tài khoản Vecteezy miễn phí nhưng đó là một cách tuyệt vời để giữ cho công việc khó khăn của bạn được lưu để tham khảo trong tương lai.

Bài viết này ban đầu xuất hiện trong Tạp chí Net. Vấn đề 295. Mua nó đây .

Đọc thêm:

10 quy tắc vàng cho SVGS đáp ứng
Khám phá các tính năng mới thú vị trong SVG 2
Hoạt hình SVG SVG với GSAP

Thiết kế đồ họa SVG trong trình duyệt của bạn

01. Chọn các biểu tượng

02. Xóa rác

03. Thêm văn bản.

04. Điều chỉnh đồ họa.

05. Bắt đầu thanh tiến trình

06. Dấu trùng lặp

07. Thêm một số dòng kết nối

08. Tái tạo

09. Thêm các bước tiến độ

10. Đánh dấu bước đầu tiên

Cách - Các bài báo phổ biến nhất

Cách vẽ động vật: 15 mẹo hàng đầu

Xây dựng giao diện người dùng được kiểm soát bằng giọng nói

Cách chọn với Công cụ Lasso của Photoshop

Tạo biểu đồ màu đơn giản

Giới thiệu về Thử nghiệm Frontend

Tuổi một bức ảnh trong Photoshop CC

Kết cấu một droid k-2so bị mòn đích thực

Tạo hoàng hôn giật gân trong Photoshop

Thể loại