แปลง ICO เป็น SVG

นำไอคอน Windows หรือ favicon ใส่ลงในไฟล์ .svg สำหรับเครื่องมือที่รับเฉพาะ SVG พิกเซลของไอคอนจะยังคงเป็นพิกเซลเหมือนเดิม หน้านี้จึงแนะนำวิธีสร้างเส้นเวกเตอร์จริง หรือดึงออกมาเป็นไฟล์ PNG ขนาดใหญ่ขึ้นด้วย

หรือลากไฟล์ JPG, JPEG, JPE … มาวางที่นี่ ·

สูงสุด 95 MB ต่อไฟล์· ได้สูงสุด 20 ไฟล์· ลบหลังจาก 30 นาที

ผลลัพธ์

แปลงเป็น

ไฟล์จะถูกประมวลผลบนเซิร์ฟเวอร์ของเราและถูกลบหลังจาก 30 นาที

คุณภาพและสี

ปรับขนาดภาพผลลัพธ์

คงขนาดภาพเดิมไว้ หรือกำหนดด้านใดด้านหนึ่ง โดยระบบจะคงอัตราส่วนภาพไว้

ข้อมูลเมตาและโปรไฟล์สี

ปรับแนวภาพอัตโนมัติ

หมุนภาพตามข้อมูลการวางแนวใน EXIF เพื่อให้ภาพแสดงในแนวตั้งตรงในทุกโปรแกรม

ลบข้อมูลเมตา

ลบตำแหน่ง GPS ข้อมูลกล้อง และความคิดเห็นออก ส่วนโปรไฟล์สีสามารถเลือกเก็บไว้แยกต่างหากได้ด้านล่าง

คงโปรไฟล์สี

เก็บโปรไฟล์ ICC ที่ฝังอยู่ไว้ เพื่อให้สีถูกต้องหลังการแปลง

ปริภูมิสี

sRGB เหมาะสำหรับหน้าจอและเว็บไซต์ ควรคงค่าเดิมไว้สำหรับงานพิมพ์ ส่วนระดับสีเทาจะตัดสีออกทั้งหมด

ค่า DPI ในไฟล์

dpi

เป็นข้อมูลเมตาเท่านั้น ค่า 0 จะคงค่าเดิมไว้ เครื่องพิมพ์และบางเว็บไซต์จะอ่านค่านี้ แต่จะไม่เปลี่ยนขนาดภาพเป็นพิกเซล

วิธีใช้เครื่องมือนี้

1
อัปโหลดไฟล์ .ico
ไฟล์ favicon.ico จากเว็บไซต์ หรือไอคอนจากโปรแกรมบน Windows อัปโหลดได้สูงสุด 20 ไฟล์ต่อครั้ง
2
กด แปลงเป็น SVG
ภาพที่ใหญ่ที่สุดที่เก็บอยู่ใน ICO จะถูกใส่ไว้ในเอกสาร SVG โดยคงความโปร่งใสไว้ครบถ้วน
3
เลือกขั้นตอนถัดไปตามที่ต้องการ
ใช้ไฟล์ SVG ได้ทันที หรือนำไปแปลงเป็นเส้นพาธที่ขยายได้ หรือดึงเป็น PNG หากต้องการเพียงตัวภาพ

คำตอบ

แปลง ICO เป็น SVG แล้วไอคอนจะขยายได้ไหม

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

หน้านี้

SVG แบบห่อภาพ

บิตแมปที่ใหญ่ที่สุดของ ICO อยู่ในไฟล์ .svg

หน้าตาเหมือนไอคอนทุกประการ
คงความโปร่งใสไว้
ภาพเบลอเมื่อขยาย

แปลงเป็นเส้นพาธ

SVG แบบเส้นพาธ

แปลงขอบภาพเป็นเส้นพาธเวกเตอร์ด้วยตัวแปลงรูปเป็น SVG

ขยายได้ทุกขนาด
แก้ไขสีและรูปทรงได้
รายละเอียดเล็ก ๆ อาจถูกลดทอน

ดึงภาพ

PNG จาก ICO

ภาพไอคอนที่ใหญ่ที่สุดบันทึกเป็น PNG

เปิดได้ทุกที่
ไม่สูญเสียคุณภาพและโปร่งใส
ขนาดพิกเซลคงที่

