วิธีสร้างฟอนต์ไอคอนจากไฟล์ SVG

ฟอนต์ไอคอนคือฟอนต์ที่มีไอคอนเวกเตอร์แทนอักขระที่เป็นตัวอักษรและตัวเลขคละกัน แบบอักษรของไอคอนสามารถใช้กับเว็บแอปพลิเคชัน เว็บไซต์ หรือลายเซ็นอีเมลได้ การสร้างแบบอักษรไอคอนจากไฟล์ SVG เป็นกระบวนการง่ายๆ ที่สามารถทำได้ด้วยเครื่องมือที่หลากหลาย มีบางสิ่งที่ต้องพิจารณาเมื่อสร้างฟอนต์ไอคอนจากไฟล์ SVG ประการแรก ไอคอนควรได้รับการออกแบบในลักษณะที่สอดคล้องกัน สิ่งนี้จะทำให้ง่ายต่อการสร้างชุดไอคอนที่สามารถใช้ร่วมกันได้ ประการที่สอง ควรบันทึกไอคอนเป็นไฟล์ SVG แต่ละไฟล์ แต่ละไอคอนควรมีไฟล์ของตัวเองเพื่อให้สามารถแก้ไขและปรับขนาดได้ง่าย เมื่อไอคอนพร้อมแล้ว ก็สามารถแปลงเป็นฟอนต์โดยใช้เครื่องมืออย่าง @font-face Generator ของ Font Squirrel เครื่องมือนี้จะใช้ไฟล์ SVG และสร้างโค้ดที่จำเป็นเพื่อใช้ไอคอนเป็นแบบอักษร โค้ดนั้นสามารถเพิ่มลงในเว็บเพจหรือลายเซ็นอีเมลได้ แบบอักษรของไอคอนเป็นวิธีที่ดีในการเพิ่มไอคอนเวกเตอร์ลงในหน้าเว็บหรือลายเซ็นอีเมล สร้างและใช้งานได้ง่าย ทั้งยังมีสไตล์ที่สอดคล้องกันซึ่งสามารถใช้กับไอคอนอื่นๆ ได้หลากหลาย

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

ชื่ออาร์ตบอร์ดแต่ละชื่อใช้เพื่อตั้งชื่อคลาส CSS ซึ่งจะแสดงในฟอนต์ไอคอน คุณต้องลากไอคอนที่เลือกลงใน SVG ชุดใหม่ก่อน ขั้นตอนที่สองคือการเลือกไอคอนทั้งหมดที่คุณต้องการรวมไว้ในแบบอักษร ในขั้นตอนที่ 3 คุณจะต้องสร้างแบบอักษร แต่ละไอคอนควรเปลี่ยนชื่อและควรกำหนดอักขระ Unicode ในขั้นตอนที่ 4 (ไม่บังคับ) เป็นไปได้ที่จะดาวน์โหลดไฟล์ที่สร้างขึ้น คุณได้รับแบบอักษรไอคอนแวบแรกของคุณแล้ว

การใช้แบบอักษรของไอคอนเป็นวิธีที่ยอดเยี่ยมในการรวมไอคอนเข้ากับเว็บไซต์ของคุณโดยไม่ต้องใช้เครื่องมือแก้ไขเวกเตอร์ มีความเป็นไปได้เกือบไร้ขีดจำกัดกับ CSS ด้วย Adobe Illustrator คุณสามารถติดตามไอคอนทั้งหมดของคุณได้ในที่เดียว แอปนี้ยังสามารถใช้เปลี่ยนรูปลักษณ์ของไอคอนและส่งออกใหม่ได้อย่างรวดเร็วและง่ายดาย

คุณสามารถใช้แท็ก svg> */svg> เพื่อเขียน ภาพ SVG ลงในเอกสาร HTML ได้โดยตรง ในการดำเนินการดังกล่าว ให้เปิดโค้ด VS หรือ IDE ที่คุณต้องการ คัดลอกและวางโค้ดลงในองค์ประกอบเนื้อหาในเอกสาร HTML ของคุณ จากนั้นใช้รูปภาพ SVG ในโค้ด VS หรือ IDE ของคุณ หากทุกอย่างราบรื่น หน้าเว็บของคุณควรมีลักษณะเหมือนกับที่แสดงด้านล่างทุกประการ

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

