ไอคอน SVG ใน Shopify: เตรียมสัญลักษณ์แบรนด์สะอาด

ไอคอน SVG ที่กำหนดเองเข้าสู่ธีม Shopify ได้สองวิธีที่ใช้งานได้จริง: อัปโหลดไฟล์เป็นแอสเซ็ตธีมแล้วแสดงด้วยแท็กภาพ หรือใส่มาร์กอัปใน Liquid snippet แล้วเรนเดอร์ snippet ตรงตำแหน่งไอคอน วิธีแรกง่ายกว่าสำหรับสัญลักษณ์สีคงที่ วิธีที่สองควบคุมพาธและสีได้โดยตรง ตัวควบคุมที่มีในตัวแก้ไขธีมขึ้นกับธีมของคุณ จึงตรวจบล็อกไอคอนที่มีอยู่ก่อนเปลี่ยนโค้ด

หากต้นทางมีเพียง PNG ให้สร้าง SVG ที่เป็นพาธก่อน แค่เปลี่ยนชื่อไฟล์ไม่ทำให้พิกเซลเป็นรูปทรง SVG ต้นฉบับสะอาดเหมาะกว่าหากมี ส่วนภาพถ่ายรายละเอียดมากมักควรเก็บเป็นภาพ ขั้นตอนด้านล่างนำรูปสัญลักษณ์แบรนด์เล็ก ๆ จากการเตรียมไฟล์ไปถึงภาพตัวอย่างธีม โดยไม่สมมติบัญชีร้านค้าหรือเวอร์ชันธีมเฉพาะ

เลือกตำแหน่งที่ไอคอนควรอยู่

ธีม Shopify มีไดเรกทอรี assets สำหรับไฟล์ และ snippets สำหรับมาร์กอัป Liquid ที่ใช้ซ้ำ Shopify อธิบายทั้งสองในสถาปัตยกรรมธีม และแนะนำให้ตรวจตัวเลือกในตัวแก้ไขธีมก่อนแก้โค้ดในคู่มือโค้ดธีม ธีมที่มีช่อง SVG กำหนดเองอาจไม่ต้องใช้วิธีโค้ดด้านล่างเลย การมีช่องในธีมหนึ่งไม่ได้หมายความว่าทุกธีมมี

สองวิธีส่งมอบ

ความต่างนี้สำคัญเพราะ CSS บนหน้าเข้าไปจัดสไตล์ภายใน SVG ที่โหลดผ่าน <img> ปกติไม่ได้ พาธ inline ใช้ currentColor ซึ่งรับค่าจากพร็อพเพอร์ตี CSS color ได้ ดูคู่มือบริบทภาพ SVG ของ MDN และคำอธิบาย currentColor สำหรับตัวอย่างเบราว์เซอร์ทั่วไป อ่านSVG inline เทียบกับแท็กภาพ

เตรียม SVG ก่อนแก้ธีม

เริ่มด้วยสัญลักษณ์แบรนด์แบบเล็กที่สุดที่ยังสื่อสารได้ สำหรับไอคอน ให้รักษาขอบรูปและช่องเปิดที่ตั้งใจไว้ที่ขนาดซึ่งลูกค้าเห็นจริง ตัวอักษรละเอียดหรือพื้นผิวที่ดูดีบนอาร์ตบอร์ดอาจยุบหายที่ 20 ถึง 32 พิกเซล เก็บไฟล์แบรนด์ต้นทางเป็นไฟล์หลัก แล้วส่งออกไอคอนแยก

1. หาต้นทางที่สะอาดกลับมา ส่งออก SVG จากงานเวกเตอร์ต้นฉบับหากมี หากต้นทางมีเพียง PNG แบบแบน PerfectVector ช่วยขั้นตอนนี้ได้: สร้าง SVG สำหรับประเมินด้วยกระบวนการคลิปอาร์ตเป็น SVG แล้วเปิดไฟล์ดาวน์โหลดในโปรแกรมเวกเตอร์ เทียบขอบรูปและรูปทรงแยกกับ PNG ผลไล่เส้นเป็นจุดเริ่มต้น ไม่ใช่คำรับประกันเรขาคณิตเหมือนกัน
2. ตรวจโครงสร้าง ยืนยันว่าสัญลักษณ์ที่เห็นเป็นพาธหรือรูปทรงเวกเตอร์พื้นฐาน ไม่ใช่สี่เหลี่ยมราสเตอร์ <image> ที่ฝังเพียงภาพเดียว ลบกล่องพื้นหลังที่ไม่ตั้งใจ เศษรูป เส้นรอบรูปซ้ำ และบริเวณสีเล็กจิ๋ว คู่มือเตรียมไอคอน PNG อธิบายกริดและขนาดที่มองเห็นสอดคล้องกันทั้งชุด
3. ตั้งพื้นที่วาดและสี ให้ไฟล์ส่งออกมี viewBox พร้อมระยะเผื่อที่เหมาะสม คงสีแบรนด์ไว้หากสัญลักษณ์ต้องเป็นสองสี หากไอคอนสีเดียวควรรับสีธีม ให้พาธที่ต้องการใช้ currentColor การเปลี่ยนสี SVG อธิบายว่าทำไมสีเติมที่กำหนดตายตัวอาจไม่ยอมเปลี่ยนตามภายหลัง
4. ตรวจไฟล์ในฐานะโค้ด เก็บเฉพาะองค์ประกอบและแอตทริบิวต์ที่ไอคอนต้องใช้ ลบสคริปต์ที่ไม่คาดคิด การอ้างอิงภายนอก ข้อมูลส่วนเกินจากโปรแกรมแก้ไข และมาร์กอัปที่ไม่เชื่อถือก่อนวาง inline ในธีม เปิด SVG ที่ทำความสะอาดแล้วทั้งขนาดไอคอนและขนาดใหญ่สำหรับตรวจ สองแบบนี้จับข้อผิดพลาดต่างกัน