แปลง ICO เป็น SVG: เป็นการห่อพิกเซลไว้ ไม่ใช่เวกเตอร์

ฟอร์แมต ICO มีมาตั้งแต่ Windows 1.0 ในปี 1985 และกลายเป็นฟอร์แมต favicon เมื่อ Internet Explorer 5 เริ่มค้นหา /favicon.ico ในปี 1999 ไฟล์เดียวเก็บบิตแมปสี่เหลี่ยมจัตุรัสหลายขนาด เพื่อให้ Windows และเบราว์เซอร์เลือกขนาดที่เหมาะสม ได้แก่ 16 px สำหรับแท็บเบราว์เซอร์ 32 หรือ 48 px สำหรับแถบงานและเดสก์ท็อป และตั้งแต่ Windows Vista มีภาพ 256 px ที่เก็บเป็นข้อมูล PNG แบบบีบอัด โครงสร้างนี้ไม่มีเส้นพาธ เส้นโค้ง หรือสีพื้นเลย

SVG เป็นฟอร์แมตของ W3C ตั้งแต่ปี 2001 เก็บเนื้อหาได้ทั้งรูปทรงเวกเตอร์และบิตแมปที่ฝังไว้ เมื่อแปลง ICO ผลลัพธ์ที่ตรงไปตรงมาที่สุดคือแบบหลัง SVG จะได้ความกว้างและความสูงของไอคอน พร้อมองค์ประกอบภาพหนึ่งชิ้นที่มีพิกเซลอยู่ จึงแสดงผลเหมือน ICO ทุกประการในเบราว์เซอร์ Figma หรือสไลด์ ซูมเข้าไปก็เห็นพิกเซลเดิม เพราะไม่มีการวาดใหม่

ขนาดไอคอนในไฟล์ ICO และเหตุผลที่ภาพขนาดใหญ่ที่สุดสำคัญ

1:1

16 × 16 px

favicon บนแท็บเบราว์เซอร์

เล็กเกินกว่าจะแปลงเป็นเส้นพาธได้ดี

1:1

32 × 32 px

แท็บความละเอียดสูง แถบงาน

ขนาดใหญ่สุดที่พบบ่อยของ favicon.ico

1:1

48 × 48 px

ไอคอนเดสก์ท็อป (Windows)

มีอยู่ในไอคอนโปรแกรมส่วนใหญ่

1:1

256 × 256 px

มุมมองไอคอนขนาดใหญ่

แหล่งที่ดีที่สุดสำหรับแปลงเป็นเส้นพาธหรือ PNG

ICO

ไอคอน Windows

ICO คือรูปแบบไอคอนของ Microsoft ที่ใช้กับไอคอนโปรแกรมใน Windows และไอคอน favicon ของเว็บไซต์ ไฟล์ .ico หนึ่งไฟล์เก็บภาพได้หลายขนาด เช่น 16×16, 32×32, 48×48 และ 256×256 พิกเซล เพื่อให้ระบบเลือกขนาดที่เหมาะที่สุด แต่ละภาพเก็บเป็นบิตแมปหรือข้อมูล PNG ได้ และรองรับพื้นหลังโปร่งใสแบบ alpha เต็มรูปแบบ ICO ไม่ได้มีไว้สำหรับภาพถ่ายหรืองานภาพขนาดใหญ่ เบราว์เซอร์ Windows และโปรแกรมแก้ไขไอคอนส่วนใหญ่อ่านไฟล์นี้ได้

การบีบอัด: แบบไม่สูญเสียข้อมูล
พื้นหลังโปร่งใส: ได้
ภาพเคลื่อนไหว: ไม่ได้
เปิดตัว: Microsoft

ตัวแปลงไฟล์ ICO

SVG

Scalable Vector Graphics

SVG เป็นรูปแบบเวกเตอร์ที่อิงกับ XML ซึ่ง W3C กำหนดเป็นมาตรฐานในปี 2001 แทนที่จะใช้พิกเซล จะอธิบายรูปทรง เส้นพาธ และข้อความ จึงคมชัดในทุกขนาด และมักมีขนาดเล็กมากสำหรับโลโก้และไอคอน รองรับพื้นหลังโปร่งใส การจัดสไตล์ด้วย CSS สคริปต์ และภาพเคลื่อนไหว และเบราว์เซอร์ทุกตัวแสดงผลได้โดยตรง SVG ไม่เหมาะกับภาพถ่าย และภาพประกอบที่ซับซ้อนอาจแสดงผลช้า Illustrator, Inkscape, Figma และเบราว์เซอร์เปิดและแก้ไขไฟล์นี้ได้

