Sửa thuộc tính d của SVG và xem kết quả ngay: lệnh vẽ, hệ tọa độ và cách nhúng
Công cụ đặt ô soạn thảo chuỗi lệnh vẽ cạnh khung xem trước, mọi thay đổi bạn gõ hiện lên hình ngay lập tức. Bạn chỉnh được cả khung nhìn, màu tô, màu nét và độ dày nét, có năm hình mẫu để bắt đầu, và nút chép trả về đoạn mã SVG hoàn chỉnh dán vào dự án là chạy.
Tính năng nổi bật
- Ô soạn thảo chuỗi lệnh vẽ của thuộc tính d, hình cập nhật ngay theo từng ký tự bạn gõ
- Năm hình mẫu dựng sẵn gồm trái tim, ngôi sao, mũi tên, dấu tích và dấu nhân
- Ô nhập khung nhìn để đổi hệ tọa độ và vùng hiển thị của hình
- Bảng chọn màu tô kèm ô nhập mã màu để gõ tay
- Ô nhập màu nét viền và ô nhập độ dày nét
- Khung xem trước cố định, hình tự co giãn theo khung nhìn bạn đặt
- Nút chép trả về đoạn mã SVG đầy đủ kèm khai báo không gian tên và các thuộc tính đang đặt
- Chạy hoàn toàn trên trình duyệt, không cần đăng ký và không lưu gì lại
Sửa một biểu tượng vector không đáng để mở cả phần mềm đồ họa
Phần lớn công việc thực tế với biểu tượng vector chỉ gồm ba việc nhỏ: đổi màu, thêm hoặc bỏ nét viền, và chỉnh khung nhìn cho hình cân đối trong khối chứa. Mở phần mềm đồ họa để làm ba việc đó tốn nhiều thời gian hơn chính công việc, chưa kể phải xuất lại tệp và đưa vào dự án. Với một ô soạn thảo chuỗi lệnh đặt cạnh khung xem trước, bạn thấy ngay hậu quả của mỗi thay đổi và chép được mã hoàn chỉnh trong vài giây. Công cụ này còn hữu ích ở một việc nữa mà phần mềm đồ họa không giúp được: học cách đọc chuỗi lệnh vẽ. Khi bạn đổi một con số rồi thấy hình biến dạng theo, mối liên hệ giữa con số và hình dạng trở nên rõ ràng hơn bất kỳ bài giải thích nào, và từ đó bạn tự sửa được những lỗi hình vỡ trong tệp do người khác gửi tới.
Lợi ích khi sử dụng
- Thấy ngay hậu quả của mỗi thay đổi mà không phải xuất tệp
- Đổi màu và thêm nét viền cho biểu tượng chỉ trong vài giây
- Học cách đọc chuỗi lệnh vẽ bằng cách thử trực tiếp
- Mã chép ra là SVG hoàn chỉnh, dán vào trang là hiển thị
- Không cần cài phần mềm đồ họa nặng chỉ để sửa một biểu tượng
Cách chỉnh sửa một hình vector
- 1Bấm một trong năm hình mẫu để có sẵn chuỗi lệnh và khung nhìn, hoặc dán chuỗi lệnh của bạn vào ô soạn thảo.
- 2Sửa chuỗi lệnh và nhìn khung bên phải, mỗi lần đổi một con số rồi quan sát để hiểu con số đó điều khiển gì.
- 3Đổi màu tô bằng bảng chọn màu hoặc gõ thẳng mã màu vào ô bên cạnh.
- 4Muốn có nét viền thì nhập màu vào ô nét và đặt độ dày lớn hơn không, vì mặc định nét đang tắt.
- 5Bấm nút chép để lấy đoạn mã SVG hoàn chỉnh, sau đó thêm chiều rộng và chiều cao khi dán vào dự án.
Các lệnh trong chuỗi vẽ và cách đọc một hình có sẵn
Chuỗi lệnh gồm các chữ cái xen với các con số tọa độ. Chữ M nghĩa là nhấc bút và di chuyển tới điểm mới. Chữ L vẽ một đoạn thẳng tới điểm chỉ định, còn chữ H và chữ V vẽ đoạn thẳng nằm ngang và thẳng đứng nên chỉ cần một con số. Chữ C vẽ đường cong bậc ba với hai điểm điều khiển, chữ S nối tiếp một đường cong bậc ba cho mượt và chỉ cần một điểm điều khiển. Chữ Q vẽ đường cong bậc hai với một điểm điều khiển, chữ T nối tiếp nó. Chữ A vẽ cung tròn hoặc cung elip và cần tới bảy tham số. Chữ Z khép hình lại bằng một đoạn thẳng về điểm xuất phát. Quy tắc quan trọng nhất: chữ hoa nghĩa là tọa độ tuyệt đối tính từ gốc khung nhìn, chữ thường nghĩa là tọa độ tương đối tính từ điểm hiện tại. Lấy hình ngôi sao mẫu làm ví dụ, nó mở đầu bằng lệnh nhấc bút tới điểm ngay đỉnh trên, rồi vẽ liên tiếp các đoạn thẳng xen kẽ giữa đỉnh nhọn và chỗ lõm, cuối cùng khép lại; toàn bộ ngôi sao chỉ dùng đoạn thẳng chứ không có đường cong nào.
Khung nhìn quyết định hệ tọa độ, không phải kích thước hiển thị
Ô khung nhìn nhận bốn con số theo thứ tự: hoành độ góc trên bên trái, tung độ góc trên bên trái, chiều rộng và chiều cao của vùng nhìn. Bốn số này định nghĩa một hệ tọa độ nội bộ, và mọi con số trong chuỗi lệnh vẽ đều được hiểu theo hệ đó. Giá trị quen thuộc nhất là khung bắt đầu từ gốc với chiều rộng và chiều cao đều bằng hai mươi bốn, vì đây là kích thước lưới mà nhiều bộ biểu tượng phổ biến sử dụng; các bộ khác dùng lưới mười sáu hoặc hai mươi. Điều cần nắm là khung nhìn không quy định hình sẽ hiển thị to bao nhiêu trên trang, nó chỉ quy định phần nào của hệ tọa độ được nhìn thấy và phần đó sẽ được co giãn cho vừa khung chứa. Nhờ vậy bạn có hai cách dùng rất tiện. Muốn phóng to một chi tiết, hãy thu nhỏ chiều rộng và chiều cao rồi dịch góc trên bên trái tới vùng cần xem. Muốn thêm khoảng lề quanh hình, hãy tăng chiều rộng và chiều cao rồi lùi góc trên bên trái ra một chút, chẳng hạn về giá trị âm.
Vì sao nét viền không hiện, hoặc hiện nhưng bị cắt mất một nửa
Ô màu nét để mặc định là giá trị tắt, nên dù bạn đặt độ dày bao nhiêu cũng không thấy gì. Phải nhập một màu vào ô đó, bằng mã màu hoặc bằng tên màu tiếng Anh, rồi mới đặt độ dày lớn hơn không. Vấn đề thứ hai tinh vi hơn: độ dày nét tính theo đơn vị của hệ tọa độ nội bộ chứ không phải theo điểm ảnh màn hình. Với khung nhìn hai mươi bốn đơn vị mà hình được hiển thị ở bề ngang một trăm hai mươi tám điểm ảnh, mỗi đơn vị tương đương hơn năm điểm ảnh, nên một nét dày một đơn vị trông đã khá đậm. Vấn đề thứ ba là nét vẽ được đặt cân giữa đường biên, tức một nửa bề dày nằm phía trong và một nửa nằm phía ngoài. Với các hình mẫu vốn được vẽ chạm sát mép khung nhìn, nửa ngoài đó rơi ra ngoài vùng nhìn và bị cắt mất, khiến viền trông mỏng đi ở rìa hoặc đứt quãng. Cách chữa là nới rộng khung nhìn ra mỗi phía một chút, hoặc giảm độ dày nét xuống.
Mã chép ra trông như thế nào và cần thêm gì khi nhúng
Nút chép trả về một thẻ SVG duy nhất, gồm khai báo không gian tên, khung nhìn, màu tô, màu nét và độ dày nét đang đặt, bên trong là một thẻ đường vẽ mang chuỗi lệnh của bạn. Điều cần biết là mã này không có chiều rộng và chiều cao, nên khi dán thẳng vào trang, hình sẽ lấy kích thước mặc định hoặc lấp đầy khối chứa tùy ngữ cảnh. Hãy chủ động thêm hai thuộc tính kích thước, hoặc đặt kích thước bằng CSS, để tránh hiện tượng bố cục nhảy khi trang tải. Một mẹo rất đáng dùng khi nhúng biểu tượng vào giao diện: thay giá trị màu tô bằng từ khóa lấy màu chữ hiện hành, khi đó biểu tượng tự đổi màu theo màu chữ của khối chứa và bạn không phải sinh nhiều bản cho các trạng thái khác nhau. Công cụ không tự sinh giá trị đó nhưng bạn sửa tay trong mã chép ra là được. Ngoài ra hai thuộc tính quy định kiểu đầu nét và kiểu góc nối nét cũng không có ở đây; nếu hình của bạn là dạng nét vẽ, hãy thêm chúng để các đầu nét bo tròn thay vì cắt vuông.
Công cụ dừng ở đâu và khi nào cần phần mềm vector thật
Đây là trình soạn thảo chữ có kèm khung xem trước, không phải công cụ vẽ. Bạn không kéo được điểm neo bằng chuột, không thấy tay cầm của đường cong, không vẽ hình mới bằng thao tác kéo thả, không hợp nhất hay trừ hai hình cho nhau, không chuyển chữ thành đường, và không có nút hoàn tác. Chỉ có một đường vẽ duy nhất, nên nếu chuỗi lệnh của bạn thuộc một hình có nhiều đường hoặc có nhóm và phép biến đổi, phần còn lại sẽ không hiện. Vì vậy cách làm việc hợp lý là vẽ hình ở phần mềm vector rồi mang chuỗi lệnh sang đây để tinh chỉnh, đổi màu và kiểm tra nhanh. Hai việc nữa nên làm ở nơi khác: làm tròn tọa độ để giảm dung lượng thì cần công cụ tối ưu SVG chuyên dụng, còn đọc hiểu một hình phức tạp thì nên đưa vào trình soạn thảo có tô màu cú pháp và tự xuống dòng theo từng lệnh, vì ô soạn thảo ở đây hiển thị chuỗi lệnh thành một khối liền rất khó dò.
Câu hỏi thường gặp (FAQ)
Chữ hoa và chữ thường trong chuỗi lệnh khác nhau thế nào?
Chữ hoa dùng tọa độ tuyệt đối tính từ gốc của khung nhìn, chữ thường dùng tọa độ tương đối tính từ điểm hiện tại. Cùng một hình có thể viết theo cả hai cách. Bản dùng tọa độ tương đối thường ngắn hơn nên hay gặp trong tệp đã tối ưu, nhưng bản tuyệt đối dễ đọc và dễ sửa tay hơn nhiều.
Vì sao đặt độ dày nét mà không thấy viền đâu?
Vì ô màu nét đang để giá trị tắt. Bạn phải nhập một màu vào ô đó, bằng mã màu hoặc tên màu tiếng Anh, rồi mới đặt độ dày lớn hơn không. Nếu vẫn không thấy, hãy kiểm tra màu nét có trùng với màu nền của khung xem trước hay không.
Viền của tôi bị cắt mất ở rìa hình, sửa thế nào?
Vì nét vẽ được đặt cân giữa đường biên, một nửa bề dày nằm ngoài đường, và với hình vẽ chạm sát mép khung nhìn thì phần đó rơi ra ngoài vùng nhìn. Hãy nới khung nhìn ra mỗi phía một chút bằng cách lùi hai số đầu về giá trị âm và tăng hai số sau tương ứng.
Bốn con số trong ô khung nhìn nghĩa là gì?
Lần lượt là hoành độ và tung độ của góc trên bên trái vùng nhìn, rồi chiều rộng và chiều cao của vùng đó. Chúng định nghĩa hệ tọa độ nội bộ mà mọi con số trong chuỗi lệnh vẽ tuân theo, chứ không quyết định hình hiển thị to bao nhiêu trên trang.
Làm sao phóng to một chi tiết nhỏ của hình?
Thu nhỏ hai con số chiều rộng và chiều cao trong khung nhìn, đồng thời dịch hai con số đầu tới vùng bạn muốn xem. Ví dụ từ một khung hai mươi bốn đơn vị, đổi thành khung sáu đơn vị đặt tại vị trí cần soi sẽ phóng hình lên bốn lần trong cùng khung xem trước.
Mã chép ra dán vào trang mà hình quá to hoặc quá nhỏ?
Vì mã không kèm chiều rộng và chiều cao, nên hình lấy kích thước mặc định hoặc lấp đầy khối chứa tùy ngữ cảnh. Hãy tự thêm hai thuộc tính kích thước vào thẻ, hoặc đặt kích thước bằng CSS. Làm vậy cũng tránh được hiện tượng bố cục nhảy khi trang đang tải.
Làm sao để biểu tượng tự đổi màu theo màu chữ?
Trong mã chép ra, thay giá trị màu tô bằng từ khóa lấy màu chữ hiện hành. Khi đó biểu tượng thừa hưởng màu chữ của khối chứa, nên bạn chỉ cần một bản duy nhất cho mọi trạng thái như bình thường, rê chuột và đang chọn. Công cụ không tự sinh giá trị này, bạn sửa tay là được.
Dán chuỗi lệnh của tôi vào mà không thấy hình?
Kiểm tra ba thứ. Một là khung nhìn có khớp với khoảng tọa độ trong chuỗi lệnh không, hình vẽ ở tọa độ hàng trăm sẽ nằm ngoài khung hai mươi bốn đơn vị. Hai là chuỗi lệnh có bắt đầu bằng lệnh nhấc bút hay không. Ba là màu tô có trùng màu nền khung xem trước không.
Có kéo thả điểm neo để chỉnh hình được không?
Không. Đây là trình soạn thảo chữ có kèm khung xem trước, mọi thay đổi phải thực hiện bằng cách sửa con số trong chuỗi lệnh. Muốn chỉnh bằng thao tác kéo thả trực quan, hãy dùng phần mềm vector rồi mang chuỗi lệnh sang đây để tinh chỉnh và đổi màu.
Hình của tôi có nhiều mảnh mà chỉ hiện một mảnh?
Vì công cụ chỉ dựng một đường vẽ duy nhất. Nếu tệp gốc gồm nhiều thẻ đường vẽ, nhiều nhóm hoặc có phép biến đổi kèm theo, phần còn lại sẽ không hiện. Trường hợp đó bạn cần một trình soạn thảo SVG đầy đủ chứ không phải công cụ chỉnh một đường vẽ như ở đây.
Bấm nhầm hình mẫu thì lấy lại chuỗi lệnh cũ thế nào?
Không có nút hoàn tác nên chuỗi lệnh cũ mất luôn. Thói quen an toàn là chép chuỗi lệnh gốc ra một nơi khác trước khi thử nghiệm, nhất là khi bạn đang sửa một hình do người khác gửi tới mà không có bản dự phòng.
Công cụ có làm gọn chuỗi lệnh giúp không?
Không. Nó không làm tròn tọa độ, không gộp lệnh và không đổi giữa tọa độ tuyệt đối với tương đối. Với hình phức tạp có tọa độ ghi tới sáu chữ số sau dấu phẩy, hãy dùng công cụ tối ưu SVG chuyên dụng, phần giảm dung lượng ở đó lớn hơn hẳn việc bỏ khoảng trắng.
Từ khóa liên quan
- chỉnh sửa svg path online
- thuộc tính d trong svg
- lệnh vẽ svg path
- viewbox svg là gì
- đổi màu icon svg
- svg path editor
- đường cong bezier trong svg
- tọa độ tuyệt đối và tương đối svg
- stroke width svg
- nét viền svg bị cắt
- nhúng svg vào html
- fill currentcolor svg
- icon 24x24 chuẩn
- sửa icon vector không cần illustrator
- xem trước svg trực tiếp
- copy mã svg
- svg không hiển thị đúng kích thước
- tối ưu path svg
- vẽ hình bằng svg
- công cụ svg miễn phí
