10 กฎทองสำหรับ SVG ตอบสนอง

Sep 12, 2025
วิธีการ

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

ที่นี่ฉันสรุปที่สำคัญที่สุดของกฎทองคำ 10 ข้อ

01. ตั้งค่าเครื่องมือของคุณอย่างถูกต้อง

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

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

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

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

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

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

หากคุณได้รับไฟล์เวกเตอร์ที่ไม่ปฏิบัติตามกฎนี้ไม่ต้องกังวล - ส่วนใหญ่ ศิลปะเวกเตอร์ แอปพลิเคชั่นมีตัวเลือก 'ง่าย' คุณสามารถใช้เพื่อลดจำนวนคะแนนในองค์ประกอบโดยไม่เปลี่ยนรูปร่าง หรือเพื่อการทำงานอย่างละเอียดฉันขอแนะนำปลั๊กอินเหมือนกราฟิกที่ชาญฉลาด 'Vectorscribe

02. ลบแอตทริบิวต์ความสูงและความกว้าง

แอพส่วนใหญ่เพิ่มเป็นกรรมสิทธิ์จำนวนมากรหัสที่ไม่จำเป็นในการส่งออก SVG ของพวกเขา รหัสที่จำเป็นเพียงอย่างเดียวเมื่อเริ่มต้นไฟล์ SVG ส่วนใหญ่ดังต่อไปนี้: 

 & lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 500 500" & gt;
& lt; - รหัส SVG ที่นี่ - & gt;
& lt; / svg & gt;

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

หากคุณกำลังประมวลผล SVG จำนวนมากหรือกำลังเร่งรีบคุณไม่จำเป็นต้องทำตามขั้นตอนนี้ด้วยมือ แต่คุณสามารถทำตามคำแนะนำที่วางไว้ในกฎทองคำที่สาม ...

03. เพิ่มประสิทธิภาพและ Minify SVG เอาท์พุท

A combination of intelligent hand-editing and post-production optimisation can reduce SVG file sizes markedly

การรวมกันของการปรับแต่งมืออัจฉริยะและการเพิ่มประสิทธิภาพหลังการผลิตสามารถลดขนาดไฟล์ SVG ได้อย่างชัดเจน

เครื่องมือใดก็ตามที่คุณใช้ในการสร้างเนื้อหา SVG ของคุณมันยังคงคุ้มค่าที่จะประมวลผลเอาต์พุตผ่านเครื่องมือเช่น svgomg ซึ่งจะตัดแต่งรหัสอย่างชัดเจน โดยทั่วไปคุณสามารถประหยัดได้ประมาณ 20 ถึง 80 เปอร์เซ็นต์ในขนาดไฟล์ รหัสเดียวกันสามารถรวมอยู่ในเครื่อง เป็นงานอึกหรืองานฮึดฮัด .

04. แก้ไขรหัสสำหรับ IE

กฎข้อที่ 2 กล่าวว่า SVGs ที่ปรับให้เหมาะสมอย่างถูกต้องตอบสนองอย่างสมบูรณ์ในเบราว์เซอร์ที่ทันสมัย นั่นเป็นเรื่องจริงถ้าเรานับ Microsoft Edge เป็นเบราว์เซอร์ที่ทันสมัย สำหรับ IE 9-11 เรามีปัญหาเล็กน้อยที่อยู่ หากเราใช้ SVG เป็นภาพ: 

 & lt; img src = "countdown.svg alt =" นับถอยหลัง "& gt;

เราสามารถบังคับ IE9-11 เพื่อแสดงภาพได้อย่างถูกต้องโดยใช้ตัวเลือกแอตทริบิวต์ CSS: 

 img [SRC $ = "SVG"] {ความกว้าง: 100%;}

ภาพ SVG ทำงานได้ดีในการผลิตทั่วไป แต่มีการโต้ตอบที่ จำกัด : เบราว์เซอร์ส่วนใหญ่จะเพิกเฉยต่อการโต้ตอบและภาพเคลื่อนไหวภายใน SVG ที่วางไว้บนหน้า . นอกจากนี้ SVG Images เป็นคำขอ HTTP พิเศษสำหรับเบราว์เซอร์

สำหรับเหตุผลเหล่านี้และอื่น ๆ SVG ใช้อินไลน์มากขึ้น ในกรณีดังกล่าวรหัส SVG ต้องการการรักษาเพิ่มเติมเล็กน้อยสำหรับ IE: 

 & lt; ร่างกาย & gt;
...
& lt; SVG XMLNS = "http://www.w3.org/2000/svg" viewbox = "0 0 525 365" reserveaspectratio = "xmidymin slice" & gt;

