การเตรียม SVG สำหรับการใช้งานบนเว็บเป็นกระบวนการที่ง่ายมาก ไม่ซับซ้อนไปกว่าการส่งออก JPEG หรือ PNG ใช้โปรแกรมแก้ไขกราฟิกใดก็ได้ที่คุณคุ้นเคย (Illustrator, Sketch, Inkscape [ฟรี] ฯลฯ [หรือแม้แต่ Photoshop หากคุณใช้เลเยอร์รูปร่าง]) ตามขนาดภาพที่คุณวางแผนจะใช้ ปกติฉันทำงานใน Illustrator ดังนั้นฉันจะอธิบายวิธีเตรียมไฟล์ในโปรแกรมนั้นบางวิธี แต่โดยทั่วไปแล้วใช้ได้กับทุกโปรแกรม คุณอาจต้องการแปลงข้อความของคุณเป็นเส้นโค้ง เนื่องจากแบบอักษรมักจะแสดงผลไม่ถูกต้อง เว้นแต่คุณจะวางแผนจัดสไตล์ด้วยแบบอักษรเว็บที่ใช้บนหน้าเว็บ (ซึ่งเป็นไปได้!) ไม่ใช่ความคิดที่ดีที่จะแปลงวัตถุทั้งหมดให้เป็นรูปร่างเดียว โดยเฉพาะอย่างยิ่งหากคุณมีเส้นขีดที่ต้องแก้ไขบนหน้า โดยเฉพาะอย่างยิ่งเนื่องจากการแปลงวัตถุมักจะไม่ได้ลดขนาดไฟล์ ชื่อใดๆ ที่กำหนดให้กับกลุ่มหรือเลเยอร์จะถูกเพิ่มลงใน SVG เป็นรหัสองค์ประกอบ วิธีนี้ค่อนข้างสะดวกสำหรับการจัดสไตล์ แต่จะเพิ่มขนาดไฟล์โดยรวมเล็กน้อย

ก่อนที่คุณจะส่งออก คุณต้องตรวจสอบว่ารูปภาพทั้งหมดอยู่ในตารางพิกเซลจำนวนเต็ม (เช่น ไม่ใช่ 23.3px × 86.8px) มิฉะนั้น เป็นไปได้มากว่าภาพจะมีความชัดเจนไม่เพียงพอและบางส่วนของภาพจะถูกตัดออกไป ใน Illustrator สามารถทำได้ดังนี้: Object > Artboards > Fit to Artwork Bounds จากนั้นคลิกบันทึกเป็นและเลือก SVG และคงการตั้งค่าเริ่มต้นไว้ มีการเพิ่มประสิทธิภาพเล็กๆ น้อยๆ ที่เราสามารถทำได้ที่นี่ แต่มันไม่คุ้มค่าเลย เนื่องจากเราจะใช้เทคนิคการปรับปรุงต่างๆ ในภายหลัง ดังนั้นเราจะไม่เสียเวลากับการปรับแต่งเหล่านั้นในตอนนี้

(ดูการเพิ่มประสิทธิภาพ)

เพื่อให้บรรลุ ขนาดที่เล็กที่สุด SVG มันจะสมเหตุสมผลที่จะลบทุกสิ่งที่ไม่จำเป็นออกไป ที่มีชื่อเสียงที่สุดและ โปรแกรมที่มีประโยชน์(อย่างน้อยฉันก็คิดอย่างนั้น) สำหรับการประมวลผล SVG มันคือ SVGO มันจะลบโค้ดที่ไม่จำเป็นทั้งหมด แต่! โปรดใช้ความระมัดระวังเมื่อใช้โปรแกรมนี้หากคุณวางแผนที่จะจัดการ SVG เมื่อใด ความช่วยเหลือเกี่ยวกับ CSS/ JS เนื่องจากอาจล้างโค้ดมากเกินไป ทำให้การเปลี่ยนแปลงในอนาคตทำได้ยาก SVGO ยังสะดวกตรงที่สามารถรวมไว้ในกระบวนการสร้างโปรเจ็กต์โดยอัตโนมัติ แต่คุณสามารถใช้ GUI ได้หากต้องการ