สำหรับดาวเล็กสีเดียว ต้นทางอาจเรียบง่ายเพียงเท่านี้ พาธด้านล่างเป็นตัวอย่างต้นฉบับ ไม่ใช่ไอคอนที่ Shopify ให้หรือผลแปลง PerfectVector มีระบบพิกัดชัดเจนและไม่มีภาพฝัง:

<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>

สัญลักษณ์แบรนด์สองสีต้องมีพาธหรือรูปทรงแยกที่ตั้งสีเติมอย่างตั้งใจ การแทนทุกสีด้วย currentColor จะลบความต่างนั้น หากเป็นส่วนของชุดไอคอนใหญ่ ให้ใช้กฎขนาดและสีเดียวกันกับไอคอนตัวแทนสองสามตัวก่อนส่งออกที่เหลือ

วิธี A: แสดงแอสเซ็ตธีม

ฟิลเตอร์ asset_url ของ Shopify คืน URL CDN ของไฟล์ในไดเรกทอรี assets ของธีม เพิ่ม SVG ที่ตรวจแล้วไว้ที่นั่น แล้วอ้างชื่อไฟล์ตรงตัวใน Liquid template, section หรือ snippet ที่เหมาะ ตัวอย่างง่ายด้านล่างสมมติว่า brand-mark.svg เป็นสัญลักษณ์ตกแต่งสีคงที่ข้างข้อความที่มองเห็น:

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

ใช้ข้อความ alt ที่อธิบายภาพหากภาพสื่อข้อมูลที่ข้อความข้างเคียงไม่มี สำหรับภาพตกแต่งล้วน alt="" เหมาะสม คำแนะนำการเข้าถึงธีม ของ Shopify กำหนดให้ทุกภาพมีแอตทริบิวต์ alt และให้ไอคอนตกแต่งใช้ค่าว่าง ความกว้างและความสูงที่ระบุชัดยังกันพื้นที่ระหว่างโหลดแอสเซ็ต ตามคำแนะนำส่งแอสเซ็ต ของ Shopify

วิธีนี้เก็บ SVG เป็นภาพเดียวในมุมมองหน้าเว็บ หากสีธีมเปลี่ยน ให้อัปเดตสีเติม SVG หรือเลือกวิธี inline แทนการคิดว่า กฎ CSS ขององค์ประกอบแม่จะเปลี่ยนสีในไฟล์ อย่าวาง URL ไฟล์จากร้านหนึ่งในธีมอื่น ให้ asset_url สร้าง URL ที่อ้างถึงแอสเซ็ตของธีม

วิธี B: เรนเดอร์ snippet ไอคอนแบบ inline

สำหรับไอคอนสีเดียวที่ใช้ซ้ำ ใส่มาร์กอัป SVG ที่ตรวจแล้วใน snippet เช่น snippets/brand-mark-icon.liquid เอกสาร snippet ของ Shopify ใช้ {% render %} แทรกมาร์กอัปที่ใช้ซ้ำ snippet ขั้นต่ำรับสีจากสไตล์ข้อความรอบตัวได้:

<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>

จากนั้นเรนเดอร์ในไฟล์ธีมที่เกี่ยวข้อง:

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

ในที่นี้ aria-hidden="true" ใช้กับไอคอนที่เพียงตกแต่งข้อความที่มองเห็นใกล้กัน หากไอคอนเป็นป้ายเดียวของปุ่มหรือลิงก์ ให้ตั้งชื่อที่เทคโนโลยีช่วยการเข้าถึงอ่านได้ให้ตัวควบคุม แทนการพึ่ง SVG ตกแต่ง ทดสอบด้วยคีย์บอร์ดและโปรแกรมอ่านหน้าจอ เก็บสี CSS และขนาดในระบบสไตล์ปกติของธีม แทนการกระจายค่า inline เฉพาะจุด

