วิธีใช้ Svg Sprites เป็นไอคอน

สไปรต์ SVG เป็นไฟล์ XML ที่มีคอลเลกชันของรูปภาพ SVG รูปภาพสามารถใช้เป็นไอคอนหรือภาพประกอบบนเว็บไซต์หรือในแอพมือถือ ภาพแต่ละภาพมีอยู่ในองค์ประกอบที่แยกจากกัน และสามารถแคชไฟล์ XML เพื่อให้สามารถใช้ไอคอนแบบออฟไลน์ได้ หากต้องการใช้สไปรต์ SVG จะต้องโหลดไฟล์ XML ลงในเอกสาร คุณสามารถใช้รูปภาพได้โดยอ้างอิง ID ขององค์ประกอบ ตัวอย่างเช่น หากต้องการใช้รูปภาพของแมว ไฟล์ XML จะถูกโหลดลงในเอกสาร และรูปภาพจะถูกอ้างอิงโดย ID ของรูปภาพ: จากนั้นรูปภาพแมวจะสามารถนำไปใช้ที่ใดก็ได้ในเอกสารโดยอ้างอิง ID: รูปภาพสามารถ กำหนดสไตล์ด้วย CSS และตำแหน่งและขนาดสามารถควบคุมได้ด้วยแอตทริบิวต์ 'x' และ 'y': มีสาเหตุหลายประการที่ทำให้ไฟล์เหล่านี้มีประโยชน์อย่างยิ่งสำหรับโลโก้ ไดอะแกรม และไอคอน โดยทั่วไป สัญลักษณ์และรูปภาพจะถูกกำหนดเป็นภาพแยกกันผ่านไฟล์ a.svg อีกทางเลือกหนึ่งคือการเพิ่มไฟล์ sva ไฟล์เดียวให้กับอิมเมจ sva หลายไฟล์ มีเครื่องมือหลายอย่างที่สามารถใช้ในการคำนวณตำแหน่งพิกเซลและสร้างโค้ด CSS ไม่มีการจำกัดจำนวนครั้งในการใช้องค์ประกอบเดียวบนหน้าที่มีองค์ประกอบการใช้งาน รูปภาพภายนอกจะไม่แสดงในเบราว์เซอร์รุ่นเก่า เช่น IE11 หรือต่ำกว่า เพื่อหลีกเลี่ยงข้อผิดพลาดของมาร์กอัป HTML ทางเลือกที่ดีที่สุดคือการแทรก SVG แบบเต็มลงในมาร์กอัป HTML และอ้างอิงสไปรต์แต่ละตัวโดยใช้เป้าหมาย อักขระแต่ละตัวถูกกำหนดคลาสของสไปรต์ และ CSS ที่ฝังไว้จะสั่งให้แสดง:ไม่มีตามค่าเริ่มต้น กราฟิกที่ปรับขนาดได้มีสองวิธีในการสร้าง: ด้วยมือหรือผ่านโปรแกรม ในกรณีหลังนี้ จำเป็นต้องใช้รหัสบรรทัดเดียว เมื่อใช้โปรแกรมภาพเวกเตอร์ คุณจะวาดไอคอนของคุณบนกระดานวาดภาพเสมือนและจัดการโดยใช้รูปร่าง สี และเส้นทางที่หลากหลาย ในกรณีนี้ คุณสามารถเขียนรูปภาพลงในเอกสาร HTML ได้โดยตรงโดยใช้แท็ก *svg หากคุณมีโค้ด VS, IDE ที่คุณต้องการ หรือคุณใช้ HTML คุณสามารถรวมรูปภาพ SVG ในเอกสารของคุณโดยใช้เป็นองค์ประกอบ HTML หากคุณทำตามขั้นตอนทั้งหมดอย่างถูกต้อง คุณควรจะสามารถสร้างเพจดังที่แสดงด้านล่างได้ ไฟล์กราฟิกเวกเตอร์ที่มีรูปภาพที่ปรับขนาดได้เรียกว่าไฟล์ SVG เมื่อพูดถึงรูปแบบรูปภาพ บริบทที่หลากหลายสามารถใช้เพื่อ สร้างภาพ SVG องค์ประกอบ HTML เช่น *img หรือ *svg ได้รับการสนับสนุนโดยเบราว์เซอร์เมื่อใช้ภาพ SVG ไฟล์ Svg สามารถใช้เป็นไอคอนได้หรือไม่ เครดิต: svgrepo ข้อได้เปรียบหลักของกราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG) คือสามารถใช้เป็นไอคอนบนเว็บไซต์ของคุณได้ เพราะเป็นกราฟิกแบบเวกเตอร์ กราฟิกแบบเวกเตอร์สามารถปรับขนาดได้ทุกขนาดและมีคุณภาพสูงเช่นเดียวกัน เนื่องจากไฟล์เหล่านี้มีขนาดเล็กและบีบอัดได้ดี เว็บไซต์ของคุณจึงโหลดได้ไม่ช้ากราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG) สามารถวาดได้โดยใช้ไวยากรณ์ eXtensible Markup Language (XML) เมื่อใช้รูปแบบภาพเวกเตอร์ SVG ตรงข้ามกับภาพพิกเซลขนาดคงที่ คือบล็อกโค้ด XML ที่สามารถดูและแสดงผลได้โดยตรงในเบราว์เซอร์ รูปภาพซึ่งอาจมีขนาดเล็กกว่าคำพูดมาก มีความกระชับและสามารถระบุการกระทำและข้อมูลได้รวดเร็วกว่ามาก จนกระทั่งในช่วงเวลาเดียวกันที่ Tamagotchis, iMacs และ Palm Pilots กำลังเดินทางเข้ามาในบ้านของเรา รูปแบบไฟล์ภาพ SVG ก็พร้อมใช้งานบนเว็บ โดยทั่วไป เว็บเบราว์เซอร์ส่วนใหญ่ไม่รองรับรูปแบบ SVG และไม่รู้จัก อย่างไรก็ตาม จนถึงปี 2017 เว็บเบราว์เซอร์มีปัญหาในการเรนเดอร์ SVG เนื่องจากขาดการสนับสนุน เมื่อคุณใช้แบบอักษรบนเว็บแบบไอคอนหรือแบบเวกเตอร์ คุณจะไม่มีปัญหาใดๆ กับการปรับขนาด ชุดไอคอนที่สร้างไว้ล่วงหน้าให้ตัวเลือกการออกแบบที่จำกัดมากขึ้นเมื่อพูดถึงการออกแบบไอคอน เลือกไฟล์ svg หากคุณต้องการสร้างสิ่งที่หลากหลายมากขึ้น สามารถสร้างไอคอน SVG ได้ด้วยเครื่องมือช่างหรือโปรแกรมซอฟต์แวร์ สามารถวาดไอคอนบนกระดานวาดภาพเสมือนจริงโดยใช้โปรแกรมภาพเวกเตอร์ จากนั้นคุณสามารถส่งออกไฟล์ .svg ซึ่งเสร็จสิ้นแล้ว คุณสามารถรับไอคอน SVG ฟรีจากรายการ Evernote นี้ได้เช่นกัน ขนาดของรูปร่างถูกกำหนดโดยความกว้างและความสูง ในขณะที่ตำแหน่งของรูปร่างถูกกำหนดโดย x และ y นอกจากนี้ คุณสามารถกำหนดสไตล์ของแต่ละองค์ประกอบได้ด้วยการสร้างสไตล์ชีตแยกต่างหากที่มีชื่อคลาสและสไตล์ ด้วยความช่วยเหลือจากตัวสร้าง Ycode แบบไม่ใช้โค้ด คุณสามารถเปลี่ยนสีของไอคอนเหล่านี้รวมทั้งเปลี่ยนสีพื้นหลังได้ หากคุณต้องการรูปแบบรูปภาพที่หลากหลาย ปรับขยายได้ และใช้งานง่าย คุณควรพิจารณาใช้ svega เหมาะอย่างยิ่งสำหรับโครงการส่วนบุคคลและเชิงพาณิชย์เนื่องจากความสามารถในการเคลื่อนไหวและความโปร่งใส เนื่องจากคนส่วนใหญ่ใช้ SVG แทนรูปแบบทั่วไป จึงอาจไม่รองรับบนอุปกรณ์หรือเบราว์เซอร์รุ่นเก่า ฉันจะใช้ Svg Sprite ได้อย่างไรSVG Sprite เป็นวิธีที่ดีในการลดจำนวนคำขอ HTTP ที่สร้างขึ้นสำหรับไซต์ เป็นไฟล์เดียวที่มีหลายภาพ และแต่ละภาพสามารถเข้าถึงได้โดยใช้องค์ประกอบ ตัวอย่างเช่น หากคุณมีไฟล์ชื่อ “sprite.svg” ที่มีภาพสามภาพ คุณสามารถเข้าถึงแต่ละภาพโดยใช้องค์ประกอบ และ: SVG-sprite เป็นโมดูล Node.js ที่อบ SVG ต่างๆ ให้เป็นสไปรต์ที่ระดับต่ำสุด . แพ็คเกจประกอบด้วยชุดเทมเพลต Moustache สำหรับสร้างสไตล์ชีตใน CSS รุ่นเก่าหรือหนึ่งในรูปแบบตัวประมวลผลล่วงหน้าที่สำคัญ (Sass, Less และ Stylus) หากคุณต้องการใช้ API มาตรฐาน คุณสามารถทำให้ชีวิตของคุณง่ายขึ้นได้โดยใช้ Grunt หรือ Gulp wrappers ตามค่าเริ่มต้น สไปรท์มีสามประเภท ได้แก่ โหมด กลุ่ม และรายบุคคล เป็นไปได้ที่จะปิดโหมดเอาต์พุตในที่ต่างๆ ในเวลาเดียวกัน เมื่อสร้าง CSS Sprite และสไตล์ชีตในรูปแบบตัวประมวลผลล่วงหน้ารูปแบบใดรูปแบบหนึ่ง (Sass, LESS, Stylus ฯลฯ) คุณต้องทราบข้อควรพิจารณาเป็นพิเศษ คุณสามารถใส่ YAML ที่มีองค์ประกอบ เช่น >title> และ >description> ลงใน SVG ของคุณ เครื่องมือบรรทัดคำสั่งที่สมบูรณ์รวมอยู่ในเวอร์ชันบรรทัดคำสั่ง ซึ่งช่วยให้คุณทำงานกับรูปแบบเอาต์พุตที่หลากหลาย เครื่องมือนี้เป็นส่วนสำคัญของการออกแบบใดๆ และสามารถใช้เพื่อแสดงแบรนด์หรือผลิตภัณฑ์ได้ ไอคอนของบริษัทควรเป็นที่รู้จักและปรับขนาดได้ โดยเฉพาะอย่างยิ่งเมื่อใช้กับสมาร์ทโฟนและแท็บเล็ต หากต้องการสร้างไอคอนโดยใช้ SVG ให้รวมองค์ประกอบ *svg> ที่แสดงถึงคลาสไอคอนของคุณก่อน จากนั้นจึงรวมองค์ประกอบ *use** ที่แสดงถึงของคุณ ในไฟล์ svg ให้รวมแอตทริบิวต์ href ตามด้วย octothorpe (ลูกศร) และสุดท้ายชื่อไอคอน ตัวอย่างชื่อบล็อกโพสต์สามารถสร้างได้โดยใช้โค้ดต่อไปนี้: “How to make a simple SVG icon using CSS and SVG” svg class=”icon-title”> br>br> *xlink:href=#icon-post -title #iconposttitle เมื่อทำตามขั้นตอนเหล่านี้ คุณจะสามารถสร้างไอคอน SVG แบบง่ายๆ ได้อย่างง่ายดาย */octothorpe> ทำไมคุณควรใช้ไอคอน Svg ฉันจะใช้ SVG Sprites ได้อย่างไร นอกจากจะใช้กับรูปภาพแบบสแตนด์อโลนหรือฝังใน HTML แล้ว ยังสามารถใช้ SVG ได้อีกด้วย ใช้งานได้กับเบราว์เซอร์หลักทั้งหมด รวมถึง Internet Explorer 9 ขึ้นไป เหตุใดเราจึงควรใช้ไอคอน sva ไอคอน SVG แบบอินไลน์เพิ่มโค้ดบางอย่างให้กับไฟล์ของคุณ ดังนั้นหากคุณไม่มีปัญหา คุณก็สามารถใช้มันได้ ไอคอน SVG จะดูดีทั้งบนจอภาพปกติและจอภาพเรตินา หากสิ่งนี้สำคัญ ให้ใช้ไอคอน SVG แบบอินไลน์แทนไอคอนแบบอักษร ไอคอน SVG เป็นที่ต้องการมากกว่าไอคอน NET คุณใช้ Sprite ใน React อย่างไร นำเข้าซ้ำจาก '../letters'; นำเข้าซ้ำจาก '../reacts.' จดหมายนำเข้าSvg. svg; เข้าสู่ '. จดหมายนี้เรียกว่า sc (ตัวอักษร, สี, ขนาด) (svg className=svg-letter) กรอกข้อมูลตามประเภทของตัวอักษร ใช้ href=*$*Letters*#letter-$letter=/svg); letterSvg.propTypes = ตัวอักษร: React.Types.string, สี: React เมื่อส่งออก letterSvg.default.Props ให้เลือกตัวอักษร (A) color:#f5f5f5f5', size: 20 ; และใช้การส่งออกเริ่มต้น letterSvg; จดหมาย: 'A'ฉันจะใช้ไอคอน Svg ได้อย่างไรหากต้องการใช้ไอคอน SVG คุณจะต้องมีโปรแกรมแก้ไขเวกเตอร์ เช่น Adobe Illustrator, Inkscape หรือ Sketch เมื่อคุณสร้างไอคอนแล้ว คุณสามารถบันทึกเป็นไฟล์ SVG ได้ หากต้องการใช้ไอคอนบนเว็บไซต์ คุณสามารถฝังไฟล์ SVG ลงในโค้ด HTML ของคุณได้ ไอคอนสามารถพบได้หลายวิธีใน HTML และ CSS แต่โดยทั่วไปจะใช้ในทีมพัฒนาส่วนหน้าของ Kaliop วางระยะห่างระหว่างขอบของรูปทรงให้มากขึ้นเล็กน้อยโดยคำนึงถึงรูปทรงโค้งมน จำเป็นเท่านั้นที่จะต้องระบุขนาดของการปรับพิกเซลเพื่อให้ได้ผลลัพธ์ที่ดีที่สุดบนหน้าจอที่ต่ำ (หากตั้งค่าความละเอียดไว้เป็นช่วงที่เหมาะสม) เมื่อส่งออกรูปภาพที่สร้างโดยเครื่องมือออกแบบ เป็นเรื่องปกติที่จะมีมาร์กอัปและข้อมูลเมตาเล็กน้อย นอกจากนี้ ข้อมูลพาธ (ในแอตทริบิวต์ d) อาจมีความแม่นยำมาก หากต้องการดูสิ่งที่ถูกลบหรือทำให้ง่ายขึ้นจากโค้ดก่อนและหลังโค้ด ให้ใช้เครื่องมืออย่าง SVGOMG หากเราใส่ฮาร์ดโค้ดในซอร์ส เราจะไม่สามารถเปลี่ยนสีเหล่านั้นจากโค้ด CSS ของเราได้ ดังนั้นตรวจสอบให้แน่ใจว่าไอคอนสีเดียวไม่มีตัวเลือกนี้ หากคุณสร้างสไปรต์ด้วยตนเอง คุณควรแยกโฟลเดอร์ต่างหาก มีไอคอน SVG ส่วนตัวของคุณ ตรวจสอบให้แน่ใจว่าภาพประกอบที่คุณไม่จำเป็นต้องจัดรูปแบบถูกเก็บเป็นไฟล์ SVG ไฟล์เดียว และรวมไว้ในเพจของคุณด้วย <img href=url/to/ illustration.svg> alt='> หากคุณกำลังสร้างภาพเคลื่อนไหว ขอแนะนำให้คุณใส่รหัส SVG แบบเต็มในหน้า HTML ของคุณ บางบทความแนะนำให้ใช้ป้ายกำกับข้อความเพื่อติดป้ายกำกับไฟล์ SVG แต่ละไฟล์ในที่เก็บไอคอนของคุณ เติมสิ่งนี้ด้วย JavaScript (svg4everybody, svgxuse) และมันจะใช้งานได้ หรือคุณสามารถรวมสไปรต์ของคุณในโค้ด HTML ของทุกหน้า มีข้อดีและข้อเสียมากมายในแต่ละวิธี การรวมสองวิธีในการสร้าง Sprite เป็นวิธีที่มีประสิทธิภาพมากที่สุดในการทำเช่นนั้น คุณสมบัติสไตล์ SVG ส่วนใหญ่นั้นสืบทอดมาจากผู้ปกครอง ไม่จำเป็นต้องตั้งค่าคุณสมบัติความกว้างเส้นขีดเป็นความยาวเฉพาะ แต่จำเป็นต้องตั้งค่าเป็นค่าเฉพาะที่สัมพันธ์กับพิกัดโลคัลของไอคอน เส้นขีดครึ่งหนึ่งจะถูกตัดออกหากเส้นทางของคุณถึงขีดจำกัดของวิวพอร์ต สามารถใช้เทคนิคง่ายๆ เพื่อสร้างไอคอนที่มีค่าการเติมที่แตกต่างกันสองค่า (หรือที่เรียกว่าสองสี) ไอคอนของคุณจะใหญ่และดูยากว่าหน้าของคุณมีโครงสร้าง HTML ที่เหมาะสมหรือไม่ คุณสามารถเพิ่มสิ่งนี้ในส่วนหัวของหน้าของคุณ มันหวานและสั้นไปหน่อย อีกวิธีหนึ่งคือการใช้แอตทริบิวต์ความกว้างและความสูงในองค์ประกอบ SVG ของคุณ อย่างไรก็ตาม หากคุณต้องปรับขนาดไอคอนนี้ใน CSS มันอาจจะยากขึ้นเล็กน้อย หากคุณใช้ไอคอนสี่เหลี่ยมจัตุรัสหรือส่วนแบ่ง คุณสามารถใช้ค่าเปอร์เซ็นต์ได้ เนื่องจากค่าดังกล่าวระบุเปอร์เซ็นต์ของความกว้างของไอคอนอย่างคร่าว ๆ ในการเติมสีไล่ระดับสี เราต้องใช้ sva gradient ไม่สามารถใช้ CSS linear-gradient(…) กับคุณสมบัติการเติม SVG ได้เนื่องจากละเมิดข้อกำหนด CSS หากคุณกำลังดูไฟล์ SVG บนอุปกรณ์พกพา คุณยังสามารถบันทึกลงในแกลเลอรีของอุปกรณ์ได้โดยเลือก “บันทึกรูปภาพเป็น ” เมื่อบันทึกไฟล์ SVG ลงในแกลเลอรีของอุปกรณ์ คุณจะมีประโยชน์ในอนาคต คุณสามารถเริ่มภาพประกอบของคุณเองได้ทันทีหากคุณเลือกใช้ เหตุใด Svg จึงเป็นตัวเลือกที่ดีที่สุดสำหรับไอคอน เนื่องจาก SVG ช่วยให้คุณสามารถปรับขนาดได้ทุกขนาดโดยไม่ลดคุณภาพลง จึงเป็นตัวเลือกที่ยอดเยี่ยมสำหรับไอคอน ยิ่งไปกว่านั้น ด้วย SVG คุณสามารถเปลี่ยน ลงสี หรือทำให้ไอคอนแต่ละบิตเคลื่อนไหวได้ ซึ่งเป็นฟีเจอร์ที่สามารถพบได้ในฟอนต์ของไอคอนเท่านั้น หากคุณทำงานกับพิกเซลและความโปร่งใส ไฟล์ PNG จะดีกว่าไฟล์ SVG ฉันควรใช้ Svg หรือ Png สำหรับไอคอนหรือไม่ เนื่องจากเป็นภาพเวกเตอร์ จึงสามารถปรับขนาดได้ทุกขนาดและให้คุณภาพของภาพที่เหนือกว่า ในทางกลับกัน PNG ไม่รองรับเบราว์เซอร์มากเท่าที่ควร วิธีที่ดีที่สุดคือใช้ PNG หากคุณต้องใช้ Internet Explorer 8 หรือใหม่กว่า และใช้ SVG หากคุณไม่ต้องการ การใช้ SVG กับ PNG มีข้อดีหลายประการ เช่น การใช้สไปรต์ รูปภาพ หรือ SVG แบบอินไลน์ ไฟล์ PNG สามารถมีขนาดใหญ่เป็นสองเท่า (สำหรับจอภาพเรตินา) และมีขนาดไฟล์ที่เล็กกว่าตามลำดับ (โดยไม่จำเป็นต้องใช้ Javascript หรือโพลีฟิล) โดยไม่สูญเสียประสิทธิภาพ (ไม่ต้องใช้เบราว์เซอร์รุ่นเก่า) แม้จะมีความสามารถด้านการออกแบบที่ยอดเยี่ยม แต่ PNG ก็เป็นเครื่องมือออกแบบที่ยากจะเป็นอันดับต้นๆ ในแง่ของการส่งมอบ แบนด์วิดท์ และการเข้าถึง คนส่วนใหญ่ไม่เห็นเหตุผลมากนักที่จะใช้ SVG หากพวกเขาเพียงแค่แสดงรูปร่างหรือการออกแบบและจำเป็นต้องทำการเปลี่ยนแปลงกับพวกเขา ทั้งสองสามารถแสดงจุดแข็งและกรณีการใช้งานได้ แต่ PNG ล้าหลังกว่ามาก เมื่อต้องจัดการกับข้อมูลเวกเตอร์แทนข้อมูลภาพ เบราว์เซอร์ต้องใช้ความพยายามมากขึ้น เบราว์เซอร์สมัยใหม่ เช่น Chrome มีหน้าเว็บแบบ CMS ที่มีไอคอน svg ไม่กี่ร้อย (ประมาณ 3-500 ไอคอน) ที่ทำให้เบราว์เซอร์หยุดทำงานเป็นเวลา 5 ถึง 7 วินาทีทันทีที่เปิดขึ้น ตามที่ระบุไว้ก่อนหน้านี้ มีการเพิ่มขึ้นอย่างมากใน โหลดบนเบราว์เซอร์อันเป็นผลมาจากจำนวน SVG ในหนึ่งหน้า ในกรณีนี้ คุณควรแปลง SVGS เป็นเว็บฟอนต์ เป็นตัวเลือกที่สอง เปลี่ยนกลับเป็น PNG แบบเก่าธรรมดา ไอคอน SVG ไม่มีคุณภาพเหมือนกับไอคอน PNG หากคุณไม่ต้องการจัดการกับภาพถ่ายจริงๆ คุณสามารถใช้ .html แทน Svg ได้เสมอ ขณะนี้ไอคอน SVG ฟรีพร้อมใช้งานในเบราว์เซอร์สมัยใหม่ ซึ่งสามารถบันทึกบนเซิร์ฟเวอร์และโหลดลงในไคลเอ็นต์ผ่านโค้ดฝั่งเซิร์ฟเวอร์ของเบราว์เซอร์ ไม่รองรับการแปลง CSS 3D ซึ่งอาจทำให้เกิดปัญหาเมื่อใช้ร่วมกับปุ่ม นอกจากจะไม่รองรับการแปลง CSS 3D แล้ว ยังสามารถลดขนาดหรือเพิ่มไอคอน SVG ได้โดยไม่สูญเสียคุณภาพ แม้ว่าโดยทั่วไปแล้วแบบอักษรของไอคอนจะมองเห็นได้น้อยลงเมื่อมีการปรับขนาด แต่โดยทั่วไปแล้วจะมีประสิทธิภาพน้อยกว่า สุดท้าย ไอคอน sVG สามารถแปลงเป็นปุ่ม แท็บ และองค์ประกอบอื่นๆ ที่โต้ตอบกับผู้ใช้ได้ ในทางกลับกัน แบบอักษรของไอคอนมักจะไม่ได้ใช้เป็นองค์ประกอบส่วนติดต่อผู้ใช้ เมื่อการออกแบบกราฟิกแบบเวกเตอร์ได้รับความนิยมมากขึ้น ผู้คนจำนวนมากขึ้นเรื่อยๆ จึงหันมาใช้ sva สำหรับไอคอนและกราฟิกของตน อย่างไรก็ตาม แม้ว่าขนาดของรูปภาพ SVG จะใหญ่กว่ารูปภาพ JPEG แต่ก็มีความยืดหยุ่นมากกว่าและแก้ไขได้ง่ายกว่า นอกจากนี้ยังสามารถเพิ่มหรือลดขนาดได้โดยไม่สูญเสียคุณภาพ และสามารถใช้สร้างปุ่ม แท็บ และองค์ประกอบอินเทอร์เฟซผู้ใช้อื่นๆ ได้ หากคุณต้องการวิธีการสร้างกราฟิกที่ยืดหยุ่นและปรับขนาดได้มากขึ้น ให้ใช้ svega.Svg Vs. Png สำหรับโลโก้และไอคอนเพื่อให้ได้ผลลัพธ์ที่ดียิ่งขึ้น สร้างโลโก้หรือไอคอนโดยใช้ไฟล์เวกเตอร์ เช่น sva มี PNG หลายแบบสำหรับใช้กับรายละเอียดและพื้นผิวที่ดี แต่ SVG มักใช้กับโลโก้ ไอคอน และกราฟิกแบนๆ อื่นๆ เนื่องจากเบราว์เซอร์รุ่นเก่าอาจไม่รองรับ SVG คุณจึงควรพิจารณาใช้ PNG แทน วิธีใช้งาน Svg Sprite ใน HtmlSVG sprite เป็นวิธีที่ดีในการลดจำนวนคำขอ HTTP ที่สร้างขึ้นสำหรับเพจของคุณ นอกจากนี้ยังเหมาะสำหรับการลดขนาดไฟล์ของหน้าของคุณ วิธีใช้มีดังนี้ ขั้นแรก สร้างโฟลเดอร์สำหรับไฟล์ SVG ของคุณ จากนั้น สร้างไฟล์ชื่อ “sprite.svg” ในโฟลเดอร์นั้น ไฟล์นี้จะมีไอคอน SVG ทั้งหมดของคุณ จากนั้น เปิดไฟล์ HTML และเพิ่มโค้ดต่อไปนี้ลงในส่วน: … … แทนที่ “/path/to/sprite.svg” ด้วยพาธไปยังไฟล์ sprite ของคุณ แทนที่ “icon-name” ด้วยชื่อไอคอนที่คุณต้องการใช้ ตอนนี้ เมื่อคุณดูไฟล์ HTML ของคุณในเบราว์เซอร์ คุณควรเห็นไอคอนที่คุณระบุ เนื่องจากเป็นเอกสาร XML จึงจำเป็นอย่างยิ่งที่จะต้องเป็นประเภทเนื้อหาของ application/svg เนื่องจากไม่ได้กำหนดประเภทเนื้อหาของไฟล์ SVG อย่างถูกต้อง เบราว์เซอร์ของคุณอาจไม่สามารถตีความได้ หากคุณใช้ SVG เช่น img src=”image.svg”> หรือ CSS background-image และไฟล์เชื่อมโยงอย่างถูกต้องและทุกอย่างปรากฏอย่างถูกต้อง แต่เบราว์เซอร์ไม่แสดง อาจเป็นเพราะ เซิร์ฟเวอร์ของคุณกำลังให้บริการไฟล์ด้วยหน้า HTML ที่สามารถฝังโดยตรงกับองค์ประกอบ SVG เบราว์เซอร์ของคุณควรสามารถตีความไฟล์ SVG ของคุณได้หากไฟล์นั้นให้บริการด้วยประเภทเนื้อหาที่เหมาะสมSvg Sprites: วิธีที่ดีที่สุดในการทำให้กราฟิกของคุณเคลื่อนไหว การฝัง HTML เป็นวิธีง่ายๆ ในการสร้างกราฟิกแบบกำหนดเองโดยไม่จำเป็นต้องใช้โปรแกรมแก้ไขกราฟิกแบบเวกเตอร์ . นอกเหนือจาก SVG แล้ว คุณสามารถสร้างกราฟิกแอนิเมชันได้อย่างง่ายดายโดยใช้สไปรต์ ตัวอย่างสไปรต์ Svg ตัวอย่างหนึ่งของสไปรต์ SVG คือการสร้างชุดไอคอนโซเชียลมีเดีย ไอคอนแต่ละรายการจะถูกบันทึกเป็นไฟล์ SVG แยกต่างหาก จากนั้นไฟล์หลักจะถูกสร้างขึ้นซึ่งจะอ้างอิงถึงไอคอนแต่ละรายการทั้งหมด เมื่อเปิดไฟล์หลักในเบราว์เซอร์ ไอคอนแต่ละรายการจะแสดงเป็นภาพเดียว แม้ว่าเราจะชอบแบบอักษรของไอคอน แต่ก็มีข้อเสียอยู่บ้าง การสร้าง Sprite นั้นง่ายโดยใช้ Gulp เราเชื่อมโยงปลั๊กอินเข้ากับไซต์ของเรา (เราติดตั้งทั่วโลก) ปลั๊กอิน gulpfile:: สามารถพบได้ที่นี่ ตั้งค่าไฟล์ ansvg ที่มีสัญลักษณ์แท็ก เมื่อเราชี้ตำแหน่งที่เราต้องการไอคอน จะต้องลดขนาดลง คำสั่งเนื้อหาเป็นเพียงวิธีการใส่เนื้อหาในตำแหน่งที่สะดวกยิ่งขึ้น คุณจะไม่สามารถดูสไตล์ที่ระบุผ่าน css ได้หากคุณลบแอตทริบิวต์สไตล์ การเติม และเส้นขีดออกจากไอคอน กรุณาทำงานให้เสร็จและเรียกใช้งาน คุณต้องแนบหน้า เรามีระบบเชื่อมต่อไอคอนผ่าน Sprite อยู่แล้ว แต่ยังเหลืออีกหนึ่งขั้นตอนที่ต้องดำเนินการ หากคุณส่งออกไอคอนจาก Illustrator คุณต้องเปิดใช้งานตารางพิกเซลก่อน แล้วจึงปรับขนาดและตำแหน่งของไอคอน ควรแปลงไอคอนจากเส้นขีดด้วย นี่คือสิ่งที่คุณต้องทำในเอกสารประกอบของ iconmoon ลดขนาดไฟล์และเพิ่มความเร็วด้วยสไปรต์ เมื่อคุณสร้างสไปรต์ คุณกำลังสร้างภาพเดียวที่จะใช้หลายครั้งในแอปพลิเคชันของคุณ ด้วยเหตุนี้ การใช้ Sprite เพื่อบันทึกขนาดไฟล์และเพิ่มความเร็วของแอปพลิเคชันของคุณจึงเป็นความคิดที่ดี ในการใช้ Sprite ในแอปพลิเคชัน React คุณต้องนำเข้ามันในโครงการของคุณก่อน สามารถทำได้โดยเพิ่มบรรทัดต่อไปนี้ในไฟล์ package.js ของโปรเจ็กต์ หากต้องการดำเนินการ ให้ไปที่ https://www.npmjs.com/package/react-svg คุณต้องสร้างอินสแตนซ์ของคลาส LetterSvg ชั้นเรียนนี้จะอภิปรายเกี่ยวกับตัวอักษร สี และขนาดของตัวอักษร อาร์กิวเมนต์ของคุณคือชื่อของตัวอักษรที่คุณต้องการใช้เป็นสไปรต์ของคุณ อาร์กิวเมนต์สีบอกเราว่าสไปรต์จะเป็นอย่างไร อาร์กิวเมนต์ขนาดถูกกำหนดเป็นพิกเซลของตัวอักษร สร้าง SVG Sprite โดยใช้คลาส LetterSvg เมื่อสร้างเสร็จแล้ว การใช้เมธอด useHref() ช่วยให้คุณทำได้ ต้องระบุ URL ของไฟล์ Sprite ในวิธีนี้ หากต้องการกำหนดสีและขนาดของสไปรต์ ให้ใช้เมธอด fill() และ width() หลังจากคุณตั้งค่าสไปรต์เสร็จแล้ว คุณสามารถใช้เมธอด addChild() เพื่อเพิ่มลงในแอปพลิเคชัน React ของคุณได้ คุณจะต้องเพิ่มชื่อองค์ประกอบในวิธีนี้ และต้องเป็นองค์ประกอบย่อยขององค์ประกอบ สุดท้าย คุณสามารถทำให้สไปรท์เคลื่อนไหวได้โดยใช้เมธอด animate() พารามิเตอร์สำหรับวิธีนี้คือระยะเวลาและการค่อยๆ เปลี่ยน เวลาที่ภาพเคลื่อนไหวจะเสร็จสิ้นจะพิจารณาจากระยะเวลาของภาพเคลื่อนไหว ประเภทของภาพเคลื่อนไหวจะระบุโดยพารามิเตอร์การค่อยๆ เปลี่ยน ภาพเคลื่อนไหวมีสามตัวเลือก: ค่าเริ่มต้น ลูกบาศก์เบซิเยร์ และภาพเคลื่อนไหว ในกรณีนี้ คุณสามารถเพิ่มสไปรต์ใหม่ลงในแอปพลิเคชัน React ของคุณเพื่อให้ไดนามิกมากขึ้น ต้องขอบคุณการเพิ่มเข้าไป เมื่อใช้สไปรต์ คุณสามารถเร่งกระบวนการพัฒนาอินเทอร์เฟซผู้ใช้ของแอปพลิเคชันได้Svg-sprite-loader หากคุณกำลังมองหาวิธีสร้างสไปรต์ SVG คุณอาจต้องการตรวจสอบ svg-sprite-loader ไลบรารีนี้ทำให้ง่ายต่อการสร้างและบำรุงรักษาสไปรต์ SVG ของคุณ และยังใช้งานได้ค่อนข้างง่ายอีกด้วย คู่มือการโยกย้ายสำหรับ Webpack 2.0 มีให้ใช้งานแล้ว สามารถพบได้ใน README ของสาขา v0 ตัวเลือกการกำหนดค่าสำหรับ webpack เป้าหมายถูกกำหนดโดยค่าเริ่มต้น หากคุณต้องการตั้งค่าการทำงานแบบกำหนดเอง ให้ใช้วิธีนี้เพื่อกำหนดพาธสำหรับโมดูลการใช้งานของคุณ ในตัวเลือก SpriteFilename คุณสามารถสร้างหลายสไปรต์สำหรับแต่ละกลุ่มโดยใช้รูปแบบ [ชื่อกลุ่ม] ฟังก์ชันแบบกำหนดเองที่ส่งคืนพาธสัมบูรณ์ไปยังไฟล์ SVG สามารถสร้างสไปรต์ได้หลากหลาย ขึ้นอยู่กับกฎของตัวโหลดที่รวมหรือจำกัดไว้ หากต้องการใช้สไปรต์ใน React หากต้องการใช้สไปรต์ใน React ก่อนอื่นเราต้องสร้างส่วนประกอบและส่งผ่าน รหัสสไปรท์เป็นแอตทริบิวต์ รหัสต่อไปนี้สร้างส่วนประกอบ LetterSVG อย่างง่ายที่ใช้รหัสสไปรต์เพื่อแสดงตัวอักษร