เนื่องจากรูปแบบสัญลักษณ์เป็นไปตามมาตรฐาน Scalable Vector Graphics (SVG) จึงอาจมีสี เอฟเฟ็กต์การไล่ระดับสี หรือรูปแบบที่ฝังอยู่ในอักขระได้หลากหลาย นอกจากนี้ยังช่วยให้สร้างสรรค์ได้มากขึ้นในขณะที่ยังคงฟังก์ชันเดียวกันกับฟอนต์ OpenType ทั่วไป

ก่อนอื่นคุณต้องรวมองค์ประกอบชื่อเรื่อง> เพื่อทำให้ aria-describedby ใช้งานได้ง่ายขึ้น เมื่อใช้ *title* เป็นชื่อเรื่อง คุณควรกด *keybar หลัง *svg* และก่อน *path* เสมอ ตอนนี้ต้องป้อนบรรทัด *svg's* aria-describedby มีลิงก์ไปยังแอตทริบิวต์ aria นี้ในหน้าเกี่ยวกับคำอธิบาย aria

คุณสามารถเปลี่ยน Svg เป็นแบบอักษรได้หรือไม่?

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

ในการกำหนด แบบอักษร SVG คุณต้องกำหนดองค์ประกอบ >font> ก่อน คุณสามารถกำหนดคุณสมบัติพื้นฐานของฟอนต์ขั้นสุดท้ายได้ เช่น น้ำหนักและสไตล์ ระบุสิ่งที่ควรแสดงหากไม่พบสัญลักษณ์ในแบบอักษร หากตัวเรนเดอร์มีฟอนต์ในเครื่องชื่อ Super Sans Bold ก็ควรใช้ฟอนต์นั้นแทนฟอนต์ในเครื่องที่พบในตัวอย่างด้านบน จุดรหัสที่แสดงโดยสัญลักษณ์นี้มีแอตทริบิวต์ที่สำคัญที่สุดคือ ยูนิโค้ด สามารถใช้แอตทริบิวต์ d สำหรับร่ายมนตร์ที่เรียบง่ายขึ้น โดยกำหนดรูปร่างในลักษณะเดียวกับที่เส้นทาง SVG มาตรฐานทำ นอกเหนือจากองค์ประกอบเพิ่มเติมสองอย่างที่สามารถเพิ่มได้ ฟอนต์ยังแบ่งออกได้เป็นสองประเภท: > HKern> และ > von der Erde ทั้งสองอย่างนี้เป็นการอ้างอิงถึงอักขระอย่างน้อยสองตัว (แอตทริบิวต์ u1 และ u2) โดยใช้ k เพื่อกำหนดระยะห่างระหว่างอักขระเหล่านั้น

ฉันจะสร้างไอคอนจาก Svg ได้อย่างไร

หากต้องการสร้างไอคอนจาก svg คุณต้องใช้โปรแกรมแก้ไขเวกเตอร์ เช่น Adobe Illustrator เมื่อคุณเปิดไฟล์ svg ใน Illustrator แล้ว ให้เลือกเครื่องมือ "ไอคอน" จากแถบเครื่องมือ จากนั้นคลิกที่พื้นที่ของ svg ที่คุณต้องการเปลี่ยนเป็นไอคอน หน้าต่างใหม่จะปรากฏขึ้นซึ่งคุณสามารถเลือกขนาดและสีของไอคอนได้ สุดท้าย คลิก "ส่งออก" เพื่อบันทึกไอคอนของคุณเป็นไฟล์ PNG

