Tools 4 All
Trang chủ
Công cụ hình ảnh

Trình chỉnh sửa SVG trực tuyến

Trình chỉnh sửa vector nhanh, chuyên nghiệp ngay trong trình duyệt: vẽ bằng bút, sửa điểm neo, kết hợp hình, tạo kiểu bằng dải màu, tạo hoạt ảnh, rồi xuất SVG hoặc PNG đã tối ưu. Không có gì được tải lên.

Miễn phíKhông cần đăng kýChạy cục bộ — tệp không bao giờ rời khỏi thiết bị

Bắt đầu nhanh và phím tắt

Chọn một công cụ bên trái (hoặc nhấn phím của nó), kéo trên khung vẽ để vẽ, và dùng bảng Thiết kế bên phải để tạo kiểu cho vùng chọn. Nhấn ? bất cứ lúc nào để xem toàn bộ danh sách phím tắt.

  • Điều hướng: cuộn để di chuyển khung nhìn, Ctrl/⌘ + cuộn hoặc chụm để thu phóng, giữ Space và kéo để di chuyển. Shift+1 thu phóng vừa màn hình.
  • Chọn: nhấp, Shift-nhấp hoặc kéo khung chọn. Nhấp đúp vào nhóm để vào trong, vào đường dẫn để sửa điểm neo, hoặc vào văn bản để gõ.
  • Biến đổi: kéo tay nắm để co giãn (Shift giữ tỷ lệ, Alt co giãn từ tâm), kéo núm tròn để xoay, và Ctrl/⌘-kéo tay nắm cạnh để làm nghiêng.
  • Bút: nhấp để tạo góc, kéo để tạo đường cong, nhấp vào điểm neo đầu tiên để đóng đường dẫn, và nhấn Enter để kết thúc.
  • Tệp: thả SVG hoặc hình ảnh vào bất cứ đâu trong trình chỉnh sửa, dán mã SVG hoặc ảnh chụp màn hình, và tính năng tự động lưu giữ lại công việc của bạn.
Untitled
Guide, features and FAQ

Cách dùng trình chỉnh sửa SVG

  1. Mở hoặc bắt đầu vẽ

    Thả SVG, PNG hoặc JPEG lên khung vẽ, mở một tệp hoặc bắt đầu với trang trống. Không có gì được tải lên: trình chỉnh sửa chạy hoàn toàn trong trình duyệt.

  2. Vẽ và chỉnh sửa

    Dùng bút, bút chì và các công cụ hình, rồi tinh chỉnh đường dẫn theo từng điểm neo, kết hợp hình bằng phép toán boolean và tạo kiểu cho tô, nét và dải màu.

  3. Sắp xếp

    Nhóm, sắp xếp và khóa đối tượng trong bảng Lớp, căn chỉnh và phân bố chúng, tái sử dụng hình vẽ dưới dạng biểu tượng và sửa trực tiếp mã SVG.

  4. Xuất

    Tải xuống SVG, PNG, JPEG hoặc WebP đã tối ưu ở mọi tỷ lệ, hoặc sao chép kết quả dưới dạng mã SVG, data URI, component React hay SVG sẵn sàng cho Tailwind lấy màu từ CSS.

Trình chỉnh sửa SVG chuyên nghiệp chạy hoàn toàn trong trình duyệt

Trình chỉnh sửa SVG của Tools 4 All là ứng dụng đồ họa vector đầy đủ, mở ngay lập tức mà không cần tải xuống, tài khoản hay tải lên. Hãy dùng nó để vẽ logo, biểu tượng, minh họa, sơ đồ và tài nguyên giao diện, hoặc để dọn dẹp và tinh chỉnh các tệp SVG bạn đã có. Nó được xây dựng xoay quanh chính định dạng SVG, nên tệp bạn xuất ra chính là tài liệu bạn đã sửa: không định dạng độc quyền, không chuyển đổi ẩn.

