Biểu tượng SVG Shopify tùy chỉnh: Chuẩn bị biểu trưng thương hiệu sạch

Biểu tượng SVG tùy chỉnh có thể được đưa vào giao diện Shopify theo hai cách thực tế: tải tệp lên làm tài nguyên giao diện và hiển thị bằng thẻ ảnh, hoặc đặt mã của nó trong snippet Liquid rồi kết xuất snippet ở nơi cần biểu tượng. Cách đầu đơn giản hơn cho biểu trưng có màu cố định. Cách thứ hai cho phép kiểm soát trực tiếp đường dẫn và màu. Các điều khiển xuất hiện trong trình chỉnh sửa giao diện phụ thuộc vào giao diện của bạn, nên hãy kiểm tra những khối biểu tượng sẵn có trước khi sửa mã.

Nếu nguồn duy nhất là PNG, hãy tạo SVG dựa trên đường dẫn trước. Chỉ đổi tên tệp không biến pixel thành hình. SVG gốc sạch là lựa chọn tốt hơn khi bạn có; ảnh chụp chi tiết thường nên giữ ở dạng ảnh. Các bước dưới đưa một hình biểu trưng thương hiệu nhỏ từ chuẩn bị tệp đến xem trước giao diện, không giả định tài khoản người bán hay phiên bản giao diện cụ thể.

Chọn nơi đặt biểu tượng

Giao diện Shopify có thư mục assets cho tệp và thư mục snippets cho mã Liquid tái sử dụng. Shopify mô tả cả hai trong kiến trúc giao diện, đồng thời khuyên kiểm tra tùy chọn trình chỉnh sửa giao diện trước khi sửa mã trong hướng dẫn mã giao diện. Giao diện có trường SVG tùy chỉnh có thể không cần cả hai cách dùng mã bên dưới. Một trường có trong một giao diện không có nghĩa mọi giao diện đều có nó.

Hai cách bàn giao

Sự khác biệt này quan trọng vì CSS trên trang không thể tác động vào bên trong SVG được tải qua <img> thông thường. Đường dẫn nội tuyến có thể dùng currentColor, lấy giá trị từ thuộc tính CSS color. Xem hướng dẫn ngữ cảnh ảnh SVG của MDN và giải thích currentColor. Với các ví dụ trình duyệt tổng quát hơn, đọc SVG nội tuyến so với thẻ ảnh.

Chuẩn bị SVG trước khi sửa giao diện

Bắt đầu với phiên bản nhỏ nhất vẫn hữu ích của biểu trưng thương hiệu. Với biểu tượng, giữ đường bao và mọi lỗ có chủ đích ở kích thước khách hàng thực sự thấy. Chữ mảnh hoặc chi tiết bề mặt trông đẹp trên bảng vẽ có thể không còn rõ ở 20 đến 32 pixel. Giữ tệp nguồn thương hiệu làm bản gốc; tạo bản xuất biểu tượng riêng.

1. Khôi phục nguồn sạch. Xuất SVG từ thiết kế vector gốc nếu còn. Nếu nguồn duy nhất là PNG màu phẳng, PerfectVector có thể giúp ở bước này: tạo bản SVG ứng viên bằng quy trình clipart thành SVG, rồi mở tệp tải xuống trong trình chỉnh sửa vector. Đối chiếu đường bao và các hình riêng với PNG. Bản dò nét là điểm bắt đầu, không phải lời đảm bảo hình học giống hệt.
2. Kiểm tra cấu trúc. Xác nhận biểu trưng nhìn thấy được tạo từ đường dẫn hoặc hình vector cơ bản, không phải một hình chữ nhật <image> raster nhúng. Xóa hộp nền vô tình xuất hiện, mảnh thừa, đường bao trùng và vùng màu tí hon. Hướng dẫn chuẩn bị biểu tượng PNG trình bày lưới nhất quán và kích thước thị giác trong một bộ.
3. Đặt khung vẽ và màu. Cho bản xuất một viewBox với khoảng đệm hợp lý. Giữ màu thương hiệu cố định nếu biểu trưng phải có hai màu. Nếu biểu tượng một màu cần kế thừa màu giao diện, hãy cho các đường dẫn cần thiết dùng currentColor. Đổi màu SVG giải thích vì sao màu tô cố định trong mã có thể không đổi theo thao tác đổi màu sau này.
4. Kiểm tra tệp dưới dạng mã. Chỉ giữ phần tử và thuộc tính cần cho biểu tượng. Xóa tập lệnh bất ngờ, tham chiếu ngoài, dữ liệu thừa của trình chỉnh sửa và mã không đáng tin trước khi đặt nội tuyến trong giao diện. Mở SVG đã làm sạch ở kích thước biểu tượng và kích thước lớn để kiểm tra; hai cách bắt được các lỗi khác nhau.