นอกจากนี้ Reserveaspectratio คุณลักษณะ IE ต้องการคำแนะนำเพิ่มเติมเล็กน้อยเพื่อรักษาการปรับขนาดที่ถูกต้องของภาพ: ใช้ความกว้างของ SVG ( 365 ในกรณีนี้) แบ่งด้วยความสูง ( 525 ) และทวีคูณผลคูณ 100 เปอร์เซ็นต์ สิ่งนี้จะกลายเป็น ก้น ค่าสำหรับ SVG 'ป้อมปั่นไฟ' เปิดให้เพียงพอใน IE เพื่อแสดง SVG ในอัตราส่วนภาพที่ถูกต้อง: 

 & lt; ร่างกาย & gt;
...
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 525 365"
reserveaspectratio = "xmidymin slice"
สไตล์ = "ความกว้าง: 100%; padding-bottom: 69.52%; ความสูง: 1px; overflow: มองเห็น" & gt;

โปรดทราบว่าเพื่อให้สิ่งต่าง ๆ รัดกุมและชัดเจนตัวอย่างโค้ดในส่วนที่เหลือของบทความนี้ไม่รวมการเปลี่ยนแปลงเหล่านี้ Amelia Bellamy-Royds ได้เขียน บทความที่ยอดเยี่ยมเกี่ยวกับ SVG SVG .

05. พิจารณา SVG สำหรับข้อความฮีโร่

Using SVG for hero text means it will automatically scale in line with its container

การใช้ SVG สำหรับข้อความฮีโร่หมายความว่ามันจะขยายบรรทัดโดยอัตโนมัติด้วยคอนเทนเนอร์

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

 & lt; หัว & gt;
& lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "0 0 285 80" & gt;
& lt; ข้อความ x = "0" y = "66" & gt; kauai & lt; / text & gt;
& lt; / svg & gt;
& lt; / ส่วนหัว & gt;

CSS: 

 ข้อความ SVG ส่วนหัว {
ฟอนต์ - น้ำหนัก: 900; ขนาดตัวอักษร: 90px; เติม: สีน้ำเงิน;
}

การรักษา SVG Inline รักษาความสามารถในการเข้าถึงและค่า SEO และอนุญาตให้มีข้อความที่จะใช้แบบอักษรใด ๆ ที่ฝังอยู่ในหน้า ดู ที่นี่ สำหรับข้อมูลเพิ่มเติม.

06. เว้าความกว้างและความสูงในสถานที่สำหรับไอคอนที่ก้าวหน้า

A non-scaling-stroke line has been applied to this speech bubble so it will not change in width when the viewport is resized

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

ข้อยกเว้นหนึ่งประการสำหรับกฎข้อที่ 2 คือไอคอนและโลโก้ขนาดเล็กซึ่งควรรักษาไว้ ความกว้าง และ ความสูง คุณลักษณะถ้าคุณต้องการให้พวกเขาได้รับการปรับปรุงอย่างต่อเนื่อง: 

 & lt; a href = "http://codepen.io" & gt;
    & lt; บทบาท SVG = "img" aria-label = "codepen" width = "50" ความสูง = "50" & gt;
        & lt; ชื่อ & gt; codepen & lt; / ชื่อ & gt;
        & lt; ใช้ xlink: href = "# codepen" / & gt;
    & lt; / svg & gt;
& lt; / a & gt;
...
& lt; svg style = "display: none;" & gt;
    & lt; symbol id = "codepen" viewbox = "0 0 50 50" & gt;
        & lt; path d = "... " / & gt;
    & lt; / สัญลักษณ์ & gt;
& lt; / svg & gt;

คุณสามารถดูตัวอย่างของเทคนิคนี้ในการดำเนินการ ที่นี่ .

หากเรามีขนาดไอคอน SVG ด้วย CSS เท่านั้นและแผ่นสไตล์ของไซต์ไม่โหลดไอคอนจะปรากฏขึ้นที่ขนาดเริ่มต้นขององค์ประกอบที่ถูกแทนที่: 300px x 150px ด้วยการรักษาความสูงและความกว้างเป็นแอ็ตทริบิวต์เราสามารถปรับขนาดให้เป็นขนาดหน้าสัมผัสที่เหมาะสมที่สุดโดยค่าเริ่มต้นและใช้ CSS ของเราเพื่อปรับปรุงวิธีที่พวกเขาจะนำเสนอ

07. ใช้เอฟเฟกต์เวกเตอร์เพื่อให้เส้นผมบาง

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

 เส้นทาง {
    เติม: #FFF; โรคหลอดเลือดสมอง: # 111;
    จังหวะความกว้าง: 2;
    เวกเตอร์เอฟเฟกต์: สเกลที่ไม่ใช่สเกล;
}

ดู ตัวอย่างเต็มของเทคนิคนี้ .

08. จำบิตแมป

นักพัฒนาหลายคนคิดว่า SVG สามารถใช้เวกเตอร์ได้ แต่ JPEGS และ PNGS สามารถนำไปใช้กับการวาด SVG เท่านั้น และตราบใดที่คุณทำตามกฎของฉันจนถึงตอนนี้ภาพเหล่านั้นจะตอบสนองได้เมื่อคุณเพิ่มบิตแมปผ่านทาง แท็ก: 

 & lt; ภาพความกว้าง = "1024" = "768" XLINK: HREF = "Lake-Louise.jpg" x = "1300" Y = "150" บทบาท = "รูปภาพ" ชื่อ = "Crowsnest Pass" & GT; & lt; / image & gt;

