กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้: บทนำสั้นๆ

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

รูปแบบกราฟิกเวกเตอร์ที่ปรับขนาดได้ (SVG) ใน Adobe Illustrator นั้นง่ายพอๆ กับ JPG หรือ PNG วิธีการใช้งานนี้ช่วยให้คุณใช้ได้ทั้ง Android 2.3 และ Android 2.2 นอกเหนือจาก IE 8 และเวอร์ชันล่าง ทำได้ง่ายเพียงแค่ใช้รูปภาพเป็นฉากหลังของ img หากเบราว์เซอร์ไม่รองรับ แอตทริบิวต์ no-svg จะถูกเพิ่มในองค์ประกอบ html เป็นชื่อคลาส องค์ประกอบ CSS เป็นองค์ประกอบ HTML ที่สามารถควบคุมได้ เช่นเดียวกับองค์ประกอบ HTML อื่นๆ นอกจากนี้ คุณสามารถให้สิทธิ์การเข้าถึงคุณสมบัติพิเศษที่เป็นประโยชน์แก่พวกเขา องค์ประกอบ <style> ต้องรวมอยู่ในไฟล์ SVG ของหน้า หากคุณต้องการใช้สไตล์ชีตภายนอก

หากคุณรวมสิ่งนี้ไว้ใน HTML หน้าเว็บจะไม่ทำงานและจะถูกแสดงผล แม้ว่าข้อมูล URL อาจไม่ช่วยให้คุณบันทึกขนาดไฟล์จริงได้ แต่อาจสะดวกกว่าสำหรับคุณหากคุณสามารถเข้าถึงได้ เว็บไซต์ mobilefish.com มีเครื่องมือแปลงออนไลน์ที่สามารถใช้เพื่อแปลงเนื้อหาได้ น่าจะเป็นความคิดที่ดีกว่าที่จะหลีกเลี่ยง base64 เหตุผลหลักสำหรับสิ่งนี้คือภาษาแม่ ในขณะที่ base64 gzips บ่อยกว่า SVG แต่ base64 gzips น้อยกว่า grunticon สร้างโฟลเดอร์ ไอคอนที่คุณวาดในแอปพลิเคชัน เช่น Adobe Illustrator และแปลงเป็น HTML โดยทั่วไปจะเป็นไฟล์ SVG หรือ PNG URL ข้อมูล, png data uls และรูปภาพ png ปกติทั้งหมดสามารถใช้ในรูปแบบที่แตกต่างกันสามรูปแบบ

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

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

ฉันจะใช้ Svg ได้อย่างไร

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

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

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

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

ฉันควรใช้ Svgs หรือไม่

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

Svg ยังใช้อยู่หรือเปล่า?

การสนับสนุน SVG มีให้บริการตั้งแต่ต้นทศวรรษ 1990 แต่ขณะนี้ได้แพร่กระจายไปยังเบราว์เซอร์และอุปกรณ์หลักทั้งหมดแล้ว ไฟล์นี้มีขนาดเล็ก ค้นหาได้ ดัดแปลงได้ และปรับขนาดได้ด้วยรหัสของไฟล์ ใช้อินไลน์ใน HTML ได้ง่าย (สร้างเว็บไซต์แต่ไม่ต้องการเขียนโค้ด)

ตัวอย่างไฟล์ Svg

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

ไฟล์กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG) มี XML เป็นเทมเพลต เครื่องมือ JavaScript สำหรับการสร้าง ไฟล์ SVG สามารถใช้เพื่อสร้างและแก้ไขไฟล์ได้โดยตรงหรือผ่านการแก้ไขทางโปรแกรม มีทางเลือกที่ดีมากมาย เช่น Inkscape หากคุณไม่มีสิทธิ์เข้าถึง Illustrator หรือ Sketch ส่วนด้านล่างจะอธิบายวิธีสร้างไฟล์ SVG ใน Adobe Illustrator เมื่อคุณคลิกที่ปุ่มรหัส SVG ข้อความของไฟล์จะถูกสร้างขึ้น ซึ่งจะปรากฏในหน้าต่างเริ่มต้นของโปรแกรมแก้ไขข้อความเมื่อเลือกแล้ว สามารถใช้เปรียบเทียบไฟล์ที่ทำเสร็จแล้วกับไฟล์ก่อนหน้า หรือเพื่อคัดลอกและวางข้อความจากไฟล์เดียว

การประกาศ XML และความคิดเห็นจะไม่ปรากฏที่มุมขวาบนของไฟล์อีกต่อไป เมื่อสร้างภาพเคลื่อนไหวหรือการจัดรูปแบบโดยใช้ CSS หรือ JavaScript ควรจัดระเบียบรูปร่างของคุณเป็นกลุ่มๆ เพื่อให้จัดรูปแบบหรือเคลื่อนไหวร่วมกันได้ ไม่น่าเป็นไปได้ที่กราฟิกของคุณจะมองเห็นได้บนพื้นหลังสีขาวของ Illustrator เหมือนบนพื้นผิวของ Artboard ของคุณ ก่อนที่คุณจะบันทึกกราฟิก คุณควรตรวจสอบว่า Artboard พอดีกับอาร์ตเวิร์กหรือไม่

รูปแบบ Svg

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

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

เทียบกับ PNG Svg: อันไหนดีกว่าสำหรับกราฟิก?

การถกเถียงว่า รูปแบบกราฟิก ใดควรใช้อย่างเดือดดาล แม้จะมีความละเอียดสูง แต่ PNG ไม่สามารถขยายได้อย่างไม่มีกำหนด ไฟล์เวกเตอร์มีการออกแบบตามเวกเตอร์และสามารถขยายได้ทุกขนาดโดยไม่สูญเสียความละเอียด โปรแกรมใดที่สามารถเปิดไฟล์ SVG ได้? เบราว์เซอร์ยอดนิยมหลายตัว เช่น Google Chrome, Firefox, IE และ Opera เข้ากันได้กับ SVG นอกจากนี้ ไฟล์ SVG ยังสามารถเรียกใช้ในโปรแกรมแก้ไขข้อความมาตรฐานและโปรแกรมแก้ไขกราฟิก เช่น CorelDRAW ไฟล์ JPG และ PNG แตกต่างกันอย่างไร ใช้อย่างใดอย่างหนึ่งดีกว่าไหม? อย่างไรก็ตาม หากคุณไม่มีรูปภาพพร้อมกับ SVG ควรใช้ไฟล์ดิบแทน JPG หรือ PNG อย่างไรก็ตาม นี่คือสาเหตุที่ SVG ทำงานได้ดีกว่ารูปแบบ Raw PNG สามารถเป็นไฟล์ขนาดใหญ่และมีน้ำหนักในไฟล์ขนาดใหญ่ โดยทั่วไปเมื่อใช้จอแสดงผล HDPI ดังที่คุณอาจทราบแล้ว ยิ่งโหลด/เรนเดอร์ไฟล์ได้เร็วเท่าไร ขนาดไฟล์ก็จะยิ่งมากขึ้นเท่านั้น คุณจะสร้างไฟล์ SVG ได้อย่างไร คุณยังสามารถแก้ไขและสร้างไฟล์ SVG ได้โดยใช้โปรแกรมแก้ไขข้อความ องค์ประกอบ svg สามารถรวมเข้ากับรูปร่างหรือเส้นทาง svg อื่นๆ เช่น วงกลม รูปสี่เหลี่ยมผืนผ้า วงรี หรือเส้นทาง คุณยังสามารถวาดและจัดการไฟล์ SVG โดยใช้ไลบรารี JavaScript ที่หลากหลาย