Với ngôi sao đơn sắc nhỏ, nguồn có thể đơn giản như sau. Đường dẫn bên dưới là ví dụ tự tạo, không phải biểu tượng Shopify cung cấp hay kết quả chuyển đổi PerfectVector. Nó có hệ tọa độ chỉ định rõ và không có ảnh nhúng:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z" fill="currentColor"/>
</svg>

Biểu trưng thương hiệu hai màu cần đường dẫn hoặc hình riêng với màu tô có chủ đích. Thay mọi màu bằng currentColor sẽ xóa sự phân biệt đó. Nếu biểu trưng thuộc một họ biểu tượng lớn hơn, hãy áp dụng cùng quy tắc kích thước và màu cho vài biểu tượng đại diện trước khi xuất phần còn lại.

Cách A: hiển thị tài nguyên giao diện

Bộ lọc asset_url của Shopify trả về URL CDN cho tệp trong thư mục assets của giao diện. Thêm SVG đã kiểm tra vào đó, rồi tham chiếu đúng tên tệp trong mẫu Liquid, section hoặc snippet phù hợp. Ví dụ đơn giản dưới đây giả định brand-mark.svg là biểu trưng trang trí có màu cố định cạnh văn bản nhìn thấy:

<img
  src="{{ 'brand-mark.svg' | asset_url }}"
  alt=""
  width="24"
  height="24"
>

Dùng văn bản alt mô tả nếu ảnh truyền tải thông tin mà văn bản bên cạnh không có. Với ảnh thuần trang trí, alt="" là phù hợp. Hướng dẫn khả năng tiếp cận của giao diện yêu cầu thuộc tính alt cho mọi ảnh và giá trị trống cho biểu tượng trang trí. Chiều rộng và chiều cao chỉ định rõ cũng chừa sẵn chỗ trong khi tài nguyên tải, như hướng dẫn phân phối tài nguyên của Shopify giải thích.

Theo cách này, trang xem SVG như một ảnh duy nhất. Nếu màu giao diện thay đổi, hãy cập nhật màu tô trong SVG hoặc chọn cách nội tuyến thay vì cho rằng quy tắc CSS của phần tử cha sẽ đổi màu tệp. Đừng dán URL tệp của cửa hàng này vào giao diện cửa hàng khác; hãy để asset_url xác định tài nguyên giao diện.

Cách B: kết xuất snippet biểu tượng nội tuyến

Với biểu tượng một màu được dùng lặp lại, đặt mã SVG đã kiểm tra trong snippet như snippets/brand-mark-icon.liquid. Tài liệu snippet của Shopify dùng {% render %} để chèn mã tái sử dụng. Snippet tối thiểu có thể lấy màu từ kiểu văn bản xung quanh:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"
  width="24" height="24" aria-hidden="true" focusable="false">
  <path d="M12 2 14.7 9.3 22 12l-7.3 2.7L12 22l-2.7-7.3L2 12l7.3-2.7Z"
    fill="currentColor"/>
</svg>

Sau đó kết xuất trong tệp giao diện liên quan:

<span class="brand-mark-icon">{% render 'brand-mark-icon' %}</span>

Ở đây aria-hidden="true" dành cho biểu tượng chỉ trang trí văn bản nhìn thấy ở gần. Nếu chỉ biểu tượng làm nhãn cho nút hoặc liên kết, hãy đặt tên có thể tiếp cận cho điều khiển thay vì dựa vào SVG trang trí. Kiểm tra bằng bàn phím và trình đọc màn hình. Giữ màu CSS và kích thước trong hệ thống kiểu thông thường của giao diện thay vì rải các giá trị nội tuyến riêng lẻ.