snippet ใช้ซ้ำได้แต่ยังเป็นโค้ดธีม Shopify แนะนำให้ทำสำเนาธีมก่อนแก้โค้ด แก้ในสำเนา ดูตัวอย่างหน้าหรือส่วนจริง และเก็บ snippet ต้นฉบับไว้เทียบหลังอัปเดตธีม คลังไอคอนเฉพาะธีมอาจมีอาร์กิวเมนต์และโครงสร้างของตัวเอง ตรวจไฟล์เหล่านั้นก่อนแทนไอคอนในตัว การสนทนาปัจจุบันใน Shopify Community เรื่องคลังไอคอน แสดงให้เห็นว่าการเรนเดอร์ทั้งคลังไม่จำเป็นต้องเหมือนกับการเลือกไอคอนเดียวจากคลัง

ตรวจงานส่งมอบที่ขนาดสุดท้าย

ไฟล์อาจถูกต้องทางเทคนิคแต่ดูผิดในหน้าร้าน ตรวจทั้งพื้นหลังสว่างและมืดหากธีมใช้ ตรวจสัญลักษณ์ที่ขนาด CSS จริง บนวิวพอร์ตแคบ และข้างไอคอนเพื่อนบ้าน ยืนยันว่าช่องเปิดยังเปิด สีมีความเปรียบต่างพอ และไอคอนไม่ถูกตัดด้วย viewBox หรือตัวเก็บ

หากแอสเซ็ตเป็นสี่เหลี่ยมเบลอเมื่อขยาย ให้ตรวจราสเตอร์ที่ฝัง หากไอคอน inline ไม่ตามสีธีม ให้หาสีเติมตายตัว สไตล์ inline หรือตัวเลือก CSS ที่เจาะจงกว่า หากไม่มีอะไรแสดง ให้ตรวจชื่อไฟล์แอสเซ็ตหรือ snippet ก่อน แล้วตรวจมาร์กอัป section ของธีมเอง อย่าเปลี่ยนหลายอย่างพร้อมกัน คู่มือไอคอน CSS mask อธิบายอีกวิธีเมื่อต้องการเปลี่ยนสีรูปเงาโดยไม่ใส่พาธ inline

สำหรับรูปสัญลักษณ์แบนของคุณที่มีแต่ราสเตอร์ สร้าง SVG สำหรับประเมินด้วย PerfectVector แล้วตรวจพาธ ช่องเปิด และสีที่ขนาดไอคอนใช้งาน ก่อนเลือกวิธีในธีม หากมี SVG ที่ดีอยู่แล้ว ข้ามการไล่เส้นและใช้เวลานั้นตรวจหน้าร้าน

คำถามที่พบบ่อย

อัปโหลดไอคอน SVG ผ่านหน้าจอ Customize ของทุกธีม Shopify ได้หรือไม่? ไม่ บางธีมมีช่องไอคอนหรือ SVG กำหนดเอง บางธีมต้องใช้แอสเซ็ตหรือแก้โค้ด ตรวจ section และเอกสารของธีมนั้นก่อนคิดว่ามีช่อง

ทำไม SVG ที่อัปโหลดไม่ตามสีธีม? SVG ที่ใช้ผ่านแท็กภาพเป็นทรัพยากรภาพ CSS หน้าเว็บจึงไม่จัดสไตล์พาธภายใน แก้สีเติม SVG สำหรับแอสเซ็ตสีคงที่ หรือใช้มาร์กอัป inline ที่ตรวจแล้วพร้อม currentColor เมื่อต้องการสีจากธีม

ควรแปลงไอคอนแบรนด์ PNG เป็น SVG ก่อนเพิ่มหรือไม่? แปลงรูปสัญลักษณ์แบนเมื่อต้องการพาธที่ขยายและแก้ไขได้ ตรวจผลไล่เส้นที่ขนาดไอคอนใช้งานและลบรูปหลง เก็บภาพถ่ายหรือภาพพื้นผิวเป็นราสเตอร์ หากการไล่เส้นจะทิ้งรายละเอียดที่ทำให้ภาพนั้นมีเอกลักษณ์

แหล่งอ้างอิง

1. Shopify Developers — สถาปัตยกรรมธีม — แอสเซ็ตธีม snippet และตำแหน่งของมาร์กอัป
2. Shopify Developers — asset_url — พฤติกรรม URL แอสเซ็ตธีมที่ใช้ในตัวอย่าง Liquid
3. Shopify Developers — Snippets — มาร์กอัป Liquid ที่ใช้ซ้ำและแท็ก render
4. Shopify Help Center — การแก้โค้ดธีม — การเริ่มจากตัวแก้ไข การทำสำเนาธีม และข้อควรระวังการแก้โค้ด
5. Shopify Developers — แนวทางการเข้าถึง — ข้อความทางเลือกและการจัดการไอคอนตกแต่ง
6. Shopify Developers — ส่งแอสเซ็ตจาก Shopify CDN — ฟิลเตอร์แอสเซ็ตและขนาดภาพที่ชัดเจน
7. MDN — SVG ในฐานะภาพ — ข้อจำกัดบริบทภาพในเบราว์เซอร์
8. MDN — แอตทริบิวต์สี SVG — วิธีที่ currentColor ส่งค่าให้สีเติมและเส้นขอบ SVG