Cách nhập và chỉnh sửa các tệp SVG của bạn trong Figma, Canva hoặc WordPress?

Bạn đã có SVG. Và bây giờ thì sao?

Hầu hết các trình chuyển đổi đều dừng lại ở nút Tải xuống. Nhưng tệp này sẽ vô dụng nếu nó chỉ nằm trong thư mục Tải xuống. Nhà thiết kế mở nó trong Figma để dán màu thương hiệu. Người quản lý cộng đồng thả nó vào Canva để tạo bài đăng. Người tích hợp web đặt nó vào WordPress cho logo ở tiêu đề. Chính bước tiếp theo này chứng minh rằng PixelToPath phù hợp với quy trình làm việc thực sự, không chỉ là bản demo.

Một SVG PixelToPath không phải là hình ảnh tĩnh. Nó là một tập hợp các đường đi: mỗi hình có một phần tô màu, có thể có viền. Thay đổi màu xanh của logo thành màu đỏ tía, cô lập biểu tượng, phóng to cho story 1080x1920: tất cả những điều này đều có thể thực hiện trong công cụ bạn đang dùng, mà không cần qua Illustrator.

Tại sao Figma, Canva và WordPress yêu thích định dạng này

PNG và JPG, một khi được nhập, là các bitmap (ảnh điểm). Việc đổi màu một logo PNG trong Figma giống như đặt một lớp đè lên trên, chứ không phải thay đổi màu của đường vẽ. Canva sẽ không hiển thị các ô màu. WordPress sẽ tải một tệp nặng, bị mờ trên màn hình Retina. SVG giải quyết cả ba vấn đề cùng lúc.

Cụ thể, một SVG từ PixelToPath mang đến cho bạn:

• Đường vẽ có thể chỉnh sửa: một màu cho mỗi hình, có thể sửa trong Figma (Phần tô màu) hoặc Canva (ô màu)
• Tệp nhẹ, thấp hơn nhiều so với giới hạn 3MB của Canva và tải trên trang web WordPress nhanh hơn nhiều so với PNG @2x
• Độ nét như nhau trên favicon, banner LinkedIn hay kakemono: chỉ cần một tệp duy nhất
• Một sản phẩm mà bạn có thể gửi cho khách hàng: họ sẽ mở nó trong công cụ họ có, chứ không phải trong Creative Cloud

Figma: nhập SVG và thay đổi màu sắc

Figma nhập SVG dưới dạng một nhóm các vector, chứ không phải như một bức ảnh. Đây là toàn bộ vấn đề: mỗi hình khối vẫn là một lớp (layer) mà bạn có thể đổi màu, di chuyển hoặc ẩn.

1. Tải .svg từ PixelToPath và mở tệp Figma của bạn.
2. Kéo tệp từ trình duyệt tệp trực tiếp lên bảng vẽ (canvas). Cách khác: Tệp → Nhập, hoặc nhấn Ctrl+Shift+K (Cmd+Shift+K trên Mac) để đặt SVG.
3. Lớp xuất hiện dưới dạng một nhóm. Nhấp đúp để vào trong đó, hoặc nhấp chuột phải → Bỏ nhóm (Shift+Ctrl+G / Shift+Cmd+G) nếu bạn muốn thao tác từng hình một.
4. Chọn một đường dẫn (tracé). Trong bảng bên phải, ở phần Ráp/Tô (Fill), nhấp vào ô màu: hex, bảng màu, ống hút màu. Toàn bộ hình khối sẽ thay đổi, viền vẫn sắc nét.
5. Đối với một logo đơn sắc, chọn tất cả các hình dạng trong nhóm và áp dụng cùng một màu. Sau đó xuất ở định dạng SVG, PNG hoặc PDF từ phần Xuất nếu thành phẩm không còn là định dạng vector nữa.

Nếu Figma hiển thị hình ảnh phẳng thay vì các lớp vector, có nghĩa là tệp đã nhúng một bitmap (PNG được đóng gói). Đây không phải là trường hợp với bản xuất của PixelToPath ở thiết lập sẵn Đen & Trắng hoặc Poster. Hãy chuyển đổi lại ảnh gốc bằng một trong hai chế độ này, không dùng chế độ Ảnh (Photo).

Canva: tải SVG và đổi màu

Canva chấp nhận SVG cả ở bản Miễn phí (Free) và Pro. Việc đổi màu hoạt động tốt khi tệp đơn giản: màu bệt, ít điểm neo (node), không có hiệu ứng chuyển màu (gradient). Đây chính xác là những gì PixelToPath tạo ra với thiết lập Poster hoặc Đen & Trắng.

1. Trong Canva, mở một thiết kế. Ở bảng bên trái → Tải lên → Tải tệp lên. Chọn .svg của bạn (dưới 3 MB; bản xuất từ PixelToPath thường thấp hơn mức này rất nhiều).
2. Khi tệp nằm trong danh sách tải lên, hãy kéo thả nó vào trang. Định cỡ lại nó ở các điểm neo: vector vẫn sắc nét, kể cả trong định dạng story hay A4.
3. Nhấp vào SVG. Trên thanh công cụ, các ô màu sẽ xuất hiện, mỗi ô đại diện cho một sắc độ của tệp. Nhấp vào ô màu, chọn màu mới: Canva sẽ áp dụng màu đó cho tất cả các hình thuộc sắc độ đó.
4. Nếu không có ô màu nào xuất hiện, nghĩa là SVG quá phức tạp (có gradient, quá nhiều màu, đường vẽ dạng Ảnh). Hãy quay lại PixelToPath, chuyển sang dạng Poster hoặc Đen & Trắng, xuất lại, và nhập lại.