เมื่อเข้าใจรายละเอียดเพิ่มเติมเกี่ยวกับการกำจัดสิ่งที่ไม่จำเป็นทั้งหมดอย่างถูกต้อง เราก็สามารถทำอย่างอื่นได้ โปรแกรมแก้ไขกราฟิก- ขั้นแรก คุณต้องแน่ใจว่าคุณใช้เส้นทาง/รูปร่างน้อยที่สุดเท่าที่จะเป็นไปได้ รวมถึงจุดบนเส้นทางเหล่านั้น คุณสามารถรวมและลดความซับซ้อนของทุกสิ่งที่สามารถทำให้ง่ายขึ้น และลบจุดที่ไม่จำเป็นทั้งหมดออก Illustrator มีปลั๊กอิน VectorScribe พร้อม Smart Remove Brush Tool ที่จะช่วยคุณลบจุดต่างๆ ในขณะที่ยังคงรูปร่างโดยรวมไว้เหมือนเดิม

การเพิ่มประสิทธิภาพเบื้องต้น

Smart Remove Brush Tool ลบจุดออก

ต่อไปเราจะขยายภาพ ใน Illustrator จะมีประโยชน์ในการเปิด View > Pixel Preview และตรวจสอบว่าโครงร่างถูกวางตำแหน่งอย่างไร อาจต้องใช้เวลาเล็กน้อยในการวางโครงร่างบนตาราง แต่ความพยายามจะได้ผลและส่งผลให้ได้ภาพที่ดูสะอาดตายิ่งขึ้น (ควรใส่ใจกับสิ่งนี้ล่วงหน้า)

ชี้ออกจากกริด

จัดตำแหน่งให้เป็นตาราง

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

สุดท้ายแต่ไม่ท้ายสุด สิ่งที่มักถูกลืมก็คือการเปิดใช้งานการบีบอัด gzip ของ SVG บนไซต์ของคุณในไฟล์ .htaccess

AddType image/svg+xml svg svgz AddOutputFilterByType DEFLATE "image/svg+xml" \ "text/css" \ "text/html" \ "text/javascript" ... ฯลฯ

เพื่อเป็นตัวอย่างว่าเทคนิคนี้มีประสิทธิภาพเพียงใด ฉันจะใช้โลโก้ Breaking Borders ดั้งเดิมและปรับให้เหมาะสมด้วยวิธีนี้: เพิ่มขนาดตามที่ควรจะเป็น; ฉันจะจัดรูปทรงตามลำดับ ฉันจะลบคะแนนให้ได้มากที่สุด ย้ายจุดตามพิกเซลจำนวนเต็ม ฉันจะย้ายพื้นที่ที่ทับซ้อนกันทั้งหมดแล้วส่งทั้งหมดไปที่ SVGO

เป็นผลให้ขนาดไฟล์เล็กลง ~71% (และเล็กลง ~83% เมื่อบีบอัด)

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

เราเขียนว่าไอคอนบนเว็บไซต์เหล่านี้ฟรี แต่ยังคงคำนึงถึงเงื่อนไขการดาวน์โหลดเนื่องจากสามารถเปลี่ยนแปลงได้ตลอดเวลา

Blugraphic – ตัวเลือกไอคอน PSD, PNG และเวกเตอร์ การค้นหานั้นจำกัดอยู่ที่แท็ก แต่คุณสามารถสมัครรับจดหมายข่าวและรับรายสัปดาห์ได้ เลือกฟรีทางอีเมล

Icon Shock - ไอคอนฟรีนับพันสำหรับ ของใช้ส่วนตัว- หากต้องการใช้รูปภาพในโครงการเชิงพาณิชย์ คุณต้องชำระเงินแบบครั้งเดียว

