สร้าง sprite
☞ ทำงานในเบราว์เซอร์ของคุณทั้งหมด — ไม่มีการอัปโหลดไฟล์ลากไอคอน SVG มาวางที่นี่
หรือคลิกเพื่อเลือก — ไฟล์ SVG ได้ถึง 40 ไฟล์
ตัวอย่าง
วางบรรทัดเหล่านี้ตรงที่ต้องการให้ไอคอนปรากฏ
OneImageTool
เครื่องมือรูปภาพฟรี
สร้าง sprite
ลากไอคอนเข้ามาแล้วได้ไฟล์ sprite เดียวที่ประกอบด้วยอิลิเมนต์ symbol พร้อมบรรทัด use ของแต่ละไอคอน วางใช้ได้เลย
หรือคลิกเพื่อเลือก — ไฟล์ SVG ได้ถึง 40 ไฟล์
ตัวอย่าง
ไฟล์เดียว หนึ่งไอคอนหนึ่งการอ้างอิง
ไอคอนทุกตัวที่โหลดเป็นไฟล์ของตัวเองคือหนึ่งคำขอ หนึ่งรายการแคช และหนึ่งโอกาสที่จะมาช้าไปหนึ่งเฟรม sprite พับทั้งหมดเข้าเป็นเอกสารเดียว ไอคอนแต่ละตัวกลายเป็น symbol ที่มี viewBox ของตัวเอง ไม่มีอะไรวาดตัวเอง และคุณดึงออกมาใช้ตรงไหนก็ได้ด้วย use href="#icon-name" เพราะการอ้างอิงใช้ id ไม่ใช่ URL ไอคอนจึงรับทอด currentColor และ CSS ที่อยู่บน svg ที่ห่อมันไว้ ซึ่งเป็นสิ่งที่กอง img แท็กทำไม่ได้
ส่วนที่ยากไม่ใช่การห่อ แต่เป็นชื่อ ไอคอนสี่สิบตัวที่ส่งออกจากเครื่องมือออกแบบมักมีเกรเดียนต์ชื่อ "a" สี่สิบอัน และคลาสชื่อ "cls-1" สี่สิบอัน พอมาอยู่เอกสารเดียวกัน ตัวหลังก็แย่งสีของตัวแรกไปเงียบ ๆ ดังนั้น id และคลาสทุกตัวภายในไอคอนหนึ่ง ๆ จะถูกเปลี่ยนชื่อโดยใช้ id ของ symbol ตัวนั้นเองเป็นคำนำหน้า และที่ซ่อนของการอ้างอิงทั้งสี่แห่ง — url() ในแอตทริบิวต์, href ที่ชี้ไปยังแฟรกเมนต์, แอตทริบิวต์ style และ CSS ในอิลิเมนต์ style — ถูกเขียนใหม่ตามไปด้วย ไอคอนจึงไม่ปนกัน
สามขั้นตอน
ครั้งละไม่เกิน 40 ไฟล์ SVG แจงในเบราว์เซอร์ของคุณ จัดลำดับใหม่ด้วยปุ่มลูกศร ลำดับนั้นคือลำดับของ symbol ในไฟล์
symbol แต่ละตัวตั้งชื่อตามไฟล์โดยมีคำนำหน้าอยู่ข้างหน้า และรายการจะแสดงผลลัพธ์ให้ดู ไฟล์ชื่อซ้ำจะได้เลขต่อท้าย เพื่อไม่ให้ symbol สองตัวอ้าง id เดียวกัน
sprite เอาไปวางในหน้าเว็บ หรือเสิร์ฟเป็น sprite.svg ก็ได้ ส่วนโค้ดสั้น ๆ ให้บรรทัดพร้อมวางหนึ่งบรรทัดต่อไอคอน
ตอบสั้น ๆ
มีสองทาง วาง sprite ทั้งก้อนไว้ช่วงต้นของ HTML แล้วอ้างถึงไอคอนด้วย use href="#icon-name" หรือเสิร์ฟไฟล์นั้นแล้วอ้างด้วย use href="/sprite.svg#icon-name" ทางแรกประหยัดหนึ่งคำขอ ทางที่สองให้เบราว์เซอร์แคช sprite เดียวใช้ได้ทุกหน้า
มาจากชื่อไฟล์ แปลงเป็นตัวพิมพ์เล็ก อะไรที่ไม่ใช่ตัวอักษรหรือตัวเลขจะกลายเป็นขีดกลาง แล้วเติมคำนำหน้าไว้ข้างหน้า ดังนั้น arrow_left.svg กับคำนำหน้าค่าเริ่มต้นจะได้เป็น icon-arrow-left
id ของ XML ขึ้นต้นด้วยตัวเลขไม่ได้ แต่ชื่อไฟล์อย่าง 2-arrow.svg นั้นพบบ่อย คำนำหน้ายังช่วยไม่ให้ id ของไอคอนชนกับ id ที่มีอยู่แล้วในหน้าเว็บของคุณ จะแก้หรือลบทิ้งก็ได้ ถ้าลบแล้วทำให้ id ไม่ถูกต้อง ระบบจะใส่คำนำหน้าสำรองกลับมาให้
ตัวหลังจะได้เลขต่อท้าย ถ้าไม่ทำแบบนี้ symbol ทั้งสองจะถือ id เดียวกัน และทุกการอ้างอิงจะวาดไอคอนตัวแรกออกมา — เป็นภาพที่ผิดแบบเงียบ ๆ ไม่ใช่ข้อผิดพลาดที่ฟ้อง
รอด id และคลาสทุกตัวในไอคอนหนึ่ง ๆ จะถูกเปลี่ยนชื่อโดยใช้ id ของ symbol ตัวนั้นเป็นคำนำหน้า และการอ้างอิงถูกเขียนใหม่ตามไปด้วย ทั้ง url() ในแอตทริบิวต์, href แบบแฟรกเมนต์, แอตทริบิวต์ style และ CSS ในอิลิเมนต์ style
ถ้าไอคอนใช้ fill="currentColor" ได้ ตั้ง color บน svg ที่ครอบการอ้างอิงไว้ แล้วไอคอนจะตามไปเอง ส่วนไอคอนที่ใส่สีตายตัวไว้ก็คงสีเดิม sprite ไม่ไปแก้สีของคุณ
ครั้งละไม่เกิน 40 ตัว ตัว sprite เองไม่มีขีดจำกัดจริง ๆ แต่แผ่นที่ใหญ่กว่านี้มากมักควรแยกตามส่วนของเว็บไซต์ เพื่อให้แต่ละหน้าพกเฉพาะไอคอนที่ใช้จริง
ไม่ การแจงและการประกอบ SVG ทำในเบราว์เซอร์ของคุณทั้งหมด และภาพตัวอย่างเป็น blob URL ที่สร้างจากเครื่องคุณเอง เครื่องมือนี้ไม่มีเซิร์ฟเวอร์ที่จะรับไฟล์อยู่แล้ว
ฟรี ไม่มีลายน้ำ และไม่ต้องสมัครสมาชิก