Canva khuyến nghị sử dụng cấu hình SVG 1.1, các hình cùng màu được nhóm lại và không có kết cấu (texture). Các cài đặt sẵn cho logo của PixelToPath đã tuân thủ những ràng buộc này. Bạn không cần dùng Illustrator để "chuẩn bị" tệp.

WordPress: cho phép tải lên SVG mà không có lỗ hổng

WordPress theo mặc định từ chối SVG, và đây không phải là chuyện tự ý. Một SVG chính là XML: nó có thể chứa JavaScript, thực thể bên ngoài, mã độc XSS. Một vị khách, hoặc một tài khoản Biên tập viên bị xâm phạm, khi tải lên một SVG độc hại có thể thực thi mã trong bảng quản trị. Đó là lý do nó bị chặn. Chúng ta cần cho phép định dạng và làm sạch tệp.

Đừng chỉ thêm image/svg+xml vào functions.php. Nếu không làm sạch tệp, bạn sẽ mở ra một lỗ hổng. Phương pháp an toàn: sử dụng một plugin được duy trì tốt, nó sẽ dọn sạch các tập lệnh, các sự kiện onload và các thực thể XML. Safe SVG (10up) là một ví dụ với hơn một triệu lượt cài đặt.

1. Trong quản trị WordPress: Plugin → Cài mới. Tìm kiếm Safe SVG (nhà phát triển: 10up). Cài đặt và kích hoạt.
2. Đi tới Cài đặt → Phương tiện. Giới hạn tính năng tải lên SVG cho quản trị viên (hoặc các vai trò đáng tin cậy). Không mở định dạng này cho mọi tài khoản Tác giả nếu trang web có nhiều người đóng góp.
3. Phương tiện → Thêm mới. Thả tệp .svg từ PixelToPath vào. Plugin sẽ dọn sạch tệp trong quá trình nhập và hiển thị bản xem trước trong thư viện (điều mà WordPress không tự động làm).
4. Trong một bài viết hoặc trang, chèn một khối Hình ảnh và chọn SVG. Để đặt làm logo header, hãy sử dụng Tùy biến / Nhận dạng trang, hoặc một khối Hình ảnh trong mẫu theme (trình chỉnh sửa trang).
5. Một cách cho nhà phát triển: không thông qua thư viện. Đặt tệp vào theme (assets/logo.svg) và tham chiếu nó trong template, hoặc chèn trực tiếp (inline) để thiết kế qua CSS. Không tải lên, nên không có rủi ro bảo mật ở thư viện.

Safe SVG cũng có thể hạn chế quyền tải lên. Giữ plugin này luôn được cập nhật: việc làm sạch tệp mới là điểm kiểm soát thực sự, chứ không phải ô đánh dấu "cho phép SVG" đơn thuần.

Nên dán SVG PixelToPath nào vào những công cụ này?

Trình chỉnh sửa sẽ nhận những gì bạn cung cấp. Việc cài đặt sai có thể gặp rắc rối khi nhập tệp: quá nhiều hình khối, màu sắc không thể lấy, hoặc tệp bị từ chối.

• Logo, biểu tượng, chữ nghệ thuật: Đen & Trắng hoặc Poster. Chúng là màu khối bệt, Figma và Canva có thể đổi màu chỉ bằng một cú nhấp.
• Tránh dùng Ảnh (Photo) nếu bạn định đổi màu. Chế độ này tạo ra vô số hình khối nhỏ; Canva thường sẽ không hiển thị các ô màu hữu ích nào.
• Cắt xén ảnh gốc trước khi chuyển đổi: bớt phông nền, bớt số điểm neo (node), SVG sẽ gọn nhẹ hơn trên lớp của Figma.
• Dùng biến thể theo nhu cầu: SVG đơn sắc cho Figma (thương hiệu), SVG màu cho Canva (đăng bài), cùng một tệp đó đã dọn sạch cho WordPress (tiêu đề trang).

Quy trình này làm thay đổi công việc hàng ngày ở điểm nào

Ngay khi có SVG trong công cụ, bạn có thể ngừng chuyển đổi lại cho mỗi biến thể:

• Bản thiết kế Figma: Tệp PNG của khách hàng trở thành một phần tử (component) mà bạn có thể đổi màu (màu chính, đảo ngược, đơn sắc) mà không cần vẽ lại
• Bài đăng Canva: một SVG duy nhất, sáu màu chiến dịch, tạo ảnh story và băng chuyền luôn sắc nét
• Logo WordPress: một tệp ở tiêu đề, hiển thị rõ nét trên thiết bị di động và Retina, có dung lượng nhẹ hơn PNG thông thường
• Kết quả cho người làm tự do: bạn trả về SVG cùng với hướng dẫn sử dụng cho Figma / Canva. Khách hàng sẽ không còn bị kẹt
• Các biểu tượng giao diện: nhập hàng loạt vào Figma, căn chỉnh trên lưới 24px, và xuất toàn bộ gói (set)

Hãy giữ định dạng PNG cho những bức ảnh. Còn với bất cứ thứ gì cần đổi màu hay giữ được độ nét, sự kết hợp giữa PixelToPath + Figma / Canva / WordPress là đủ.