SVG ในการตอบสนอง: วิธีที่ใช้บ่อยที่สุด

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

XML เป็นโครงสร้างข้อมูลที่สามารถใช้สร้างกราฟิกแบบเวกเตอร์ บางแบรนด์ เช่น Twitter, YouTube, Udacity และ Netflix ใช้ SVG เพื่อใช้รูปภาพและไอคอน คุณสามารถนำเข้าและใช้ React SVG ในโค้ดของคุณได้โดยตรงหากต้องการ ด้วยเหตุนี้ รูปภาพและ HTML จึงแสดงแยกกัน CRA ใช้ SVGR เป็นส่วนหนึ่งของโครงสร้างพื้นฐานเพื่อให้สามารถแปลงและนำเข้า SVG เป็นส่วนประกอบ React หากคุณไม่มี Create React App คุณควรหาวิธีอื่น โดยใช้เครื่องมือ SVGR คุณสามารถแปลงไฟล์.

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

เนื่องจาก JSX รองรับ แท็ก svg เราจึงสามารถใช้ส่วนประกอบ React เพื่อคัดลอกและวาง SVG ได้โดยตรง เนื่องจากวิธีนี้ช่วยให้คุณใช้ประโยชน์จาก HTML ได้อย่างเต็มที่ผ่าน SVG จึงง่ายต่อการใช้งาน เนื่องจาก SVG อยู่ในรูปแบบ XML จึงสามารถใช้วิธีนี้ได้

คุณสามารถใช้แทนได้ หากคุณใช้แอป React Native คุณควรใช้ sva รูปแบบ SVG เป็นรูปแบบเวกเตอร์ที่ไม่มีข้อจำกัดด้านขนาด

รูปภาพสามารถเขียนลงในเอกสาร HTML ได้โดยตรงด้วยแท็ก "svg" ซึ่งทำได้โดยใช้ รูปภาพ SVG เป็นเทมเพลต คัดลอกโค้ดไปใส่ในนั้น และเพิ่มลงในองค์ประกอบ body> ของเอกสาร HTML

ปฏิกิริยาทำงานกับ Svg หรือไม่

ใช่ React ใช้งานได้กับ SVG React เป็นไลบรารี JavaScript ที่เปิดเผย มีประสิทธิภาพและยืดหยุ่นสำหรับการสร้างส่วนต่อประสานผู้ใช้ ใช้งานได้กับไลบรารี่ SVG ที่หลากหลาย รวมถึง D3 และ Snap

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

เราสามารถใช้ React SVGs ได้อย่างมีประสิทธิภาพมากขึ้นโดยการเรนเดอร์ตามเงื่อนไขของ ส่วนประกอบแอป react บทช่วยสอนจะอิงตามแฮมเบอร์เกอร์ที่มีไอคอน SVG เปิดและปิด ความสามารถในการทำให้ส่วนประกอบเคลื่อนไหวด้วย CSS เป็นหนึ่งในคุณสมบัติที่ทำให้ sva vogets สามารถปรับขนาดได้และมีความละเอียดสูง ไฟล์ข้อความในรูปแบบของภาพ sva นั้นใช้ XML ทั้งหมด เป็นเรื่องง่ายสำหรับโปรแกรมแก้ไขข้อความใดๆ ในการสร้าง เคลื่อนไหว และปรับเปลี่ยน เมื่อใช้โปรแกรมสร้างรูปภาพที่สร้าง SVG คุณสามารถปรับขนาดรูปภาพเป็นขนาดใดก็ได้โดยไม่สูญเสียคุณภาพ เมื่อใช้ Web Animation APIs, WebGL, CSS animations และเทคนิคอื่นๆ คุณสามารถทำให้ SVG เคลื่อนไหวได้

วิธีใช้ Svgs ใน React Native