Bạn có thể làm gì

  • Vẽ chính xác: công cụ bút với đường cong Bézier, bút chì vẽ tự do có làm mượt, hình chữ nhật với góc bo tròn, vát hoặc lõm độc lập, elip, đường thẳng, cọ blob, tẩy, dao và kéo, cùng các hình có thể chỉnh sửa: đa giác, ngôi sao, tam giác, chữ thập, khung, vòng, hình quạt, trăng lưỡi liềm, mũi tên, bong bóng thoại, bánh răng, trái tim, đám mây, bông hoa, hình xoắn ốc và văn bản.
  • Sửa đường dẫn theo từng điểm neo: di chuyển điểm neo và tay nắm, chuyển đổi giữa điểm góc, điểm mượt và điểm đối xứng, thêm và xóa điểm neo, nối và tách đường dẫn, uốn trực tiếp các đoạn, và bắt tay nắm theo tiếp tuyến.
  • Kết hợp hình: hợp, trừ, giao, loại trừ và chia, cùng với chuyển nét thành hình, dịch đường dẫn, đơn giản hóa và đảo chiều, tất cả được tính bằng engine hình học giữ nguyên đường cong của riêng chúng tôi trong một worker chạy nền.
  • Tạo kiểu cho mọi thứ: màu đơn sắc, dải màu tuyến tính và tỏa tròn với tay nắm trên khung vẽ, họa tiết, độ mờ đục riêng cho tô và nét, nét đứt, đầu nét, góc nối, đầu mũi tên, chế độ hòa trộn, hiệu ứng làm mờ và đổ bóng, đường cắt và mặt nạ.
  • Luôn ngăn nắp: bảng lớp với kéo để sắp xếp, đổi tên và lồng nhau, khóa và ẩn, nhóm và bỏ nhóm, căn chỉnh và phân bố theo vùng chọn, bảng vẽ hoặc một đối tượng chính, mẫu màu của tài liệu và biểu tượng tái sử dụng.
  • Làm việc như dân chuyên: đường gióng thông minh có nhãn khoảng cách và gợi ý giãn cách đều, bắt dính vào lưới, pixel, đường gióng thước, điểm neo và đường dẫn, các trường số X/Y/W/H/góc xoay, hoàn tác không giới hạn và phím tắt kiểu Figma và Illustrator.
  • Mã và xuất: chế độ xem mã SVG hai chiều, xuất SVG tối ưu kèm thông số dung lượng, PNG/JPEG/WebP ở mọi tỷ lệ, và sao chép dưới dạng SVG, data URI, React (JSX hoặc TSX), SVG cho Tailwind hoặc nền CSS.
  • Dành cho sản xuất web: màu của tài liệu với thay thế một cú nhấp và Chuyển thành currentColor, văn bản thành đường viền, chuyển nét thành hình, làm phẳng biến đổi và bỏ nhóm, vừa khung vẽ theo nội dung, và đơn giản hóa đường dẫn nhiều nhiễu.
  • Không gian làm việc thực thụ: nhiều bản vẽ trong các tab, mỗi bản có lịch sử hoàn tác riêng, menu ngắn gọn với menu con, bảng bên có thể thu gọn (Ctrl/⌘+B), và chỉnh sửa toàn màn hình trên cả điện thoại lẫn máy tính.

Vì sao một trình chỉnh sửa SVG gốc lại quan trọng

Nhiều công cụ thiết kế coi SVG là một định dạng xuất: bạn vẽ trong mô hình riêng của chúng, và SVG được tạo ra ở cuối. Cách đó ổn với biểu tượng đơn giản. Nhưng nó thất bại khi bạn cần sửa một tệp có sẵn, giữ các id mà CSS hoặc JavaScript của bạn phụ thuộc vào, hoặc hiểu vì sao một tệp lớn gấp mười lần mức cần thiết. Trình chỉnh sửa này làm việc trực tiếp trên tài liệu SVG. Nhóm vẫn là nhóm, dải màu vẫn là dải màu, và một <symbol> được dùng năm lần vẫn là một biểu tượng. Khi bạn đổi tên một lớp, bạn đang đặt id của phần tử.

