Nhập SVG vào Penpot: Đưa hình chỉnh sửa được vào thiết kế

Để nhập SVG vào Penpot, mở tệp thiết kế và kéo .svg lên khung vẽ, hoặc chọn công cụ ảnh trên thanh công cụ để chọn tệp. Lệnh Import files ở bảng điều khiển dành cho tệp dự án Penpot. Nếu muốn đặt biểu tượng, bắt đầu trong thiết kế. Hướng dẫn chèn lớp và tài liệu nhập dự án của Penpot mô tả hai cách riêng này.

Khi hình xuất hiện, kiểm tra đổi một vùng màu và sửa một đường bao được không. Biểu tượng có thể trông đúng mà vẫn khó sửa. Nếu nguồn đã là vector, sửa hoặc xuất lại khi cần. Chỉ đồ PNG hoặc JPG khi cần khôi phục hình từ pixel.

Kiểm tra bản nhập trước khi tái dùng

Giữ SVG gốc, nhập một biểu tượng đại diện và làm trên bản sao. Thử diện mạo, một màu tô, một đường cong và mọi chữ chỉnh sửa được. Xuất SVG riêng và so với nguồn trước khi lặp quy trình cho cả bộ.

Bắt đầu trong khung vẽ rồi kiểm tra lớp

Mở tệp Penpot nơi hình thuộc về. Chèn SVG đã lưu vào vùng trống để xem tách khỏi phần thiết kế còn lại. Nếu kéo thất bại, dùng hộp chọn tệp của công cụ ảnh để loại hành vi kéo thả khỏi chẩn đoán.

Chọn hình nhập và mở rộng mục của nó trong bảng Layers. Nhóm là tổ chức hữu ích, không phải bằng chứng SVG thành bitmap. Bạn chọn phần tử con từ bảng hoặc nhấp đúp vào nhóm; Penpot cũng hỗ trợ chọn sâu bằng Ctrl-click hoặc Command-click. Những điều khiển này có trong hướng dẫn chọn lớp.

Nội dung SVG khác có thể thành loại đối tượng khác. Trong công cụ nhập đã phát hành của Penpot, hình thông thường như đường dẫn, chữ nhật và elip có bộ xử lý hình theo định dạng của Penpot; phần tử khác có thể giữ thành SVG thô. Công cụ nhập cũng xử lý riêng phần tử ảnh. Vì thế chỉ tên tệp không xác lập mọi phần sửa thế nào. Xem công cụ nhập hình SVG.

Tránh tách nhóm hoặc làm phẳng mọi thứ ngay đầu. Trước hết xác định phần muốn đổi. Giữ nhóm nếu phần tử con đã cho điều khiển cần.

Thử một màu tô và một đường cong

Dùng biểu tượng nhỏ với phần tách rõ. Cây trong chậu là ví dụ hữu ích: chậu nên nhận màu khác mà không đổi lá, và một lá nên sửa được mà không làm méo cả cây.

Trên bản sao biểu tượng nhập:

1. Chọn lớp chậu và đổi màu tô thành màu tương phản. Kiểm tra chỉ vùng dự định đổi.
2. Chọn một đường dẫn lá. Nhấn Enter để sửa nút, di chuyển nhẹ một điểm rồi hoàn tác. Penpot mô tả trong hướng dẫn sửa nút.
3. So bản sao với bản nhập chưa sửa. Xác nhận hình bao gốc, khe nhỏ và độ dày viền còn nguyên sau hoàn tác.

Nếu chậu và lá đổi cùng nhau, kiểm tra lựa chọn và cấu trúc nguồn. Có thể đã chọn nhóm ngoài, hoặc nguồn kết hợp vài vùng thành một đường dẫn. Đổi màu thành công không chứng minh mọi đường bao là đường dẫn riêng theo định dạng của Penpot.