09. พิจารณาโซลูชั่นการปรับตัว

The classic Coca-Cola logo rendered at different adaptive sizes

โลโก้ Coca-Cola คลาสสิคแสดงผลที่ขนาดการปรับตัวที่แตกต่างกัน

การทำสิ่งต่าง ๆ ไป 'Squish' เป็นเพียงส่วนหนึ่งของการออกแบบที่ตอบสนองได้ สิ่งที่ RWD เกี่ยวกับความรู้สึกที่มีขนาดใหญ่ขึ้นของการออกแบบแบบปรับตัวคือการนำเสนอเนื้อหาที่เหมาะสมในขนาด Viewport ทั้งหมด

สิ่งนี้สามารถทำได้ในหลากหลายวิธี Responsivelogos.co.uk ให้ตัวอย่างที่ใช้ SVG Sprites แต่ฉันชอบที่จะรวมการสืบค้นสื่อเข้ากับ SVG เพื่อสร้างสิ่งที่ฉันเรียกว่า 'โมดูลการสร้างแบรนด์' วิธีการนี้ช่วยให้ฉันเพิ่มลบและแก้ไขการมองเห็นของส่วนประกอบ อ่านเพิ่มเติมเกี่ยวกับโมดูลการสร้างแบรนด์ Adaptive ในบทความของฉัน .

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

10. รวมการสืบค้นสื่อเป็น SVG

หลายคนไม่ทราบว่าการสืบค้นสื่อ CSS สามารถเขียนได้ภายใน SVG เอง: 

 & lt; svg xmlns = "http://www.w3.org/2000/svg" viewbox = "14 82 272 139" & gt;
& lt; defs & gt;
& lt; สไตล์ & gt;
SVG G {Transition: 1S; }
@Media All และ (สูงสุดความกว้าง: 90Rem) {
#drink, #coke {ความทึบ: 0; }
}
& lt; / style & gt;
& lt; / defs & gt;
& lt; g id = "coca-cola" & gt;
& lt; path d = "m109.6 ... & gt;

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

สิ่งนี้อาจส่งผลให้เกิดองค์ประกอบขนาดเล็กมากที่ขนาดวิวสปอร์ตขนาดเล็กกรอบในพื้นที่ผ้าใบที่ค่อนข้างใหญ่ มีวิธีแก้ปัญหานี้หลายวิธีรวมถึง ปรับขนาดช่องมองภาพ และ ปรับขนาดองค์ประกอบเพื่อชดเชย .

บทสรุป

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

บทความนี้ปรากฏในเดิม นิตยสารสุทธิ ปัญหา 283; ซื้อที่นี่ !

บทความที่เกี่ยวข้อง:

  • 12 เครื่องมือทดสอบรหัสที่ต้องมี
  • ทำให้ทักษะการร่างของคุณคมชัดขึ้น
  • Super Charge SVG แอนิเมชั่นกับ GSAP

วิธีการ - บทความยอดนิยม

วิธีการวาดสิงโต

วิธีการ Sep 12, 2025

ยินดีต้อนรับสู่คำแนะนำของเราเกี่ยวกับวิธีการวาดสิงโ�..

วิธีการสร้างหน้าการ์ตูน

วิธีการ Sep 12, 2025

บทช่วยสอนนี้จะแสดงวิธีสร้างหน้าการ์ตูน แม้ว�..

วิธีการทาสีปราสาทด้วย SketchUp

วิธีการ Sep 12, 2025

มีช่วงของ เทคนิคศิลปะ ที่สามารถช่วยในกา�..

รูปแบบที่ยืดหยุ่นแฟชั่นด้วย CSS Grid

วิธีการ Sep 12, 2025

กริด CSS เหมาะสำหรับการสร้างเลย์เอาต์สองแกนของ�..

ต้นแบบการวาดภาพเชิงลบในสีน้ำ

วิธีการ Sep 12, 2025

ภาพวาดเชิงลบหมายถึงการวาดภาพ พื้นที่เชิงลบ ที่กำหนดรูปร่างที..

มีอะไรใหม่ในเชิงมุม 4?

วิธีการ Sep 12, 2025

หน้า 1 จาก 2: ขั้นตอนที่ 1-10 ขั้..

สร้างโปสเตอร์การพิมพ์โดยใช้ Adobe InDesign

วิธีการ Sep 12, 2025

Adobe InDesign เป็นโปรแกรมที่ยอดเยี่ยมในการใช้งานเมื่..

วิธีการออกแบบโปรโมชั่นสำหรับแบรนด์จินตภาพ

วิธีการ Sep 12, 2025

เมื่อออกแบบแบรนด์ไม่ว่าจะเป็นหนึ่งในที่จัดตั้งขึ้นหรือเริ่มต้นท�..

หมวดหมู่