Nhanh với tệp lớn

Tốc độ là mục tiêu thiết kế ngay từ dòng mã đầu tiên. Bản vẽ được trình duyệt hiển thị nguyên bản trong một lớp cô lập. Tay nắm vùng chọn, đường viền khi di chuột và đường gióng được vẽ trên một lớp phủ riêng, nên di chuyển chuột không bao giờ đụng đến tài liệu. Một chỉ mục không gian (R-tree) tìm thấy thứ nằm dưới con trỏ trong vài micro giây, kể cả với hàng chục nghìn hình. Với tài liệu nặng, việc di chuyển và thu phóng được giao cho bộ tổng hợp GPU, và vector được hiển thị sắc nét lại khi bạn dừng. Các tác vụ nặng như phép toán boolean, dịch đường dẫn và tối ưu SVG chạy trong một Web Worker, nên giao diện luôn phản hồi nhanh.

Công cụ chính xác cho công việc vector

Dùng công cụ bút để nhấp tạo góc và kéo tạo đường cong mượt. Giữ Shift để giữ góc 45° và Alt để tách tay nắm. Với công cụ điểm neo, bạn có thể kéo một đoạn để uốn nó, nhấp đúp để thêm điểm neo, hoặc chọn nhiều điểm neo và căn chỉnh chúng. Đường gióng thông minh cho thấy khi một đối tượng thẳng hàng với cạnh hoặc tâm của các đối tượng lân cận, và khi khoảng cách giữa các đối tượng bằng nhau. Bạn cũng có thể kéo đường gióng ra từ thước. Để có giá trị chính xác, hãy nhập X, Y, chiều rộng, chiều cao và góc xoay vào bảng Thiết kế. Các trường chấp nhận phép tính như 120+16 hoặc 200/3.

Xuất gọn gàng, dung lượng nhỏ

Các trình chỉnh sửa thường để lại siêu dữ liệu, định nghĩa không dùng, nhóm thừa và số có độ chính xác quá mức trong tệp chúng lưu. Hộp thoại xuất chạy một bộ tối ưu kiểu SVGO ở chế độ nền. Nó làm tròn số theo độ chính xác bạn chọn, chuyển dữ liệu đường dẫn sang dạng ngắn nhất, xóa siêu dữ liệu của trình chỉnh sửa và định nghĩa không dùng, rút gọn id và màu, và gộp các nhóm vô dụng. Mỗi phép tối ưu đều có thể tắt, và hộp thoại hiển thị dung lượng tệp trước và sau. Với đầu ra raster, chọn PNG, JPEG hoặc WebP ở 1×, 2×, 4× hoặc kích thước pixel chính xác, có hoặc không có nền trong suốt.

Xây dựng cho sản xuất web

SVG dùng trong trang web và ứng dụng cần những thứ khác với tác phẩm in. Danh sách Màu của tài liệu hiển thị mọi màu tệp sử dụng: đổi một màu thì mọi thứ dùng chung màu đó đổi theo, hoặc chuyển nó thành currentColor để biểu tượng React hay Tailwind lấy màu từ CSS. Tệp nhập vào thường có nhóm lồng nhau và biến đổi khiến đường dẫn khó sửa: Làm phẳng biến đổi & bỏ nhóm đưa chúng vào tọa độ chỉ trong một bước, và Vừa nội dung cắt viewBox vừa với hình vẽ, kể cả nét. Văn bản thành đường viền và Chuyển nét thành hình biến chữ và độ dày nét thành đường dẫn thuần trông giống nhau ở mọi nơi, còn Đơn giản hóa loại bỏ hàng trăm điểm khỏi hình vẽ tự do hoặc hình được dò.

Tệp của bạn luôn ở trên thiết bị của bạn

Không có máy chủ nào đằng sau trình chỉnh sửa. Mở một tệp là đọc nó từ ổ đĩa vào trang, và xuất là tạo tệp ngay trên thiết bị của bạn. Tự động lưu ghi vào bộ nhớ IndexedDB riêng của trình duyệt, nơi cũng giữ danh sách tệp gần đây. Nếu bạn lỡ đóng tab, tài liệu gần nhất sẽ được khôi phục vào lần truy cập sau.