การบีบอัด: –
พื้นหลังโปร่งใส: ได้
ภาพเคลื่อนไหว: ได้
เปิดตัว: 2001 · W3C

ตัวแปลงไฟล์ SVG

คนค้นหา ICO เป็น SVG เมื่อโปรแกรมออกแบบ ไลบรารีไอคอน หรือเทมเพลตเว็บไซต์ต้องการ SVG แต่โลโก้ที่มีเหลืออยู่มีเพียง favicon หรือไอคอน Windows ซึ่งมักเป็นขั้นแรกก่อนทำเป็นเวกเตอร์

แปลงไอคอนให้เป็นเส้น SVG จริง

หากต้องการโลโก้ที่ขยายได้ SVG แบบห่อภาพเป็นได้แค่ขั้นตอนหนึ่งเท่านั้น ให้นำไอคอนไปผ่านตัวแปลงรูปเป็น SVG ซึ่งจะตามขอบของสีแล้วเขียนเป็นเส้นพาธที่ปรับขนาด เปลี่ยนสี และตัดได้ ผลลัพธ์ขึ้นกับขนาดต้นฉบับ ภาพ 256 px จากไอคอนโปรแกรมจะได้ผลดีกว่า favicon 16 px มาก บทความวิธีแปลง PNG เป็น SVG อธิบายวิธีเลือกจำนวนสีและทำให้เส้นโค้งเรียบ

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

คำถามเกี่ยวกับการแปลง ICO เป็น SVG

ไฟล์ ICO แปลงเป็น SVG แบบเวกเตอร์จริงได้หรือไม่

ไม่ได้ด้วยการแปลงไฟล์เพียงอย่างเดียว เพราะ ICO เก็บเฉพาะบิตแมปขนาด 16 × 16 ไปจนถึง 256 × 256 px จึงไม่มีรูปทรงให้ถ่ายโอนไปด้วย การจะได้เส้นพาธจริงต้องแปลงจากพิกเซล ซึ่งตัวแปลงรูปเป็น SVG ทำได้

ภาพขนาดใดในไฟล์ .ico จะถูกนำไปใส่ใน SVG

ใช้ภาพที่ใหญ่ที่สุด เพราะมีรายละเอียดมากที่สุด โดยทั่วไป favicon.ico ใหญ่สุดที่ 32 หรือ 48 px ส่วนไอคอนโปรแกรมบน Windows มักมีภาพขนาด 256 px รวมอยู่ด้วย

SVG ที่ได้ใช้เป็น favicon ของเว็บไซต์ได้หรือไม่

Chrome และ Firefox รองรับ favicon แบบ SVG แต่ SVG ที่มีเพียงบิตแมป 32 px ไม่ได้ดีกว่า ICO ที่คุณมีอยู่เดิม favicon แบบ SVG จะคุ้มค่าเมื่อมีเส้นพาธจริงที่ยังคมชัดบนหน้าจอความละเอียดสูง

ทำไมการแปลง favicon เป็นเวกเตอร์จึงได้รูปทรงเป็นก้อน ๆ

ไอคอน 32 px มีเพียง 1,024 พิกเซล และการแปลงเป็นเส้นพาธต้องเดาเส้นโค้งจากขอบภาพ ยิ่งพิกเซลน้อย ผลที่เดาก็ยิ่งหยาบ หากต้องการเส้นขอบที่เรียบคม ให้ใช้ภาพ 256 px จากไอคอนของ Windows หรือหาโลโก้ต้นฉบับ

พื้นหลังโปร่งใสของไอคอนยังคงอยู่หรือไม่

ได้ ภาพใน ICO มีช่องอัลฟา และ SVG คงช่องนี้ไว้ ไอคอนจึงวางบนพื้นหลังใดก็ได้ของหน้าเว็บหรือโปรแกรมออกแบบ

เปลี่ยนสีไอคอนใน Inkscape หรือ Figma ภายหลังได้หรือไม่

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