Nội dung SVG thô là khả năng khác. Penpot có bảng tùy chọn riêng cho nó, gồm điều khiển diện mạo cho phần tử được hỗ trợ. Vì vậy có điều khiển màu tô hoặc viền không bảo đảm sửa nút thông thường. Nếu phần không sửa theo nhu cầu được, đơn giản hóa hoặc vẽ lại phần đó trong trình chỉnh sửa nguồn rồi nhập bản mới. Khác biệt thấy trong mã tùy chọn SVG thô của Penpot.

Chẩn đoán triệu chứng trước khi đổi tệp

Dùng SVG không đổi làm tham chiếu. Mở trong trình duyệt và so kết xuất đó với bản nhập Penpot. Nếu đã sai trong trình duyệt, quay lại xuất nguồn trước khi sửa bản Penpot.

Viền mất và hình vô hình

Kiểm tra thiết lập màu tô và viền của lớp chọn trước khi xóa. Penpot cung cấp màu viền, độ đục, độ rộng, kiểu và khả năng nhìn thấy, cùng điều khiển đầu nét cho đường hở. Nét viền ngắn có thể trông rất khác với đầu nét khác, nên so hình thay vì mặc định đường thiếu. Điều khiển có sẵn mô tả trong Màu và đường viền.

Với đối tượng vô hình, cũng kiểm tra lớp ẩn và cắt. Nếu trình duyệt kết xuất nguồn đúng mà Penpot không, tách phần tử lỗi trong bản sao nguồn. Xuất lại mẫu đơn giản hơn và so lại. Điều đó cho tệp và triệu chứng cụ thể để điều tra thay vì đổi nhiều thiết lập cùng lúc.

Đừng xóa mọi style, mặt nạ hay định nghĩa chỉ vì giải pháp cũ gợi ý. Chúng có thể mang thông tin diện mạo. Nếu cấu trúc viền nguồn là vấn đề, theo chẩn đoán viền SVG bị mất sâu hơn và giữ bản gốc chỉnh sửa được trước khi mở rộng viền thành đường bao.

Chữ trông đúng nhưng không sửa được

Với nhãn nút, thử đổi một từ. Với logo, quyết định giữ dáng chữ có đủ không. Đây là yêu cầu khác nhau.

Chữ nhập có thể đã là đường bao hoặc vẫn là nội dung SVG thay vì lớp văn bản của Penpot. Đừng mặc định mọi phần tử chữ SVG nhập thành chữ Penpot chỉnh sửa được. Nếu nội dung cần đổi thường xuyên, tạo lại bằng công cụ văn bản Penpot, chọn phông dự định rồi so khoảng cách và xuống dòng. Hướng dẫn chữ của Penpot giải thích tạo lớp văn bản và sửa nội dung.

Khi chữ đổi dáng hoặc xuống dòng khác, dùng hướng dẫn xử lý phông SVG. Giữ bản có văn bản chỉnh sửa được dù bản bàn giao cần chữ thành đường bao.

Khi PerfectVector phù hợp quy trình

PerfectVector hữu ích khi có biểu tượng hoặc minh họa raster và cần đường bao chỉnh sửa được trong Penpot. Chuyển PNG hoặc JPG thành đường dẫn SVG, kiểm tra hình bao và vùng màu rồi nhập kết quả và chạy thử một màu tô, một đường cong. Kết quả đồ lại vẫn cần đánh giá theo hình định dùng.

Ảnh raster đặt trong SVG không có đường bao lá hoặc chậu chỉnh sửa được chỉ vì phần tử chứa đổi. Công cụ nhập Penpot có bộ xử lý ảnh riêng; không biến ảnh đó thành đối tượng đường dẫn của Penpot được xử lý ở nơi khác trong mã công cụ nhập.

Dùng bản xuất vector gốc khi có. Với ký hiệu giao diện đơn giản, vẽ bằng hình có sẵn của Penpot có thể cho hình học chủ động hơn đồ lại. Giữ ảnh chụp và hình nhiều texture thành ảnh khi pixel thuộc thiết kế. Giải thích vector hóa ảnh trình bày đồ lại khôi phục gì và đổi gì.