Khám phá thêm công cụ hình ảnh

Câu hỏi thường gặp

Trình chỉnh sửa SVG này có thực sự miễn phí và riêng tư không?
Có. Công cụ miễn phí, không cần tài khoản và chạy 100% trong trình duyệt. Bản vẽ của bạn không bao giờ được tải lên: tệp được đọc cục bộ, tự động lưu vào bộ nhớ riêng của trình duyệt (IndexedDB) và tệp xuất được tạo trên thiết bị của bạn.
Công cụ có mở được tệp SVG từ Illustrator, Inkscape, Figma hay thư viện biểu tượng không?
Có. Trình chỉnh sửa làm việc trực tiếp trên tài liệu SVG, nên các tệp thực tế giữ nguyên cấu trúc, id, style, dải màu, biểu tượng, đường cắt và mặt nạ. Tệp lộn xộn hoặc không hợp lệ được sửa khi mở, script bị vô hiệu hóa khi bạn chỉnh sửa, và tệp .svgz được tự động giải nén.
Công cụ có bút và phép toán boolean như Illustrator không?
Có. Công cụ bút vẽ đường dẫn Bézier với điểm góc, điểm mượt và điểm đối xứng, và công cụ điểm neo cho phép bạn thêm, xóa, chuyển đổi, nối, tách và căn chỉnh điểm neo. Hợp, trừ, giao, loại trừ và chia hoạt động trên đường cong và giữ chúng là đường cong, và bạn còn có thể chuyển nét thành hình, dịch và đơn giản hóa đường dẫn.
Tôi có thể tạo hoạt ảnh cho SVG không?
Có. Mở không gian làm việc Hoạt ảnh, di chuyển đầu phát và thay đổi vị trí, góc xoay, tỷ lệ, độ mờ đục hoặc màu của một đối tượng: mỗi thay đổi trở thành một khung hình chính có đường cong easing, và các thuộc tính đã có hoạt ảnh sẽ tự động nhận khung hình chính mới. Hoạt ảnh được lưu dưới dạng SVG chuẩn (SMIL), nên phát được trên mọi trình duyệt mà không cần script.
Tôi có thể sửa trực tiếp mã SVG không?
Có. Bảng Mã hiển thị mã nguồn SVG trực tiếp với tô sáng cú pháp. Sửa mã sẽ cập nhật bản vẽ, và sửa bản vẽ sẽ cập nhật mã. Mọi thay đổi, từ bên nào cũng vậy, đều có thể hoàn tác.
Hỗ trợ những định dạng xuất nào?
SVG đã tối ưu, được tạo bởi bộ tối ưu kiểu SVGO tích hợp với thông số dung lượng trước/sau, cùng PNG, JPEG và WebP ở 1×, 2×, 4× hoặc kích thước tùy chỉnh, có tùy chọn nền trong suốt. Bạn cũng có thể sao chép vùng chọn dưới dạng mã SVG, data URI hoặc JSX cho React.
Tôi có mất công việc nếu trình duyệt bị đóng không?
Không. Tài liệu của bạn được tự động lưu vào bộ nhớ cục bộ của trình duyệt ngay sau mỗi thay đổi. Lần sau mở trình chỉnh sửa, phiên làm việc gần nhất sẽ được khôi phục, và các tài liệu cũ hơn vẫn có trong Tệp → Tệp gần đây.
Tôi có thể cho biểu tượng dùng currentColor cho React hoặc Tailwind không?
Có. Phần Màu của tài liệu liệt kê mọi màu trong bản vẽ (mỗi cách viết của một màu chỉ tính một lần). Nhấp một mẫu màu để chọn mọi thứ dùng nó và đổi đồng loạt ở mọi nơi, hoặc chọn Chuyển thành currentColor: khi đó biểu tượng lấy màu từ CSS, chẳng hạn một lớp text-… của Tailwind, mà vẫn giữ diện mạo trong trình chỉnh sửa. Sao chép nó dưới dạng component React hoặc SVG cho Tailwind từ menu Sửa hoặc menu ngữ cảnh.
Làm sao để chuyển văn bản thành đường dẫn hoặc nét thành hình tô?
Chọn văn bản và chọn Văn bản thành đường viền (Ctrl/⌘+Shift+O): mỗi ký tự trở thành một đường dẫn đúng nơi trình duyệt đã vẽ nó, kể cả văn bản trên đường dẫn và các đoạn có kiểu. Với nét, Chuyển nét thành hình biến nét thành hình tô khớp với độ rộng, đầu nét, góc nối và nét đứt, để logo giữ nguyên độ đậm ở mọi kích thước.
Công cụ có dọn dẹp được SVG nhập vào có biến đổi và nhóm lồng nhau không?
Có. Làm phẳng biến đổi & bỏ nhóm ghi mọi biến đổi vào tọa độ đường dẫn và giải tán các nhóm trong một bước hoàn tác, chỉ giữ lại những gì nếu bỏ sẽ làm thay đổi diện mạo (nhóm bị cắt, có mặt nạ hoặc được tham chiếu). Vừa nội dung cắt khung vẽ (viewBox, chiều rộng và chiều cao) vừa với hình vẽ, kể cả nét, có lề tùy chọn, và Đơn giản hóa giảm số điểm trên các đường dẫn nhiều nhiễu.
Tôi có thể làm việc với nhiều bản vẽ cùng lúc không?
Có. Mỗi bản vẽ mở trong một tab riêng phía trên khung vẽ, với lịch sử hoàn tác, vùng chọn và mức thu phóng riêng. Chuyển qua lại tùy ý; đóng tab vẫn giữ tệp trong Tệp → Tệp gần đây, và các tab đang mở sẽ trở lại vào lần truy cập sau.
Các lệnh đâu cả rồi? Menu ngắn quá.
Các lệnh liên quan nằm trong menu con (Sắp xếp, Biến đổi, Đường dẫn, Cắt & mặt nạ, Sao chép dạng, Căn chỉnh & phân bố…). Di chuột hoặc chạm vào chúng, hoặc dùng phím mũi tên. Mỗi lệnh đều có phím tắt: nhấn ? để xem toàn bộ danh sách. Trên máy tính, bạn có thể thu gọn bảng bên bằng Ctrl/⌘+B để khung vẽ rộng hơn.
Công cụ có dùng được trên điện thoại và máy tính bảng không?
Có. Trên màn hình nhỏ, các công cụ chuyển xuống thanh công cụ dưới cùng và các bảng mở dưới dạng trang trượt. Chụm để thu phóng, kéo bằng hai ngón để di chuyển, và nhấn giữ để mở menu ngữ cảnh.
Bản vẽ của tôi có thể lớn đến mức nào?
Trình chỉnh sửa được xây dựng cho tệp nặng. Nó dùng chỉ mục không gian để kiểm tra va chạm và chọn, một lớp phủ riêng cho tay nắm và đường gióng, di chuyển và thu phóng chỉ qua bộ tổng hợp với tài liệu lớn, và Web Worker cho hình học và tối ưu. Tài liệu có hàng chục nghìn phần tử vẫn phản hồi nhanh.
Tất cả công cụ hình ảnh →
Nén hình ảnh Giảm dung lượng tệp hình ảnh mà vẫn giữ chất lượng hiển thị. Chuyển đổi hình ảnh Chuyển đổi hình ảnh giữa PNG, JPEG, WebP, GIF, BMP, ICO, TIFF và nhiều định dạng khác. Đổi kích thước hình ảnh Đổi kích thước hình ảnh theo đúng kích thước mong muốn — hoàn hảo cho ảnh hộ chiếu. Hình ảnh sang PDF Gộp một hoặc nhiều hình ảnh thành một tài liệu PDF.