6 SVG ทั่วไปล้มเหลว (และวิธีแก้ไข)

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

แต่บางครั้งเราไม่สามารถเห็น SVG ของเราได้เลย ในกรณีเหล่านั้น มีหกสิ่งที่ฉันมองหาเมื่อฉันแก้ไขจุดบกพร่อง

ในปี 1 viewBox ค่า

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

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

วิธีที่ง่ายที่สุดในการแก้ไขปัญหานี้ เพิ่ม overflow="visible" ไปยัง SVG ไม่ว่าจะเป็นสไตล์ชีตของเรา หรืออินไลน์บน style แอตทริบิวต์หรือโดยตรงเป็นแอตทริบิวต์การนำเสนอ SVG แต่ถ้าเราใช้ก background-color เป็น SVG หรือหากเรามีองค์ประกอบอื่นๆ อยู่รอบๆ สิ่งต่างๆ ก็อาจดูผิดเพี้ยนไปเล็กน้อย ในกรณีนี้ ตัวเลือกที่ดีที่สุดคือการแก้ไข viewBox เพื่อแสดงส่วนนั้นของระบบพิกัดที่ถูกซ่อนไว้:

มีบางสิ่งเพิ่มเติมเกี่ยวกับ viewBox ที่ควรค่าแก่การครอบคลุมในขณะที่เราอยู่ในหัวข้อ:

ทำอย่างไร viewBox ทำงานอย่างไร

SVG เป็นผืนผ้าใบที่ไม่มีที่สิ้นสุด แต่เราสามารถควบคุมสิ่งที่เราเห็นและวิธีที่เราเห็นผ่านวิวพอร์ตและ viewBox.

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

พื้นที่ viewBox ถูกกำหนดโดยสี่ค่า สองอันแรกคือจุดเริ่มต้นที่มุมซ้ายบน (x และ y ค่า, จำนวนลบที่อนุญาต) ฉันกำลังแก้ไขสิ่งเหล่านี้เพื่อจัดองค์ประกอบภาพใหม่ สองอันสุดท้ายคือความกว้างและความสูงของระบบพิกัดภายในวิวพอร์ต — นี่คือที่ที่เราสามารถแก้ไขขนาดของกริดได้ (ซึ่งเราจะพูดถึงในหัวข้อ ซูม).

นี่คือมาร์กอัปอย่างง่ายที่แสดง SVG viewBox และ width และ height แอตทริบิวต์ทั้งชุดใน <svg>:

<svg viewBox="0 0 700 700" width="700" height="700"> <!-- etc. -->
</svg>

การรีเฟรช

ดังนั้นสิ่งนี้:

<svg viewBox="0 0 700 700">

…จับคู่กับสิ่งนี้:

<svg viewBox="start-x-axis start-y-axis width height">

วิวพอร์ตที่เราเห็นเริ่มต้นที่ 0 บนแกน x และ 0 บนแกน y บรรจบกัน

โดยการเปลี่ยนแปลงนี้:

<svg viewBox="0 0 700 700">

…สำหรับสิ่งนี้:

<svg viewBox="300 200 700 700">

…ความกว้างและความสูงยังคงเท่าเดิม (700 หน่วยละ) แต่จุดเริ่มต้นของระบบพิกัดตอนนี้อยู่ที่ 300 ชี้ไปที่แกน x และ 200 บนแกน y

ในวิดีโอต่อไปนี้ ฉันกำลังเพิ่มสีแดง <circle> ไปยัง SVG โดยมีจุดศูนย์กลางอยู่ที่ 300 ชี้ไปที่แกน x และ 200 บนแกน y สังเกตการเปลี่ยนแปลงของ viewBox พิกัดเป็นค่าเดียวกันยังเปลี่ยนตำแหน่งของวงกลมไปที่มุมซ้ายบนของเฟรมในขณะที่ขนาดการแสดงผลของ SVG ยังคงเท่าเดิม (700×700). ทั้งหมดที่ฉันทำคือ "ปรับเปลี่ยน" สิ่งต่างๆ ด้วย viewBox.

ซูม

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

มาดูกันว่าจะเกิดอะไรขึ้นใน Illustrator เมื่อเราเปลี่ยนพารามิเตอร์เหล่านี้ อาร์ตบอร์ดคือ viewport ซึ่งแสดงด้วยสี่เหลี่ยมสีขาวขนาด 700px ทุกสิ่งทุกอย่างที่อยู่นอกพื้นที่นั้นคือผืนผ้าใบ SVG ที่ไม่มีที่สิ้นสุดของเราและถูกตัดออกโดยค่าเริ่มต้น

รูปที่ 1 ด้านล่างแสดงจุดสีน้ำเงินที่ 900 ตามแกน x และ 900 ตามแนวแกน y ถ้าฉันเปลี่ยนสองคนสุดท้าย viewBox ค่าจาก 700 ไปยัง 900 อย่างนี้:

<svg viewBox="300 200 900 900" width="700" height="700">

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

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

2. หายไป width และ height

สิ่งทั่วไปอีกอย่างที่ฉันดูเมื่อแก้ไขข้อบกพร่องในบรรทัด SVG คือว่ามาร์กอัปมีไฟล์ width or height คุณลักษณะ. กรณีนี้ไม่ใช่เรื่องใหญ่ เว้นแต่ว่า SVG จะอยู่ในคอนเทนเนอร์ที่มีการวางตำแหน่งแบบสัมบูรณ์หรือคอนเทนเนอร์แบบยืดหยุ่น (เนื่องจาก Safari คำนวณ SVG width มูลค่ากับ 0px แทน auto). ไม่รวม width or height ในกรณีเหล่านี้ทำให้เราไม่เห็นภาพเต็มอย่างที่เราเห็น เปิดการสาธิต CodePen นี้ และเปรียบเทียบใน Chrome, Safari และ Firefox (แตะที่ภาพเพื่อดูขนาดใหญ่ขึ้น)

การแก้ไขปัญหา? เพิ่มความกว้างหรือความสูง ไม่ว่าจะเป็นแอตทริบิวต์การนำเสนอ อินไลน์ในแอตทริบิวต์สไตล์ หรือใน CSS หลีกเลี่ยงการใช้ความสูงเพียงอย่างเดียว โดยเฉพาะอย่างยิ่งเมื่อตั้งค่าเป็น 100% or auto. วิธีแก้ปัญหาอื่นคือการ ตั้งค่าด้านขวา และ  ค่าที่เหลือ.

คุณสามารถเล่นกับ ปากกาต่อไปนี้ และผสมผสานตัวเลือกต่างๆ

3. ไม่ได้ตั้งใจ fill และ stroke สี

อาจเป็นไปได้ว่าเรากำลังใช้สีกับ <svg> ไม่ว่าจะเป็นรูปแบบอินไลน์หรือมาจาก CSS ไม่เป็นไร แต่อาจมีค่าสีอื่นๆ ตลอดทั้งมาร์กอัปหรือสไตล์ที่ขัดแย้งกับชุดสีบน <svg>ทำให้มองไม่เห็นชิ้นส่วน

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

4. ID ที่ขาดหายไป

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

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

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

ดังนั้น ฉันว่ามันคุ้มค่าที่จะเปิดไฟล์ SVG ที่ส่งออกในโปรแกรมแก้ไขโค้ดและเปรียบเทียบกับไฟล์ต้นฉบับก่อนที่จะแลกเปลี่ยนข้อมูล แอพอย่าง Illustrator, Figma และ Sketch นั้นฉลาด แต่ไม่ได้หมายความว่าเราจะไม่รับผิดชอบในการตรวจสอบพวกมัน

5. รายการตรวจสอบสำหรับการตัดและการปิดบัง

หาก SVG ถูกตัดออกโดยไม่คาดคิดและไฟล์ viewBox ไม่เป็นไร ฉันมักจะดูที่ CSS สำหรับ clip-path or mask คุณสมบัติที่อาจรบกวนภาพ การดูมาร์กอัปแบบอินไลน์เป็นเรื่องดึงดูดใจ แต่ควรจำไว้ว่าสไตล์ของ SVG อาจเกิดขึ้นที่อื่น

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

นี่คือรายการตรวจสอบขนาดเล็กสำหรับการดีบักกรณีที่เกี่ยวข้องกับการตัดและการมาสก์:

• ตรวจสอบให้แน่ใจว่าเส้นทางการตัด (หรือมาสก์) และกราฟิกทับซ้อนกัน ส่วนที่ทับซ้อนกันคือสิ่งที่แสดงออกมา
• หากคุณมีเส้นทางที่ซับซ้อนซึ่งไม่ตัดกับกราฟิกของคุณ ให้ลองใช้การแปลงจนกว่าจะตรงกัน
• คุณยังสามารถตรวจสอบโค้ดภายในด้วย DevTools แม้ว่า <clipPath> or <mask> ไม่แสดงผลดังนั้นใช้มัน!
• คัดลอกมาร์กอัปด้านใน <clipPath> และ <mask> และวางก่อนปิด </svg> แท็ก จากนั้นเพิ่ม fill ไปยังรูปร่างเหล่านั้นและตรวจสอบพิกัดและขนาดของ SVG หากยังไม่เห็นภาพ ให้ลองเพิ่ม overflow="hidden" ไป <svg> แท็ก
• ตรวจสอบว่า เป็นเอกลักษณ์ ID ใช้สำหรับ <clipPath> or <mask>และ ID เดียวกันนั้นถูกนำไปใช้กับรูปร่างหรือกลุ่มของรูปร่างที่ตัดหรือมาสก์ ID ที่ไม่ตรงกันจะทำให้รูปลักษณ์ภายนอกเสียหาย
• ตรวจสอบการพิมพ์ผิดในมาร์กอัประหว่าง <clipPath> or <mask> แท็ก
• fill, stroke, opacityหรือสไตล์อื่นๆ ที่ใช้กับองค์ประกอบภายใน <clipPath> ไม่มีประโยชน์ - ส่วนที่มีประโยชน์เพียงอย่างเดียวคือรูปทรงเรขาคณิตของส่วนเติมขององค์ประกอบเหล่านั้น นั่นเป็นเหตุผลว่าทำไมถ้าคุณใช้ <polyline> มันจะทำตัวเป็น <polygon> และถ้าคุณใช้ <line> คุณจะไม่เห็นผลการตัดใดๆ
• หากคุณไม่เห็นรูปภาพของคุณหลังจากใช้ <mask>ตรวจสอบให้แน่ใจว่าไฟล์ fill เนื้อหากำบังไม่ใช่สีดำทั้งหมด ความสว่างขององค์ประกอบกำบังกำหนดความทึบของกราฟิกขั้นสุดท้าย คุณจะสามารถมองผ่านส่วนที่สว่างกว่าได้ และส่วนที่มืดกว่าจะซ่อนเนื้อหาในรูปภาพของคุณ

คุณสามารถเล่นกับองค์ประกอบที่สวมหน้ากากและตัดออกได้ ปากกานี้.

6. เนมสเปซ

คุณรู้หรือไม่ว่า SVG เป็นภาษามาร์กอัปที่ใช้ XML มันคือ! เนมสเปซสำหรับ SVG ถูกตั้งค่าบน xmlns แอตทริบิวต์:

<svg xmlns="http://www.w3.org/2000/svg"> <!-- etc. -->
</svg>

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

ข้อกำหนด SVG 2 ไม่ต้องการเนมสเปซ เมื่อใช้ไวยากรณ์ HTML แต่ มันสำคัญมาก หากการรองรับเบราว์เซอร์รุ่นเก่าเป็นสิ่งสำคัญ — นอกจากนี้ การเพิ่มเข้าไปก็ไม่ใช่เรื่องเสียหายอะไร ด้วยวิธีนี้เมื่อ <html> องค์ประกอบ xmlns มีการกำหนดแอตทริบิวต์ ซึ่งจะไม่ขัดแย้งกันในกรณีที่ไม่ค่อยเกิดขึ้น

<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> <body> <svg xmlns="http://www.w3.org/2000/svg" width="700px" height="700px"> <!-- etc. --> </svg> </body>
</html>

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

textarea:valid { background: white url('data:image/svg+xml, <svg xmlns="http://www.w3.org/2000/svg" width="26" height="26"> <circle cx="13" cy="13" r="13" fill="%23abedd8"/> <path fill="none" stroke="white" stroke-width="2" d="M5 15.2l5 5 10-12"/> </svg>') no-repeat 98% 5px;
}

เมื่อเราลบเนมสเปซภายใน SVG ในคุณสมบัติพื้นหลัง รูปภาพจะหายไป:

คำนำหน้าเนมสเปซทั่วไปอีกอย่างหนึ่งคือ xlink:href. เราใช้บ่อยเมื่ออ้างอิงส่วนอื่นๆ ของ SVG เช่น: รูปแบบ ตัวกรอง ภาพเคลื่อนไหว หรือการไล่ระดับสี คำแนะนำคือให้เริ่มแทนที่ด้วย href เนื่องจากอีกอันหนึ่งเลิกใช้แล้วตั้งแต่ SVG 2 แต่อาจมีปัญหาความเข้ากันได้กับเบราว์เซอร์รุ่นเก่า ในกรณีนั้น เราสามารถใช้ทั้งสองอย่างได้ อย่าลืมใส่เนมสเปซด้วย xmlns:xlink="http://www.w3.org/1999/xlink" หากคุณยังคงใช้ xlink:href.

ยกระดับทักษะ SVG ของคุณ!

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

บรรทัดล่างคือจ่ายเพื่อให้มีความรู้พื้นฐานอย่างน้อย วิธีต่างๆ ที่สามารถใช้ SVG ได้. ความท้าทายของ CodePen มักจะรวม SVG และเสนอแนวปฏิบัติที่ดี ต่อไปนี้เป็นทรัพยากรเพิ่มเติมในการเพิ่มระดับ:

มีบางคนที่ฉันแนะนำให้ติดตามสำหรับความดีที่เกี่ยวข้องกับ SVG:

• เนื้อหาที่ขับเคลื่อนด้วย SEO และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
• เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าถึงได้ที่นี่.
• ที่มา: https://css-tricks.com/6-common-svg-fails-and-how-to-fix-them/