วิธีเพิ่มไฟล์ SVG ใน WordPress

SVG หรือ Scalable Vector Graphics เป็นรูปแบบไฟล์ที่อนุญาตให้มีการบีบอัดภาพแบบไม่สูญเสียข้อมูลและได้รับการสนับสนุนอย่างกว้างขวางจากเว็บเบราว์เซอร์สมัยใหม่ แม้ว่า WordPress จะไม่รองรับไฟล์ SVG แต่มีวิธีแก้ไขปัญหาหลายอย่างที่อนุญาตให้คุณเพิ่มลงในไลบรารีสื่อของคุณ วิธีทั่วไปในการเพิ่มไฟล์ SVG ลงใน WordPress คือการใช้ปลั๊กอิน Safe SVG ปลั๊กอินนี้อนุญาตให้คุณอัปโหลดไฟล์ SVG ไปยังไซต์ WordPress ของคุณและฆ่าเชื้อโดยอัตโนมัติเพื่อความปลอดภัย เมื่อติดตั้งและเปิดใช้งานปลั๊กอินแล้ว คุณสามารถอัปโหลดไฟล์ SVG ของคุณไปยังไลบรารีสื่อได้เช่นเดียวกับไฟล์ภาพอื่นๆ อีกทางเลือกหนึ่งสำหรับการเพิ่มไฟล์ SVG ใน WordPress คือการใช้ปลั๊กอิน WP Extra File Types ปลั๊กอินนี้เพิ่มการรองรับไฟล์ประเภทต่างๆ ให้กับไลบรารีสื่อของ WordPress รวมถึง SVG เมื่อติดตั้งแล้ว คุณสามารถอัปโหลดไฟล์ SVG ไปยังไลบรารีสื่อได้เช่นเดียวกับไฟล์ภาพอื่นๆ หากคุณต้องการเพิ่มไฟล์ SVG ลงในเว็บไซต์ WordPress ด้วยตนเอง คุณสามารถทำได้โดยเพิ่มโค้ดต่อไปนี้ในไฟล์ functions.php ของธีมของคุณ: function my_theme_add_svg_support( $mimes ) { $mimes['svg'] = 'image/svg+ xml'; คืน $mimes; } add_filter( 'upload_mimes', 'my_theme_add_svg_support' ); รหัสนี้จะเพิ่มการรองรับไฟล์ SVG ให้กับไลบรารีสื่อของ WordPress เมื่อเพิ่มแล้ว คุณสามารถอัปโหลดไฟล์ SVG ไปยังไลบรารีสื่อได้เช่นเดียวกับไฟล์รูปภาพอื่นๆ

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

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

คุณสามารถใช้แท็ก [svg]/svg[/html] เพื่อเพิ่มรูปภาพในไฟล์ HTML ขั้นตอนนี้สามารถทำได้โดยเปิด ภาพ SVG ในโค้ด VS หรือ IDE ที่คุณต้องการ คัดลอกโค้ด แล้ววางไว้ในองค์ประกอบเนื้อหาในเอกสาร HTML ของคุณ การสาธิตด้านล่างแสดงสิ่งที่เกิดขึ้นเมื่อคุณเลือกการออกแบบบางอย่าง