นับตั้งแต่มีการเปิดตัวเครื่องมือออนไลน์อย่าง Icomoon หรือ Fontello กระบวนการสร้างแบบอักษรบนเว็บก็ง่ายขึ้นมาก การใช้กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ ซึ่งเป็นคุณลักษณะใหม่ใน HTML5 ทำให้เราสามารถสร้างไอคอนแบบไดนามิกในหน้าเว็บได้แล้ว มีทางเลือกง่ายๆ หลายอย่างที่คุณสามารถใช้เพื่อให้การสนับสนุน Explorer 8 ตัวระบุแฟรกเมนต์เป็นคุณลักษณะของ SVG ที่มีอยู่ในนั้น เราสามารถระบุแฟรกเมนต์ได้โดยใช้ข้อมูลจำเพาะมุมมอง SVG หรือไฟล์ an.sg ID ขององค์ประกอบ SVG ค่าเดียวที่คุณเห็นคือค่าที่สร้างโดยสไปรต์ตัวหมากรุก (จากวิกิพีเดียคอมมอนส์) ในรูปแบบด้านล่าง

เทคนิคนี้ทำงานได้ดีกับ Firefox, Chrome, Safari (เดสก์ท็อป) และ Opera โดยใช้แท็ก img ตามที่ระบุไว้ก่อนหน้านี้ ไฟล์ SVG ภายนอก สามารถใช้สร้าง CSS sprite ได้ วิธีนี้เหมาะสำหรับใช้ในการผลิตและพร้อมใช้งานได้ทันที เบราว์เซอร์หลักทั้งหมด (รวมถึง IE8) ได้รับการทดสอบและใช้งานได้อย่างสมบูรณ์ แท็ก >ใช้> และ > ไอคอนใช้เพื่อแสดงไอคอน หากคุณต้องการสร้างคอลเลกชันของแท็กสัญลักษณ์ด้วยตนเอง ให้ใช้ปลั๊กอิน Grunt (Google สำหรับการรวม Grunt SVG) หรือปลั๊กอิน Icomoon เข้ากันได้กับเบราว์เซอร์หลักทั้งหมด แต่ไม่สามารถทำงานร่วมกับ IE9 + ในทางกลับกันสามารถใช้สคริปต์ VG4everybody ของ Jonathan Neal เพื่อแก้ปัญหานี้ได้

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

เหตุใดจึงต้องใช้ Svgs สำหรับไอคอนเว็บไซต์ของคุณ

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

ไฟล์ Svg สามารถใช้เป็นไอคอนได้หรือไม่?

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

eXtensible Markup Language (XML) ใช้เพื่อสร้าง Scalable Vector Graphics (SVG) ซึ่งเป็นรูปแบบภาพเวกเตอร์ที่สามารถวาดโดยใช้ XML SVG ไม่ใช่รูปภาพขนาดคงที่ แต่เป็นบล็อกโค้ด XML ที่แสดงและแสดงผลโดยตรงในเบราว์เซอร์ การกระทำและข้อมูลสามารถสื่อสารได้อย่างรวดเร็วและแม่นยำด้วยรูปภาพขนาดเล็กเหล่านี้แทนที่จะเป็นคำพูด เมื่อ Tamagotchis, iMacs และ Palm Pilots ปรากฏตัวครั้งแรกในบ้านของเราในช่วงเวลาเดียวกัน รูปแบบไฟล์ภาพ SVG ก็ถูกนำมาใช้บนเว็บ เว็บเบราว์เซอร์ส่วนใหญ่ไม่สนับสนุนหรือตั้งใจที่จะสนับสนุน รูปแบบ SVG จนถึงปี 2017 เมื่อเว็บเบราว์เซอร์ SVG ตัวแรกมาถึง ไม่มีปัญหาในการแสดงผล เนื่องจากเป็นไฟล์เวกเตอร์ คุณจะไม่มีปัญหาในการปรับขนาดเมื่อใช้ SVG หรือแบบอักษรบนเว็บแบบไอคอน

