เหตุใด SVG จึงเป็นตัวเลือกที่ดีที่สุดสำหรับรูปภาพที่เหมาะกับมือถือ

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

เพิ่มเติมเกี่ยวกับหัวข้อนี้ในอีกไม่กี่สัปดาห์และหลายเดือนข้างหน้า (และอีกมากมายเกี่ยวกับ Last Call ของ W3C) ตามความเป็นจริงแล้ว ฉันรู้สึกว่ามันเป็นเรื่องยุติธรรมที่จะแจ้งให้คุณทราบเกี่ยวกับเทคโนโลยีที่สำคัญที่สุดที่มีอยู่ ซึ่งก็คือ SVG Mobile ซึ่งกำลังจะสร้างผลกระทบที่สำคัญ ผู้ผลิตรายใหญ่หลายรายในอุตสาหกรรมมือถือตัดสินใจว่า SVG รุ่นเล็กเป็นตัวเลือกที่ดีกว่าสำหรับพวกเขา SVG Mobile และ SVG Tiny สองโปรไฟล์ย่อยใหม่ของ SVG 1.1 จะถูกเพิ่ม อาจมีชื่อเฉพาะเจาะจงมากขึ้นสำหรับเป้าหมาย แต่ W3C ไม่ได้ห้ามการใช้อุปกรณ์อื่นที่คล้ายกับเป้าหมายดั้งเดิม มาดูคุณสมบัติและข้อ จำกัด ของทั้งสองโปรไฟล์ให้ละเอียดยิ่งขึ้น เป้าหมายของ SVG Tiny คือการจัดหาโซลูชันสำหรับบริการส่งข้อความใหม่