คุณสามารถใช้ SVG ใน React Native ได้หลายวิธี ในกรณีของการเริ่มต้นโครงการ React Native CLI อนุญาตให้คุณนำเข้าไฟล์ SVG โดยใช้แอตทริบิวต์แหล่งที่มาของรูปภาพ หากต้องการนำเข้า yoursvg ให้ไปที่/path/to/image/yoursvg หากคุณไม่ต้องการใช้ React Native คุณสามารถติดตั้ง react-native-svg โดยใช้ Expo CLI หลังจากที่คุณติดตั้งแล้ว ให้ใช้ในลักษณะนี้: นำเข้า yoursvg จากรูปแบบ HTML ดั้งเดิมของคุณ *br เมื่อใช้ React Native กรณีการใช้งานทั่วไปสำหรับ SVG คือไอคอน แพ็คเกจ react-native-svg- symbols ช่วยให้คุณสร้างไอคอนจาก ไฟล์ SVG ของคุณ ใน React Native คุณสามารถใช้รูปภาพจาก SVG ประเภทเหล่านี้เป็นฉากหลังสำหรับแอปของคุณ ใช้แพ็คเกจ react-native-svg-image-placeholder เพื่อสร้างภาพ placeholder สำหรับแอปของคุณ

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

หากคุณต้องการใช้ SVG ในแอป create-react-app คุณจะต้องเรียกใช้คำสั่งต่อไปนี้เพื่อติดตั้ง svg-inline-loader:
npm ติดตั้ง svg-inline-loader –save-dev
เมื่อคุณติดตั้งตัวโหลดแล้ว คุณสามารถใช้งานได้โดยเพิ่มบรรทัดต่อไปนี้ในไฟล์ webpack.config.js ของคุณ:
โมดูลส่งออก = {
โมดูล: {
กฎ: [
{
ทดสอบ: /\.svg$/,
ตัวโหลด: 'svg-inline-loader'
}
]
}
};

ไฟล์กราฟิกแบบเวกเตอร์ที่ปรับขนาดได้ (SVG) เป็นไฟล์ที่สามารถขยายได้ในช็อตเดียว XML เป็นรูปแบบมาตรฐานที่ใช้ในการระบุกราฟิกแบบเวกเตอร์ ในขณะที่ปรับขนาดภาพ SVG จะรักษารูปร่างไว้ซึ่งตรงข้ามกับภาพบิตแมป การใช้ SVG ใน React สามารถทำได้หลายวิธี เราจะอธิบายรายละเอียดแต่ละข้อ การใช้แท็ก img สร้างแอป React ฝัง โลโก้ SVG ซึ่งกำหนดไว้ในไฟล์แยกต่างหาก src/image.svg คำชี้แจงการนำเข้าระบุว่า webpack ใช้ภาพนี้ในบรรทัดที่ 2

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

ข้อดีข้อเสียของ Create React App

มีปัญหามากมายกับ Create React App ซึ่งอย่างแรกคือมันเป็นแอพรวม หากคุณต้องการใช้ไลบรารีอื่น เช่น React Router หรือ Redux คุณต้องรวมมันเข้ากับโปรเจ็กต์ของคุณด้วยตนเอง ไม่ใช่เรื่องใหญ่หากคุณต้องการใช้ไลบรารีเพียงไม่กี่ตัว แต่อาจกลายเป็นเรื่องน่าเบื่อได้หากคุณใช้ไลบรารีต่างๆ จำนวนมาก แอป Create React App มีการเชื่อมต่อกับ React ที่สำคัญ หากต้องการใช้ฟีเจอร์ของ Redux จะต้องพบวิธีแก้ปัญหา การสร้างโปรเจ็กต์ Redux พื้นฐาน เช่น create-react-app-redux-starter จำเป็นต้องเพิ่มบรรทัดพิเศษอีกสองสามบรรทัดเพื่อจัดการการอัปเดตสถานะ มีสำเร็จรูปที่ใช้ React อื่นๆ เช่น Create React App React ซึ่งพยายามแก้ไขปัญหาเหล่านี้บางส่วน แต่ยังไม่สมบูรณ์แบบ คุณต้องตัดสินใจว่าจะใช้ Create React App หรือไม่ แต่ฉันขอแนะนำให้ใช้ต้นแบบอื่นก่อน

สร้าง React App Svg

เมื่อใช้เครื่องมือบรรทัดคำสั่ง create-react-app คุณสามารถสร้างแอป React ที่มีไฟล์ SVG ได้อย่างง่ายดาย เพียงเรียกใช้คำสั่ง create-react-app ตามด้วยชื่อแอปของคุณ และใส่แฟล็ก –svg สิ่งนี้จะสร้างแอป React ใหม่ที่มีการอ้างอิงที่จำเป็นทั้งหมดเพื่อใช้ไฟล์ SVG

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

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

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