CSS Author นำเสนอไอคอนฟรีที่ดีที่สุดบนเว็บทุกสัปดาห์

ต้องการไอคอนสดหรือไม่? Creative Tail มีชุดอุปกรณ์ที่คุณจะไม่พบที่อื่น

ดาวน์โหลดฟรีทั้งหมดให้การค้นหาที่ง่ายดายและการดาวน์โหลดโดยตรงของ PSD, PNG และเวกเตอร์

Ego Icons มีไอคอนพรีเมียมมากกว่า 1,500 ไอคอนและไอคอนเวกเตอร์ฟรี 100 ไอคอน เยี่ยมชมไซต์ย่อยด้วยการคลิกที่ปุ่มแถบนำทางด้านบน

AlienValley นำเสนอไอคอนคุณภาพสูงมากมายเพื่อแลกกับที่อยู่อีเมลของคุณ

Dreamstale มอบไอคอนพรีเมียมที่ยอดเยี่ยมฟรีพร้อมการระบุแหล่งที่มาให้กับคุณ

ดาวน์โหลดฟรี 1001 รายการเชี่ยวชาญเรื่องไอคอนแบนที่มีตัวเลือกที่สวยงามและแปลกตามากมาย

บน Pixeden คุณสามารถค้นหาไอคอนได้หลายขนาด มีให้เลือกหลากหลายตั้งแต่ 16x16 ถึง 512x512 ในรูปแบบ PNG

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

Iconmonstr มีไอคอนหลายขนาดโดยไม่ต้องระบุแหล่งที่มา

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

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

ตัวอย่างเช่น นี่คือสไปรต์ SVG หนึ่งตัวใน 4 ขนาดที่แตกต่างกัน, ต้นฉบับ - 32px:

SVG ทำงานได้ดีและเหมาะอย่างยิ่งสำหรับใช้ในรูปแบบที่ตอบสนอง

คุณสามารถใช้ไอคอนสำหรับการออกแบบจากชุดสำเร็จรูปหรือวาดของคุณเอง

ชุดไอคอนจำนวนมากในหัวข้อต่างๆ แนะนำให้แทรกไอคอนที่โหลดลงใน HTML โดยใช้ use

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

คอลเลกชันขนาดใหญ่ ไอคอนแบ่งออกเป็นหมวดหมู่ได้อย่างสะดวก ไอคอนที่เลือกสามารถดาวน์โหลดได้ในแต่ละรูปแบบ (แบบอักษร, SVG, PNG) หรือดาวน์โหลดทั้งหมดพร้อมกัน

หากต้องการสร้างชุดไอคอนของคุณเอง คุณจะต้องมีโปรแกรมแก้ไขเวกเตอร์:

• Adobe Illustrator ดีที่สุดในความคิดของฉัน RUB 599/เดือน ซึ่งเป็นส่วนหนึ่งของการสมัครสมาชิก Creative Cloud
• Inkscape เป็นบริการฟรีและไม่เป็นมิตรต่อผู้ใช้มากนัก
• Sketch - สำหรับ Mac OS ราคา 79.99 ดอลลาร์ มีปัญหาบางอย่างกับ vectorization ของลายเส้น แต่โดยทั่วไปค่อนข้างสะดวก

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

grunt-svgmin - งานสำหรับ Grunt โดยใช้ svgo ในกรณีนี้ ไฟล์ต่างๆ จะถูกนำมาจากโฟลเดอร์ต้นทาง ปรับให้เหมาะสม และจัดเก็บไว้ในโฟลเดอร์ผลลัพธ์ สะดวกมาก.

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

เมื่อใช้แบบอักษร คุณสามารถสร้างไม่เพียงแต่ไอคอนสีเดียว แต่ยังสร้างไอคอนหลายสีได้ด้วย