ยกเว้นคำสั่งส่วนโค้งวงรี รองรับส่วนโค้ง Bezier ทั้งหมด กราฟิกสามารถเคลื่อนไหวได้นอกเหนือจากการแก้ไขแบบไม่ต่อเนื่อง จังหวะ หรือปรับแต่งอย่างละเอียด และแม้แต่เส้นทางการเคลื่อนไหวก็สามารถใช้ได้ ตรงกันข้ามกับ XPath แอตทริบิวต์การนำเสนอ XML ได้รับการสนับสนุนสำหรับการจัดรูปแบบเท่านั้น และไม่รองรับเอฟเฟกต์ตัวกรอง การโต้ตอบอย่างง่ายสามารถทำได้ด้วยองค์ประกอบง่ายๆ เช่น องค์ประกอบ >set> ในภาพเคลื่อนไหว SVG เวอร์ชันนี้ไม่รองรับการโต้ตอบแบบมีเงื่อนไขตามสคริปต์ ผู้เขียนสามารถระบุโปรไฟล์ที่ต้องการกำหนดเป้าหมายโดยใช้แอตทริบิวต์ baseProfile คุณสามารถทดสอบการสนับสนุนการใช้งานสำหรับ โมดูล SVG เฉพาะ ได้โดยใช้องค์ประกอบ /*switch* ในโปรไฟล์ Tiny และ Basic

ด้วย SVG Tiny 1.2 คุณสามารถห่อข้อความ ใช้เส้นขีดที่ไม่ปรับขนาดได้ และสามารถใช้การไล่ระดับสีแบบเส้นตรงและรัศมีได้ โทรศัพท์รุ่นล่าสุดเปิดใช้งานรูปแบบเวลา SMIL ของ SVG เพื่อเล่นเสียงที่ซิงโครไนซ์โดยใช้ความสามารถด้านมัลติมีเดียใหม่ Mobile SVG ได้รับการยอมรับว่าเป็นมาตรฐานอุตสาหกรรมยุคใหม่โดย 3GPP (3rd Generation Partnership Project) ซึ่งรวบรวมผู้จำหน่ายมือถือชั้นนำของโลกเพื่อพัฒนามาตรฐานอุตสาหกรรม Java Community Process (JCP) ได้จัดตั้งกลุ่มผู้เชี่ยวชาญ Java Specifications Request (JSR) ซึ่งนำโดย Nokia และ Sun ซึ่งกำลังพัฒนา SVG Tiny Java API มาตรฐานสำหรับ J2ME กลุ่มผู้เชี่ยวชาญ JSR-226 มีความก้าวหน้าอย่างต่อเนื่องในปีที่แล้ว และแบบร่างที่อยู่ระหว่างการตรวจสอบคือการพัฒนาล่าสุด นอกจากนี้ยังมีการเรียกร้องข้อเสนอล่าสุดเกี่ยวกับการนำเสนอฉากของแอปพลิเคชันน้ำหนักเบา ซึ่งมุ่งเน้นไปที่การพัฒนารูปแบบไบนารีเพื่อแสดงฉากสำหรับใช้ในสภาพแวดล้อมมือถือที่เข้ากันได้กับ Tiny SVG

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

เครื่องมือ Vector Asset Studio ใน Android Studio ช่วยให้คุณเพิ่มไอคอนวัสดุ รวมถึงนำเข้าไฟล์ กราฟิกเวกเตอร์แบบ ปรับขนาดได้ (SVG) และ Adobe Photoshop Document (PSD) ลงในโปรเจ็กต์ของคุณในรูปแบบเวกเตอร์

เนื่องจากใช้ Adobe Illustrator เพื่อสร้าง ไฟล์ SVG คุณจึงสามารถเปิดไฟล์เหล่านั้นด้วยโปรแกรมนั้นได้ มีผลิตภัณฑ์ Adobe อื่นๆ ที่รองรับไฟล์ SVG นอกเหนือจาก Adobe Photoshop, Photoshop Elements และ InDesign Adobe Animate เข้ากันได้กับทั้งไฟล์ SVG และไฟล์ JPG

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

มือถือรองรับ Svg หรือไม่

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

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

รองรับ Svg บน Safari 11 และต่ำกว่า

มีการสนับสนุนบางอย่างสำหรับ SVG (การสนับสนุนพื้นฐาน) ใน Safari 11 และรุ่นก่อนหน้า แต่จะลดประสิทธิภาพลงเมื่อดูบน Safari เวอร์ชันที่เก่ากว่า 12 ดังนั้น หากคุณใช้ SVG บนหน้าเว็บที่จะเข้าถึงผ่าน Safari ที่เก่ากว่า 12 ตรวจสอบให้แน่ใจว่าคุณใช้ Safari เวอร์ชันล่าสุดเพื่อให้แน่ใจว่าแสดงหน้าได้อย่างถูกต้อง ในขณะนี้ เบราว์เซอร์บนมือถือ ไม่รองรับ SVG

เมื่อใดที่คุณไม่ควรใช้ Svg

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

หน้าเว็บส่วนใหญ่เขียนด้วย Scalable Vector Graphics (SVG) เมื่อคุณปรับขนาดหรือซูมภาพ SVG ภาพเหล่านั้นจะคงคุณภาพเดิมไว้ ในขณะที่ภาพมาตรฐานจะสูญเสียคุณภาพไปเมื่อคุณปรับขนาดหรือซูมเข้า เป็นไปได้ว่าจะต้องมีเนื้อหาหรือข้อมูลเพิ่มเติมเพื่อแก้ไขปัญหาที่เกิดจากรูปแบบภาพอื่น เป็นรูปแบบไฟล์ W3C ที่ใช้กันทั่วไป ภาษานี้เข้ากันได้กับเทคโนโลยีโอเพ่นซอร์สและภาษามาตรฐานที่หลากหลาย รวมถึง HTML, CSS, JavaScript และ JavaScript เมื่อเปรียบเทียบกับรูปแบบอื่น ภาพ SVG มีขนาดเล็กมาก กราฟิก PNG สามารถชั่งน้ำหนักได้มากถึง 50 เท่าของน้ำหนักของคู่กัน

ไฟล์ VGL XML และ CSS สร้างอิมเมจที่ไม่ต้องการอิมเมจจากเซิร์ฟเวอร์ แม้ว่าจะมีประโยชน์สำหรับกราฟิก 2 มิติ เช่น โลโก้และไอคอน แต่ก็ไม่เหมาะสำหรับรูปภาพที่มีรายละเอียดมากขึ้น แม้ว่าเบราว์เซอร์สมัยใหม่ส่วนใหญ่รองรับ แต่ IE8 เวอร์ชันเก่าและต่ำกว่าอาจใช้งานไม่ได้

ต่อไปนี้เป็นเหตุผล 5 ประการในการใช้ sva บ่อยขึ้น: สามารถใช้เพื่อสร้างรูปแบบกราฟิกพกพาที่เรียกว่า .PDF ในขณะที่สามารถดูรูปภาพ JPG และ PNG ได้ในเบราว์เซอร์ใดก็ได้ แต่ไฟล์ SVG นั้นพกพาได้อย่างสมบูรณ์และสามารถดูได้จากทุกที่ เนื่องจากแสดงในลักษณะนี้ รูปภาพจึงสามารถใช้ได้ทั้งในเว็บไซต์และจดหมายข่าวของคุณ การจัดการกราฟิกที่ปรับขนาดได้ (SDM) คือการจัดการกราฟิกที่ปรับขนาดได้ (SGM) รูปภาพ PNG ต้องไม่ใหญ่เกินขนาดไฟล์ ในขณะที่ JPG และ .JPG สามารถใหญ่กว่านี้ได้ แต่จำกัดขนาดไฟล์ นี่เป็นตัวเลือกที่ยอดเยี่ยมสำหรับภาพประกอบที่มีหัวเรื่องขนาดใหญ่และมีรายละเอียด หรือภาพที่มีกราฟิกขนาดใหญ่และมีรายละเอียดที่ต้องแสดงบนหน้าจอขนาดใหญ่ ปรับขนาดได้โดยใช้องค์ประกอบ *br> เป็นไปได้ที่จะขยายหรือย่อไฟล์โดยไม่สูญเสียความคมชัดหรือคุณภาพเมื่อเทียบกับ JPG หรือ PNG ซึ่งมีขนาดใหญ่กว่าขนาดต้นฉบับเท่านั้น กราฟิกสามารถแสดงบนหน้าจอขนาดเล็กหรือขนาดกลาง และสามารถพิมพ์กราฟิกในขนาดใหญ่ด้วยเครื่องพิมพ์นี้ มี SVG หลายประเภทที่สามารถปรับแต่งได้ ซึ่งแตกต่างจาก JPG หรือ PNG ซึ่งจำกัดเฉพาะสีและรูปแบบ ไฟล์เหล่านี้สามารถปรับแต่งได้อย่างสมบูรณ์ ด้วยเหตุนี้ คุณจึงสามารถสร้างกราฟิกในแบบที่คุณต้องการได้โดยไม่ต้องกังวลเกี่ยวกับปัญหาความเข้ากันได้ เป็นรูปแบบไฟล์อเนกประสงค์พร้อมส่วนต่อประสานที่ใช้งานง่าย ซึ่งแตกต่างจากรูปภาพ JPG และ PNG ซึ่งจำกัดเฉพาะกราฟิกบางประเภท ไฟล์ SVG สามารถใช้สร้างกราฟิกอื่นๆ ได้หลากหลาย ด้วยเหตุนี้ SVG จึงเป็นเครื่องมือที่ยอดเยี่ยมสำหรับการสร้างกราฟิกที่ทั้งดึงดูดสายตาและใช้งานได้จริง

Svg สามารถตอบสนองได้หรือไม่?

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

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

เหตุใด Svg ของฉันจึงไม่ตอบสนอง

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

คุณสามารถเพิ่มแท็ก tosvg ความสูงหรือความกว้างก็ได้ เป็นไปได้ที่จะตั้งค่าสูงสุดด้วยการตั้งค่าเป็น 100% กล่าวคือ รูปภาพจะปรับตามความกว้างของคอนเทนเนอร์เสมอ หากต้องการรีเซ็ตขนาดของ viewBox หลังจากเปลี่ยนขนาดแล้ว คุณต้องรีเซ็ตขนาดของคอนเทนเนอร์หลักก่อน

ข้อดีข้อเสียของ Svg

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