Snippet tái sử dụng được, nhưng vẫn là mã giao diện. Shopify khuyên nhân bản giao diện trước khi sửa mã. Sửa trên bản sao, xem trước đúng trang hoặc section và lưu snippet gốc để có thể đối chiếu sau cập nhật giao diện. Thư viện biểu tượng riêng của giao diện có thể có tham số và cấu trúc riêng; kiểm tra các tệp đó trước khi thay biểu tượng tích hợp. Thảo luận hiện tại trên Shopify Community về thư viện biểu tượng minh họa vì sao kết xuất cả thư viện không nhất thiết giống việc chọn một biểu tượng trong đó.

Kiểm tra bản bàn giao ở kích thước cuối

Một tệp đúng về kỹ thuật vẫn có thể trông sai trên cửa hàng. Xem lại trang trên cả nền sáng và tối nếu giao diện dùng chúng. Kiểm tra biểu trưng ở kích thước CSS thực tế, trên khung nhìn hẹp và cạnh những biểu tượng lân cận. Xác nhận lỗ vẫn mở, màu có đủ tương phản và biểu tượng không bị viewBox hoặc vùng chứa cắt mất.

Nếu tài nguyên hiện thành hình chữ nhật mờ khi phóng to, hãy kiểm tra raster nhúng. Nếu biểu tượng nội tuyến không theo màu giao diện, tìm màu tô cố định trong mã, kiểu nội tuyến hoặc bộ chọn có độ ưu tiên cao hơn. Nếu không thấy gì, trước tiên kiểm tra tên tệp tài nguyên hoặc tên snippet, rồi đến mã section của giao diện. Đừng đổi nhiều thứ cùng lúc. Hướng dẫn biểu tượng mặt nạ CSS trình bày một cách khác khi bạn cần đổi màu đường bao mà không đặt đường dẫn nội tuyến.

Với hình biểu trưng màu phẳng của bạn chỉ có raster, hãy tạo bản SVG ứng viên bằng PerfectVector, rồi kiểm tra đường dẫn, lỗ và màu ở kích thước biểu tượng dự định trước khi chọn cách đưa vào giao diện. Nếu đã có SVG tốt, bỏ qua dò nét và dành thời gian đó để xem trước cửa hàng.

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

Tôi có thể tải biểu tượng SVG qua màn hình Customize của mọi giao diện Shopify không? Không. Một số giao diện có trường biểu tượng hoặc SVG tùy chỉnh; những giao diện khác cần thêm tài nguyên hoặc sửa mã. Kiểm tra section và tài liệu của giao diện cụ thể trước khi cho rằng có trường đó.

Vì sao SVG tôi tải lên không theo màu giao diện? SVG dùng qua thẻ ảnh là tài nguyên ảnh, nên CSS trang không tạo kiểu cho đường dẫn bên trong. Sửa màu tô trong SVG cho tài nguyên màu cố định, hoặc dùng mã nội tuyến đã kiểm tra với currentColor khi cần màu do giao diện điều khiển.

Tôi có nên chuyển biểu tượng thương hiệu PNG thành SVG trước khi thêm không? Chuyển hình biểu trưng màu phẳng nếu cần đường dẫn có thể phóng to và chỉnh sửa. Kiểm tra bản dò nét ở kích thước biểu tượng dự định và xóa hình thừa. Giữ ảnh chụp hoặc ảnh có chất liệu ở dạng raster nếu dò nét sẽ bỏ mất chi tiết tạo nên đặc trưng của nó.

Nguồn tham khảo

1. Shopify Developers — Kiến trúc giao diện — Tài nguyên giao diện, snippet và nơi đặt mã.
2. Shopify Developers — asset_url — Cách URL tài nguyên giao diện hoạt động trong ví dụ Liquid.
3. Shopify Developers — Snippet — Mã Liquid tái sử dụng và thẻ render.
4. Shopify Help Center — Chỉnh sửa mã giao diện — Ưu tiên trình chỉnh sửa, nhân bản giao diện và lưu ý khi sửa mã.
5. Shopify Developers — Thực hành khả năng tiếp cận — Văn bản thay thế và cách xử lý biểu tượng trang trí.
6. Shopify Developers — Phân phối tài nguyên từ Shopify CDN — Bộ lọc tài nguyên và kích thước ảnh chỉ định rõ.
7. MDN — SVG dưới dạng ảnh — Hạn chế của ngữ cảnh ảnh trong trình duyệt.
8. MDN — Thuộc tính màu SVG — Cách currentColor cung cấp màu tô và đường viền SVG.