เมื่อสร้างเว็บไซต์ ผู้ออกแบบเว็บไซต์ต้องคำนึงถึง สี่ประเด็นหลัก คิดเกี่ยวกับเลย์เอาต์และการออกแบบภาพของเว็บ the ข้อความ รูปภาพ สี และแบบอักษร พนักงาน.
ใน XNUMX ประเด็นนี้ ที่เราจะให้ความสำคัญที่สุดในโพสต์นี้ก็คือภาพครับ เนื่องจากเราจะพูดถึง วิธีสร้างไฟล์ svg เนื่องจากเป็นสิ่งสำคัญมากที่จะต้องคำนึงถึงคุณภาพของภาพที่คุณใช้งาน
การรักษาด้วยไฟล์ SVG ได้เพิ่มขึ้นโดยผู้เชี่ยวชาญ และไม่ใช่มืออาชีพในโลกแห่งการออกแบบ
ไฟล์ SVG คืออะไร?
SVG เป็นตัวย่อในภาษาอังกฤษสำหรับ Scalabe Vector Graphics ในภาษาสเปน Scalable Vector Graphics มันเป็นเรื่องของ รูปแบบเปิดและฟรี ด้วยการสร้างกราฟิก 2D สองมิติ
ต่างจากรูปแบบภาพอื่นๆ เช่น JPG หรือ PNG SVG เป็นรูปแบบที่ปรับขนาดได้ไม่ว่าคุณจะต้องการเพิ่มขนาดเท่าไรก็ตาม เนื่องจากคุณภาพของภาพจะยังคงอยู่ เป็นรูปแบบที่ใช้มากที่สุดในหน้าเว็บเพื่อวางกราฟิกหรือภาพเวกเตอร์
ทำไมเราจึงควรใช้ SVG?
ด้วยรูปแบบประเภทนี้ ภาพเวกเตอร์จะรักษาคุณภาพสูง โดยไม่คำนึงถึงขนาดและความละเอียดของภาพ ในทางตรงกันข้าม รูปภาพที่ประกอบด้วยบิตแมปซึ่งประกอบด้วยพิกเซล จะสูญเสียคุณภาพหากปรับขนาด รูปแบบ SVG ถูกกำหนดโดยความเบาและความอเนกประสงค์
อีกประเด็นหนึ่งที่สนับสนุนการใช้รูปแบบนี้คือขนาดที่เล็ก กล่าวคือ ต้องขอบคุณสิ่งนี้ เพิ่มความเร็วในการโหลดหน้าที่พวกเขาอยู่. รูปภาพเหล่านี้สร้างโดยเบราว์เซอร์ ซึ่งช่วยลดการโหลดและการใช้บนเซิร์ฟเวอร์
นอกจากนี้ ยังสามารถ สร้างภาพ SVG แบบเคลื่อนไหว เพื่อให้เว็บไซต์ของเรามีความใกล้ชิดและดึงดูดความสนใจของผู้ชมที่เข้าชม
SVG เป็นรูปแบบเปิด นั่นคือ อาจได้รับการปรับปรุงและปรับปรุง. นอกจากนี้ ไฟล์ SVG สามารถแก้ไขได้ด้วยโปรแกรมแก้ไขเวกเตอร์ เช่น Adobe Illustartor โดยไม่สูญเสียคุณภาพในการแสดงผล สามารถดูได้บนอุปกรณ์ใดก็ได้ นอกจากนี้ยังช่วยให้เราพิมพ์ได้โดยไม่สูญเสียคุณภาพ
วิธีสร้างไฟล์ SVG อย่างง่ายดาย
บางทีวิธีที่ง่ายที่สุดในการสร้างไฟล์ SVG หากคุณคุ้นเคยก็คือการใช้โปรแกรมออกแบบกราฟิก เช่น Illustrator, Corel Draw และอื่นๆ
โดยเน้นที่โปรแกรม Illustrator เมื่อเราจะใช้รูปแบบ SVG เราต้องคำนึงว่าเราเคยใช้การไล่ระดับสีหรือเอฟเฟกต์อื่นๆ เช่น เอฟเฟกต์ศิลปะ เบลอ แปรง พิกเซล ฯลฯ เนื่องจากจะถูกแรสเตอร์เมื่อบันทึกในรูปแบบไฟล์ SVG ขอแนะนำให้ใช้เอฟเฟกต์ฟิลเตอร์ SVG เพื่อเพิ่มเอฟเฟกต์เพื่อไม่ให้แรสเตอร์ในภายหลัง.
คำแนะนำอีกอย่างที่เราให้คุณคือการใช้ สัญลักษณ์และเส้นทางอย่างง่ายในภาพประกอบเพื่อประสิทธิภาพที่ดีขึ้น ของรูปแบบดังกล่าว หลีกเลี่ยงการใช้แปรงที่มีการติดตามจำนวนมาก เนื่องจากจะทำให้มีข้อมูลโหลดสูงขึ้น
ในการสร้างไฟล์ SVG ในโปรแกรมนี้ สิ่งแรกที่เราต้องเปิดคือผ้าใบเปล่าที่เราจะทำงานกับแนวคิดของเรา
เมื่องานของเราเสร็จสิ้น สิ่งที่เราจะทำคือไปที่แถบเครื่องมือที่แสดงอยู่เหนือโปรแกรม แล้วเราจะเลือกตัวเลือก ไฟล์ บันทึกเป็น และหน้าจอป๊อปอัปจะปรากฏขึ้นโดยแจ้งให้เราตั้งชื่อไฟล์ของเรา และระบุรูปแบบที่เราต้องการบันทึก อยู่ในส่วนสุดท้ายนี้ซึ่งเราต้องทำเครื่องหมายตัวเลือก SVG
เมื่อเลือกประเภท SVG กล่องโต้ตอบจะปรากฏขึ้นเพื่อแสดงตัวเลือกต่างๆ ที่ต้องนำมาพิจารณา
ตามกฎทั่วไป ในฟิลด์แรกที่ปรากฏในตาราง โปรไฟล์ SVG 1.1 จะปรากฏขึ้น ต่อไปนี้ทำให้เรามีทางเลือกในการเลือกแหล่งที่มาที่พวกเขาให้เรา ค่าเริ่มต้นเป็นข้อความที่ทำเครื่องหมายใน SVG และชุดย่อยเป็น none. ในกรณีของเรา งานนี้ไม่มีฟอนต์ หากมี ตัวเลือกเซ็ตย่อยจะต้องเปลี่ยนจากไม่มีเป็นภาพสัญลักษณ์ทั้งหมด
ส่วนต่อไปนี้มีความสำคัญมากหากเราชี้ให้เห็น ตัวเลือกการฝัง ภาพขององค์ประกอบจะรวมอยู่ในไฟล์ซึ่งจะทำให้น้ำหนักขึ้นหากเราใช้ภาพบิตแมปจำนวนมาก ในทางกลับกัน หากเราทำเครื่องหมายตัวเลือกในการเชื่อมโยง เราต้องระวังรูปภาพหากเราจะใช้งานบนเว็บไซต์ เนื่องจากเราต้องรวมไฟล์รูปภาพของเราไว้ด้วย และที่สำคัญมากคือต้องรักษา เส้นทาง. ข้อดีของตัวเลือกนี้คือไฟล์จะมีน้ำหนักน้อยกว่ามาก
ในส่วนตัวเลือกขั้นสูง เราพบตัวเลือกเพื่อ รหัส SVG ตัวเลือกนี้จะระบุว่าไฟล์อยู่ภายในอย่างไรนั่นคือรหัสที่อยู่เบื้องหลังงานของเรา ตัวเลือกนี้มีความสำคัญหากคุณต้องการเพิ่มไฟล์ SVG ของคุณ เช่น ไปยัง WordPress ส่วนตัวของคุณ คุณเพียงแค่ต้องคัดลอกโค้ดและเพิ่มลงในโปรแกรมแก้ไข HTML ของ WordPress โดยตรง
คำแนะนำสุดท้ายที่เราให้คุณคือเมื่อบันทึกในรูปแบบ SVG โปรดทราบว่าหากคุณทำงานกับอาร์ตบอร์ดที่แตกต่างกัน ระบบจะเก็บเฉพาะอาร์ตบอร์ดที่ใช้งานอยู่เท่านั้น
หากเราต้องการดำเนินการต่อไปและใช้เอฟเฟกต์ SVG กับภาพประกอบของเรา Illustrator ขอเสนอชุดเอฟเฟกต์ให้กับเรา ในการทำเช่นนี้เราจะต้องเลือกวัตถุหรือกลุ่ม ในการใช้เอฟเฟกต์ เราต้องเลือกหน้าต่างเอฟเฟกต์ ฟิลเตอร์ SVG และใช้งาน
เมื่อใช้ตัวกรอง SVG โปรแกรมออกแบบจะแสดงหน้าต่างที่ รายการตัวกรองที่สามารถใช้ได้จะปรากฏขึ้นเมื่อเราเลือกอันใดอันหนึ่งแล้ว Illustrator จะแสดงให้เราเห็นว่ามันเป็นอย่างไร แต่ในเวอร์ชันแรสเตอร์
ดังที่ท่านได้เห็น รูปแบบ SVG เป็นการปฏิวัติ ด้วยศักยภาพและคุณภาพ ที่นำเสนอ ทำให้หน้าเว็บที่เราพบว่าน่าสนใจยิ่งขึ้นโดยไม่ลดทอนประสิทธิภาพ ตราบใดที่ใช้รูปแบบดังกล่าวอย่างถูกต้อง SVG ได้กลายเป็นส่วนรวมที่สมบูรณ์แบบระหว่างโลกแห่งการออกแบบและการพัฒนาเว็บ