ชุดไอคอนที่สร้างไว้ล่วงหน้ามีตัวเลือกการออกแบบที่จำกัดมากขึ้น คุณยังสามารถใช้ SVG ได้หากต้องการทำให้มีความหลากหลายมากขึ้น สามารถสร้าง ไอคอน sveiw ที่ทำด้วยมือหรือไอคอนที่ใช้เครื่องจักรได้ กระดานวาดภาพเสมือนใช้สำหรับวาดไอคอนด้วยโปรแกรมภาพเวกเตอร์ จากนั้น คุณสามารถส่งออกไฟล์ .svg ของคุณเป็นไฟล์ ISO รายการ Evernote นี้ยังมีไอคอน SVG สำเร็จรูปอีกด้วย ขนาดของรูปร่างถูกกำหนดโดยความกว้างและความสูง ในขณะที่ตำแหน่งถูกกำหนดโดย x และ y นอกจากนี้ ถ้าคุณต้องการ คุณสามารถกำหนดสไตล์ในไฟล์ CSS สไตล์ชีตแยกต่างหากสำหรับชื่อคลาส หรือหากต้องการ คุณสามารถตั้งค่าด้วยองค์ประกอบ svg orrect ภายในตัวสร้าง Ycode แบบไม่ใช้โค้ด คุณสามารถเปลี่ยนสีพื้นหลังสำหรับไอคอนเหล่านี้ได้

PNG และ SVG เป็นตัวเลือกที่ดีที่สุดสำหรับโลโก้และกราฟิก เนื่องจากทั้งสองรูปแบบรองรับความโปร่งใส จึงเหมาะสำหรับกราฟิกออนไลน์ ไฟล์ PNG เหมาะที่สุดสำหรับไฟล์โปร่งใสแบบแรสเตอร์ ในขณะที่ไฟล์ SVG นั้นดีกว่าสำหรับไฟล์แบบเวกเตอร์

ข้อดีและข้อเสียของไอคอน Svg

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

แปลง Svg เป็นไอคอนแบบอักษรออนไลน์

มีหลายวิธีในการแปลง svg เป็น ไอคอนแบบอักษร ออนไลน์ วิธีหนึ่งคือการใช้เครื่องมือแปลงออนไลน์ อีกวิธีคือใช้โปรแกรมสร้างฟอนต์ เช่น FontForge

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

สร้างแบบอักษรจาก Svg

มีสองสามวิธีในการสร้างแบบอักษรจากไฟล์ svg วิธีหนึ่งคือการใช้โปรแกรมสร้างฟอนต์เช่น FontForge อีกวิธีหนึ่งคือการใช้บริการเช่น Font Squirrel

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

เมื่อคุณ Glyphs คุณสามารถส่งออกฟอนต์สีที่มีอยู่ในรูปแบบต่างๆ รวมถึง SVG ร่ายมนตร์ และตรวจสอบให้แน่ใจว่าคุณมีเลเยอร์ Color Palette อย่างน้อยหนึ่งเลเยอร์ในไฟล์ นิพจน์ 'เลเยอร์สี' ถูกใช้ในสองวิธีโดย Glyphs: เป็นเลเยอร์ CPAL/COLR สไตล์ Microsoft หรือเป็นเลเยอร์สีดั้งเดิม ขณะนี้สามารถนำเข้าและส่งออก SVG จากภายใน Glyphs ผ่าน DrawBot คุณสามารถส่งออกอินสแตนซ์จากไฟล์ได้โดยการตั้งค่าใน ข้อมูลฟอนต์ > ส่งออก จากนั้นเพิ่มพารามิเตอร์ที่กำหนดเอง เลเยอร์สี ไปยัง SVG โปรแกรมเหล่านี้ระบุว่าตารางสีใดควรสร้างและไม่ควรสร้าง และควรรวมตารางสีใดไว้ในฟอนต์ OpenType สามารถพบได้ทั้งใน Firefox และ Microsoft Edge แม้ว่าแอพหรือระบบจะรองรับบางอย่าง แต่ก็ไม่ได้หมายความว่ารองรับอย่างสมบูรณ์ เมื่อไปที่ข้อมูลจำเพาะและโค้ดตัวอย่าง คุณจะได้เรียนรู้มากมายเกี่ยวกับ SVG และความเป็นไปได้มากมาย