SVG Path Editor

Chỉnh sửa và preview SVG path

Path Editor

Path (d attribute)

ViewBox

Fill

Stroke

Stroke Width

Preview

SVG Path Editor Online Miễn Phí - Chỉnh Sửa & Preview SVG Realtime

Công cụ chỉnh sửa SVG path online miễn phí dành cho designer và developer. Hỗ trợ edit trực tiếp path data (d attribute), tùy chỉnh viewBox, fill color, stroke color và stroke width. Preview SVG realtime khi chỉnh sửa, copy SVG code hoàn chỉnh với một click. Tích hợp sẵn preset icons phổ biến như heart, star, arrow, check, close để bắt đầu nhanh. Công cụ hoàn hảo để tinh chỉnh SVG icons, thay đổi màu sắc, hoặc học cách SVG path hoạt động. Không cần cài đặt Illustrator hay Figma, chỉnh sửa SVG ngay trên trình duyệt.

Tính năng nổi bật

Edit SVG path (d attribute) trực tiếp

Preview SVG realtime khi chỉnh sửa

Tùy chỉnh viewBox linh hoạt

Color picker cho fill và stroke

Điều chỉnh stroke width

Preset icons: heart, star, arrow, check, close

Copy SVG code hoàn chỉnh

Syntax highlighting cho path data

Giao diện chia đôi: editor và preview

Hoạt động offline sau khi load

Tại Sao Cần SVG Path Editor?

SVG là định dạng vector phổ biến nhất trên web nhờ khả năng scale không giới hạn và file size nhỏ. Tuy nhiên, việc chỉnh sửa SVG thường đòi hỏi phần mềm đồ họa như Illustrator hoặc Figma. SVG Path Editor giúp bạn thực hiện các chỉnh sửa nhanh như thay đổi màu sắc, điều chỉnh stroke, hoặc tinh chỉnh path data mà không cần mở phần mềm nặng. Đặc biệt hữu ích khi bạn cần customize icon từ thư viện, debug SVG code, hoặc học cách SVG path commands hoạt động.

Lợi ích khi sử dụng

•Chỉnh sửa SVG nhanh chóng không cần phần mềm đồ họa
•Preview realtime giúp thấy kết quả ngay lập tức
•Copy SVG code sẵn sàng sử dụng trong project
•Học và hiểu cách SVG path hoạt động
•Tiết kiệm thời gian customize icons
•Hoàn toàn miễn phí, không giới hạn sử dụng

Hướng Dẫn Sử Dụng SVG Path Editor

1Chọn preset icon có sẵn (heart, star, arrow...) hoặc paste path data của bạn
2Chỉnh sửa path data trong textarea nếu cần
3Điều chỉnh viewBox để thay đổi tỷ lệ hiển thị
4Chọn màu fill bằng color picker hoặc nhập mã HEX
5Thiết lập stroke color và stroke width nếu muốn có viền
6Xem preview SVG realtime ở khung bên phải
7Nhấn Copy SVG để lấy code hoàn chỉnh

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

Tôi có thể vẽ SVG path mới từ đầu không?

Công cụ này tập trung vào việc edit và preview SVG path có sẵn. Để vẽ path mới từ đầu, bạn nên sử dụng Figma, Adobe Illustrator, hoặc Inkscape - những công cụ có giao diện vẽ vector trực quan. Sau đó export path và paste vào đây để tinh chỉnh.

SVG path commands có những loại nào?

Các commands phổ biến: M (moveto), L (lineto), H (horizontal line), V (vertical line), C (cubic bezier curve), S (smooth curve), Q (quadratic bezier), A (arc), Z (closepath). Chữ hoa là tọa độ tuyệt đối, chữ thường là tương đối.

Làm sao để SVG hiển thị đúng kích thước?

ViewBox quyết định hệ tọa độ nội bộ của SVG. Ví dụ viewBox='0 0 24 24' nghĩa là SVG có kích thước logic 24x24. Khi đặt width/height trong CSS, SVG sẽ scale để fit mà không bị méo.

Tại sao stroke không hiển thị?

Stroke mặc định là 'none'. Để hiển thị stroke, nhập màu (ví dụ: #000000 hoặc black) và đặt stroke width > 0. Lưu ý stroke có thể bị cắt nếu nằm ngoài viewBox.

Từ khóa liên quan

svg path editorchỉnh sửa svg onlinesvg editor onlineedit svg pathsvg generatorsvg icon editorsvg code editorsvg preview toolcustomize svg iconssvg path commands

Hợp tác ngay với Tấn Phát Digital

Chúng tôi không chỉ thiết kế website, mà còn giúp doanh nghiệp xây dựng thương hiệu số mạnh mẽ. Cung cấp dịch vụ thiết kế website trọn gói từ thiết kế đến tối ưu SEO. Hãy liên hệ ngay với Tấn Phát Digital để cùng tạo nên những giải pháp công nghệ đột phá, hiệu quả và bền vững cho doanh nghiệp của bạn tại Hồ Chí Minh.