Xuất một mẫu trước khi dựng bộ

Giữ thiết kế làm việc trong Penpot và xuất SVG bàn giao riêng. Chọn biểu tượng hoặc board, thêm thiết lập xuất bằng nút cộng trong phần Export của bảng Design và chọn SVG. Penpot mô tả dưới Xuất lớp.

Mở tệp xuất trong trình duyệt. So màu, viền, diện mạo chữ, vùng cắt và khoảng trắng với tham chiếu. Nếu tệp phải quay lại trình chỉnh sửa thiết kế, nhập bản xuất vào vùng riêng và lặp phép thử sửa. Diện mạo đúng và cấu trúc chỉnh sửa hữu ích đều cần kiểm tra.

Trước khi thêm mẫu vào bộ lớn hơn, xác nhận:

• Vùng cần màu riêng chọn độc lập được.
• Đường bao định uốn có điều khiển chỉnh sửa dùng được.
• Nhãn chỉnh sửa được vẫn là văn bản trong thiết kế làm việc.
• Biểu tượng xuất có giới hạn và khoảng đệm dự định.
• Biểu tượng vẫn rõ ở kích thước giao diện thực.

Sau đó áp dụng cùng kiểm tra cho cả bộ. Quy trình biểu tượng PNG sang SVG cho bộ UI thêm lưới chung, kích thước thị giác và quy tắc tên khi từng bản nhập đã đúng.

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

Vì sao hộp Import files Penpot từ chối SVG? Hộp đó nhập tệp dự án Penpot. Để đặt hình SVG, mở tệp thiết kế và dùng công cụ ảnh hoặc kéo SVG lên khung.

Nhập SVG có làm mọi phần chỉnh sửa được không? Hình vector thông thường có thể thành đối tượng của Penpot, nhưng nội dung khác có thể giữ SVG thô hoặc ảnh. Thử thay đổi màu tô, đường cong hoặc chữ cụ thể cần trước tái dùng hình.

Tôi cần tách nhóm SVG nhập không? Chỉ khi đổi cấu trúc nhóm giúp nhiệm vụ. Thử chọn phần tử con trong Layers trước. Giữ nhóm hữu ích không ngăn sửa các phần tử con chọn được.

Tôi nên vector hóa SVG nhập sai không? Bắt đầu bằng sửa hoặc xuất lại hình vector hiện có. Vector hóa hữu ích khi hình có sẵn là raster và cần đường dẫn; không phải bước sửa chung cho SVG hiện có.

Nguồn tham khảo

1. Penpot: Lớp — Chèn hình, chọn phần tử con và sửa nút đường dẫn.
2. Penpot: Xuất và nhập tệp Penpot — Nhập dự án theo định dạng riêng của Penpot, riêng với chèn hình vào khung.
3. Penpot: Công cụ nhập hình SVG — Xử lý riêng hình của Penpot, ảnh và nội dung SVG thô trong phiên bản đã phát hành.
4. Penpot: Tùy chọn SVG thô — Điều khiển diện mạo tự nó không xác lập khả năng sửa đường dẫn theo định dạng của Penpot.
5. Penpot: Màu và đường viền — Điều khiển màu tô, viền và đầu nét dùng khi chẩn đoán.
6. Penpot: Chữ và kiểu chữ — Tạo lớp chữ của Penpot và sửa nội dung.
7. Penpot: Xuất lớp — Thêm thiết lập xuất SVG cho lớp hoặc board.

---

Nếu nguồn là PNG hoặc JPG và cần hình chỉnh sửa được, hãy chuẩn bị SVG bằng PerfectVector. Nhập vào Penpot, đổi một màu tô và thử một đường cong trước khi đưa hình vào bộ thiết kế.