โค้ด PHP สำหรับ การรองรับ SVG ในภาพขนาดย่อของ WordPress img คือ 100% ของความกว้าง ความสูงของเครื่องเติมข้อความอัตโนมัติ โค้ด PHP ยังสามารถแทรกผ่านปลั๊กอินการจัดการโค้ด เช่น Code Snippets; ก) สำคัญ; ข) add_action ('admin_head', 'fix_svg'); และ c) add_color ('default

มี ปลั๊กอิน jQuery SVG ให้ใช้ฟรีหลายตัว รวมถึง Raphael-Vector Graphics, แตะที่เปิดใช้งานการแพนและซูม, jQuery inline, iSVG และภาพเคลื่อนไหวเส้นทาง Silverlight

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

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

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

เนื่องจากขนาดที่เล็ก ภาพ SVG จึงมีขนาดเล็กกว่ารูปแบบอื่นมาก กราฟิก PNG สามารถชั่งน้ำหนักได้มากถึง 50 เท่า วีจีกราฟฟิค. SVG ประกอบด้วย XML และ CSS ซึ่งหมายความว่าไม่ต้องใช้รูปภาพจากเซิร์ฟเวอร์ กราฟิกที่มีองค์ประกอบ 2D และ 3D มีประสิทธิภาพอย่างมากในรูปแบบ แต่ภาพถ่ายที่มีรายละเอียดน้อยไม่ได้ผล ไม่ต้องสงสัยเลยว่าสามารถใช้กับเบราว์เซอร์สมัยใหม่ได้ แต่อาจใช้ไม่ได้กับ IE เวอร์ชันเก่า

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

ฉันควรใช้ Svgs ในเว็บไซต์ของฉันหรือไม่

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

PNG เทียบกับ Svg: รูปแบบภาพใดดีกว่าสำหรับเว็บ

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

ฉันควรใช้ Svg สำหรับรูปภาพหรือไม่

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

Jpeg กับ Png: อะไรคือความแตกต่าง?

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

ฉันจะฝังไฟล์ Svg ได้อย่างไร

หากต้องการฝังไฟล์ SVG คุณจะต้องใช้ไฟล์ แท็ก แท็กนี้อนุญาตให้คุณฝังไฟล์ลงในเอกสาร HTML เดอะ แท็กมีสองแอตทริบิวต์ src และ type แอตทริบิวต์ src ใช้เพื่อระบุ URL ของไฟล์ที่จะฝัง แอตทริบิวต์ type ใช้เพื่อระบุประเภทของไฟล์ที่จะฝัง แอตทริบิวต์ประเภทสามารถตั้งค่าเป็น “image/svg+xml” สำหรับไฟล์ SVG

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

หากคุณต้องการการโต้ตอบในไฟล์รูปภาพของคุณ การใช้แท็ก '> object' เป็นตัวเลือกที่ดี เว้นแต่คุณจะแคชรูปภาพของคุณ การใช้แท็ก *img* แทนการถอยกลับจะส่งผลให้มีการโหลดซ้ำ เนื่องจาก SVG นั้นเป็น DOM โดยพื้นฐานแล้ว คุณจึงสามารถจัดการการขึ้นต่อกันได้โดยใช้ CSS แบบอักษร และสคริปต์ภายนอก อิมเมจ ScalableVGL สามารถรักษาได้โดยใช้แท็กอ็อบเจกต์ เนื่องจาก ID และคลาสยังคงถูกจัดเก็บไว้ในไฟล์ ในการฝังแบบอินไลน์ คุณจะต้องแน่ใจว่า ID และคลาสทั้งหมดมี ID และคลาสที่ไม่ซ้ำกัน ข้อยกเว้นเพียงอย่างเดียวคือถ้าคุณต้องการการเปลี่ยนแปลง SVG แบบไดนามิกอันเป็นผลมาจากการโต้ตอบของผู้ใช้ มีบางกรณีที่แนะนำให้ใช้ SVG แบบอินไลน์ ยกเว้นการโหลดหน้า SEO ประสบปัญหาเนื่องจากเฟรมซึ่งไม่ได้รับการจัดทำดัชนีโดยเครื่องมือค้นหาและยากต่อการบำรุงรักษา

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

วิธีฝัง Svg ใน Html

หากต้องการฝังองค์ประกอบ img> ตรวจสอบให้แน่ใจว่าได้อ้างอิงองค์ประกอบนั้นในแอตทริบิวต์ HTML ตามปกติ หาก SVG ของคุณไม่มีอัตราส่วนกว้างยาวที่กำหนดไว้ คุณจะต้องมีแอตทริบิวต์ความสูงหรือความกว้าง หากคุณยังไม่ได้ดำเนินการ ให้ไปที่ด้าน HTML ของหน้าแล้วพิมพ์ รูปภาพ คุณสามารถฝัง svg โดยตรงใน html ได้หรือไม่ เมื่อคุณฝังองค์ประกอบ SVG ลงในหน้า HTML โดยตรง คุณจะลดเวลาในการแสดงผลหน้าได้ ผลลัพธ์ที่ดีที่สุดได้มาจากการใช้องค์ประกอบ *img> ที่มีแอตทริบิวต์ src ตั้งค่าเป็น URL สัมบูรณ์หรือสัมพัทธ์ของไฟล์ SVG เมื่อใช้องค์ประกอบ img> ในเอกสารขนาดใหญ่ ควรใส่ลิงก์ไปยังไฟล์ SVG ขนาดเต็มในมาร์กอัปของคุณ ทำไม issvg ไม่แสดง เมื่อคุณพยายามใช้ SVG เช่น *img src=”image.svg”> หรือรูปภาพพื้นหลัง CSS และไฟล์มีการเชื่อมโยงอย่างถูกต้องและดูเหมือนว่าถูกต้อง เบราว์เซอร์จะไม่แสดง ซึ่งอาจเนื่องมาจาก ปัญหาเกี่ยวกับเซิร์ฟเวอร์ ตรวจสอบเพื่อดูว่าไฟล์ถูกให้บริการอย่างถูกต้องหรือไม่โดยการตรวจสอบประเภท MIME

การสนับสนุน Svg

รูปแบบกราฟิกเวกเตอร์ที่ปรับขนาดได้ (SVG) เป็นรูปแบบภาพเวกเตอร์ที่ใช้ XML สำหรับกราฟิกสองมิติพร้อมรองรับการโต้ตอบและภาพเคลื่อนไหว ข้อกำหนด SVG เป็นมาตรฐานเปิดที่พัฒนาโดย World Wide Web Consortium (W3C) ตั้งแต่ปี 1999

ใน WordPress คุณสามารถเลือกรูปแบบรูปภาพได้หลากหลาย รวมถึง JPG, PNG และ GIF มีวิธีแก้ไขไฟล์กราฟิกเวกเตอร์แบบปรับขนาดได้ (SVG) เพื่อหลีกเลี่ยงปัญหานี้ แต่ไม่ใช่ประเภทไฟล์ที่ปลอดภัยที่สุด ตั้งแต่ปี 1999 เป็นต้นมา ประเภทไฟล์เป็นมาตรฐานแบบเปิดและเป็นตัวแทนของ 19 เว็บไซต์จากทุกๆ 20 เว็บไซต์ เมื่อพูดถึงกราฟิกแบบเวกเตอร์ (SVG) ไม่ใช่พิกเซลที่ประกอบกันเป็นกราฟิก เซิร์ฟเวอร์เหล่านี้ใช้พื้นที่บนเว็บไซต์ของคุณน้อยลง ทำให้โหลดเร็วขึ้น สิ่งเหล่านี้ไม่ได้เป็นมิตรกับผู้ใช้เสมอไป เช่น เมื่อสร้างรายละเอียดที่ซับซ้อนและเมื่อนำไปใช้ในการออกแบบ เนื่องจากเป็นไฟล์ XML จึงสามารถถูกมัลแวร์แทรกซึมได้

WordPress มีข้อมูลโค้ดจำนวนมากที่ให้คุณเพิ่มการรองรับ SVG ได้ เพื่อให้แน่ใจว่าคำหนึ่งคำในเว็บไซต์ของคุณจะไม่ส่งผลต่อความปลอดภัยของไซต์ของคุณ ให้คัดลอกและวางเฉพาะเมื่อคุณแน่ใจว่าจะไม่ทำเช่นเดียวกัน การเขียนโค้ดเป็นเรื่องยากอย่างฉาวโฉ่ แต่มีบทช่วยสอนออนไลน์เพื่อเรียนรู้วิธีล้างโค้ด มีปลั๊กอินหลายตัวในไดเร็กทอรี WordPress ที่ให้คุณใช้ไฟล์ SVG ที่ปลอดภัยบนเว็บไซต์ของคุณ เราจะใช้ sVGSafe ซึ่งเป็นไลบรารี่ SVG sanitizer เพื่ออัปโหลดรูปภาพสำหรับบทช่วยสอนนี้ ใน WordPress CMS กำหนดให้รวมแท็กคำ <xml> เมื่อคุณเปิดไฟล์ functions.html ของธีมและป้อนรหัสต่อไปนี้: คุณจะสามารถใช้ไฟล์ประเภทนี้บนเว็บไซต์ของคุณได้

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

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

เว็บเบราว์เซอร์และการสนับสนุน Svg

ขณะนี้ทั้ง Internet Explorer 9 และ 10 รองรับ Silverlight อย่างสมบูรณ์ ในเวอร์ชัน 3-59 มี คอมโพเนนต์การสนับสนุน SVG บางส่วน ในขณะที่เวอร์ชัน 60 ขึ้นไป มีการสนับสนุน SVG อย่างสมบูรณ์ ใน Opera คุณสามารถรองรับ SVG ได้เพียงเล็กน้อย