คุณสามารถสร้างแบบอักษรของคุณเองได้บนเว็บไซต์ icomoon.io/app/ ลำดับการกระทำโดยประมาณ:

นอกจากแบบอักษรในสี่รูปแบบ (.woff, .svg, .ttf, .eot) แล้ว ยังมีการดาวน์โหลด CSS และไฟล์สาธิตอีกด้วย

ฟอนต์แบบฝังทำงานได้แม้ใน IE 8 แต่มีปัญหาการสนับสนุนที่ไม่คาดคิดในเบราว์เซอร์รุ่นใหม่บางรุ่น โอเปร่ามินิไม่รองรับแบบอักษรที่กำหนดเองเลย Firefox ต้องใช้คาถาสำหรับเซิร์ฟเวอร์ที่มีแบบอักษรนั้นอยู่ (แก้ไขโดยใช้ base64) Chrome สามารถยกเลิกการโหลดแบบอักษรหากคุณเปิดแท็บทิ้งไว้เป็นเวลานาน:

นอกจากนี้ใน Chrome บน Windows7 หน้าเว็บที่มีแบบอักษรฝังอาจค้างเมื่อเปิดและในเบราว์เซอร์อื่นบางรายการ ทุกสิ่งอาจปรากฏขึ้นแทนไอคอน:

รูปภาพจากบทความของ Chris Coher Icon System พร้อม SVG Sprites ฉันเคยเห็นอักษรอียิปต์โบราณในที่เดียวกัน แต่ตอนนี้เป็น SVG ดังนั้นฉันจึงไม่สามารถจับภาพหน้าจอได้ อย่างไรก็ตาม CSS-tricks ใช้ SVG ในการออกแบบใหม่อย่างจริงจังและนักพัฒนา Codepen ก็ละทิ้งการใช้แบบอักษรของไอคอนเพื่อสนับสนุน SVG ในการออกแบบตัวแก้ไขใหม่

แม้จะใช้งานง่าย แต่ก็มีปัญหากับการรองรับแบบอักษร ในขณะนี้บังคับให้คุณเลือกไอคอน SVG

ฉันหวังว่าในอนาคตแบบอักษรที่ฝังไว้จะได้รับการรองรับที่ดีขึ้น

วิธีต่างๆ ในการแทรก SVG ลงในหน้ามีอะไรบ้าง

ข้อดี:

• รหัสที่อ่านได้สั้น
• รูปภาพถูกแคช;

จุดด้อย:

• ร้องขอไปยังเซิร์ฟเวอร์
• ใน Operas รุ่นเก่าการรองรับ SVG พื้นหลังนั้นแปลก: ปัญหาอาจเกิดขึ้นเมื่อเพิ่มเฟรมให้กับองค์ประกอบที่มีพื้นหลัง SVG และใน Opera Mini เฉพาะพื้นหลังที่ไม่มีการทำงานของ viewBox
• ไอคอนในสไปรท์ไม่พร้อมใช้งานสำหรับสไตล์เพจ
• สไปรท์ขนาดใหญ่อาจทำให้เกิดปัญหาด้านประสิทธิภาพได้

ข้อดี:

• ไม่มีการร้องขอไปยังเซิร์ฟเวอร์
• รองรับเบราว์เซอร์ที่ดี: ทุกอย่างยกเว้น Opera บน Presto และ IE รุ่นเก่า

จุดด้อย:

• รูปภาพไม่ได้ถูกแคชและถูกเรนเดอร์ใหม่ทุกครั้ง
• เส้นยาวใน CSS;
• ไม่สามารถอ่านได้: ไม่ชัดเจนจากโค้ดว่ามีอะไรบ้าง
• ภาพที่เข้ารหัสอาจมีน้ำหนักมากกว่าภาพต้นฉบับ
• จำเป็นต้องมีเครื่องมือเพิ่มเติมสำหรับการเข้ารหัส/ถอดรหัส
• ไม่มีไอคอนสำหรับสไตล์เพจ