คู่มือปฏิบัติสำหรับ SVG และเครื่องมือออกแบบ

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

ในบทความนี้ ฉันจะอธิบายเกี่ยวกับเครื่องมือออกแบบยอดนิยมสามอย่าง ได้แก่ Adobe Illustrator, Sketch และ Figma นอกจากนี้ยังมีเครื่องมืออื่นๆ ที่รองรับ SVG ที่อาจมีฟังก์ชันอื่นๆ และนำโซลูชันอื่นๆ ไปใช้

หมายเหตุ : หากไม่ระบุไว้เป็นอย่างอื่น เนื้อหาของบทความนี้อ้างอิงถึง SVG 1.1 2nd Edition บางประเด็นที่กล่าวถึงด้านล่างใช้ไม่ได้กับ SVG 2 แต่ยังไม่ถึงสถานะคำแนะนำ ทำให้ SVG 1.1 เป็นข้อกำหนดล่าสุด

ทำไมต้องกังวลเกี่ยวกับเครื่องมือออกแบบ?

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

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

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

รูปร่างพื้นฐาน

กราฟิกแบบเวกเตอร์จำนวนมากสร้างขึ้นจากรูปทรงพื้นฐานสองสามแบบ — จัดกลุ่ม แปลงร่าง และรวมเข้าด้วยกัน ตารางด้านล่างแสดงเครื่องมือรูปร่างที่มีอยู่ใน Illustrator, Sketch และ Figma และองค์ประกอบ SVG ที่ส่งออกเป็น

วงรีและวงกลม

หนึ่งในรูปทรงพื้นฐานในเครื่องมือออกแบบทุกชิ้นคือวงรี ใน SVG เราจะพบองค์ประกอบ <ellipse /> ที่ตรงกัน ซึ่งกำหนดโดยพิกัดของจุดศูนย์กลางของวงรี ( cx และ cy ) และรัศมีสองรัศมี ( rx และ ry )

นี่คือสิ่งที่วงรีดูเหมือนใน SVG:

 <ellipse cx="400" cy="300" rx="250" ry="150"/>

วงรีชนิดพิเศษคือวงกลม วงกลมคือวงรีที่มีรัศมี rx และ ry เท่ากัน SVG มีองค์ประกอบ <circle /> ของตัวเองที่ลดแอตทริบิวต์หนึ่งรายการ เนื่องจากมีเพียงรัศมีเดียวที่ต้องพิจารณา:

 <circle cx="400" cy="300" r="250"/>

ในกรณีของวงรีและวงกลม เครื่องมือออกแบบทั้งหมดทำงานเหมือนกัน: Ellipse Tool ใน Illustrator, เครื่องมือ Oval ใน Sketch และเครื่องมือ Ellipse ใน Figma จะสร้างองค์ประกอบ <ellipse /> ทั้งหมด เว้นแต่รัศมีจะเท่ากัน: ในกรณีเช่นนี้ เราจะจบลงด้วย <circle /> องค์ประกอบ

สี่เหลี่ยมผืนผ้าและสี่เหลี่ยมผืนผ้ามน

รูปทรงพื้นฐานอีกรูปแบบหนึ่งที่ใช้กันทั่วไปในเครื่องมือออกแบบทั้งหมดคือสี่เหลี่ยมผืนผ้า ในกรณีของเครื่องมือออกแบบทั้งหมด การใช้เครื่องมือสี่เหลี่ยมผืนผ้าจะสร้างองค์ประกอบ <rect /> ใน SVG <rect /> พื้นฐานถูกกำหนดโดย 4 คุณลักษณะ: พิกัด x และ y พร้อมกับความกว้างและความสูง:

 <rect x="150" y="100" width="500" height="400"/>

ขอให้สังเกตว่าในขณะที่ตำแหน่งของ <ellipse /> และ <circle /> ถูกกำหนดโดยศูนย์กลางทางเรขาคณิต ตำแหน่งของ <rect /> ถูกกำหนดโดยพิกัดของมุมซ้ายบน

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

นอกจากนี้ ใน Sketch และ Illustrator ยังมีเครื่องมือสำหรับสร้างสี่เหลี่ยมมุมมนโดยเฉพาะ ( เครื่องมือ Rounded Rectangle ใน Illustrator และเครื่องมือ Rounded ใน Sketch) อย่างไรก็ตาม ไม่มีความแตกต่างระหว่างสี่เหลี่ยมผืนผ้าปกติที่มีรัศมีและสี่เหลี่ยมผืนผ้าโค้งมนที่วาดด้วยเครื่องมือ Rounded Rectangle

ดังนั้น ไม่ว่าจะสร้างอย่างไร สี่เหลี่ยมผืนผ้าที่โค้งมนจะถูกส่งออกโดยใช้ไวยากรณ์ต่อไปนี้:

 <rect x="150" y="100" width="500" height="400" rx="30"/>

ในกรณีนี้ rx เป็นแอตทริบิวต์ที่รับผิดชอบต่อรัศมีของมุมโค้งมน:

สี่เหลี่ยมผืนผ้าโค้งมนพร้อมมุมวงรี

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

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

 <rect x="150" y="100" width="500" height="400" rx="40" ry="30"/>

ดังนั้น ในกรณีนี้ SVG มอบโอกาสให้คุณมากกว่าเครื่องมือออกแบบ

หมายเหตุ : แม้ว่าจะไม่เกี่ยวข้องกับหัวข้อของบทความนี้ทุกประการ แต่ก็ควรสังเกตว่าความแตกต่างที่อธิบายข้างต้นมีผลกับทั้ง SVG และ HTML/CSS border-radius ของคุณสมบัติ CSS ที่ใช้ในการจัดรูปแบบโหนด เช่น div และช่วง ยังช่วยให้สร้างมุมรูปไข่ได้ คุณสามารถดูตัวอย่างด้านล่าง

 border-radius: 10px 5% / 20px 25em 30px 35em;

ค่าก่อนเครื่องหมายทับ ( / ) คือรัศมีแนวนอน (เทียบเท่ากับ rx ) และค่าหลังเครื่องหมายทับเป็นค่าแนวตั้ง (เทียบเท่ากับ ry )

สี่เหลี่ยมผืนผ้าโค้งมนที่มีหลายรัศมี

ในเครื่องมือออกแบบ เช่นเดียวกับใน CSS ทุกมุมของสี่เหลี่ยมผืนผ้าสามารถควบคุมแยกกันได้ กล่าวอีกนัยหนึ่ง แต่ละมุมสามารถมีรัศมีของตัวเองได้ (หรือไม่มีรัศมีเลยก็ได้) การดำเนินการดังกล่าวไม่สามารถทำได้ในองค์ประกอบ <rect /> ใน SVG แต่ละองค์ประกอบ <rect /> มีแอตทริบิวต์ rx และ ry เพียงรายการเดียว หากคุณสร้างสี่เหลี่ยมผืนผ้าที่มีรัศมีหลายอันที่มุมของมัน เครื่องมือออกแบบจะสร้างองค์ประกอบ <path /> แทนที่จะเป็นองค์ประกอบ <rect /> เราจะพูดถึงองค์ประกอบ <path /> เพิ่มเติมในหัวข้อถัดไป

มุมเรียบ

หนึ่งในคุณสมบัติที่น่าสนใจที่ Sketch และ Figma นำเสนอเมื่อไม่นานมานี้คือมุมที่ราบรื่น กล่าวโดยย่อคือ มุมเรียบจะใช้รัศมีเส้นขอบที่ไม่สม่ำเสมอเพื่อให้ได้ผลลัพธ์ที่ดูเป็นธรรมชาติและเรียบเนียนยิ่งขึ้น การใช้งานมุมเรียบที่พบบ่อยที่สุดคือไอคอนแอปและองค์ประกอบที่โค้งมนอื่นๆ บน iOS Apple ใช้มุมมน "ปกติ" บนแพลตฟอร์มมือถือจนถึง iOS6 จากนั้นจึงเปลี่ยนไปใช้มุมที่เราเรียกว่า "มุมเรียบ" ในปัจจุบัน ซึ่งเป็นส่วนหนึ่งของการออกแบบครั้งใหญ่ที่เปิดตัวในปี 2013 (iOS7)

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

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

Figma ละเว้นมุมเรียบ และส่งออกสี่เหลี่ยมผืนผ้าเป็นองค์ประกอบ <rect /> ปกติที่มีมุมโค้งมน ในทางกลับกัน Sketch ส่งออกสี่เหลี่ยมที่มีมุมเรียบเป็น <path /> ที่พยายามจำลองรูปร่างที่แท้จริงของมุมเรียบ ดังนั้น Figma จึงให้ความแม่นยำที่แย่ลงสำหรับการรักษาสี่เหลี่ยมผืนผ้าให้เป็นรูปสี่เหลี่ยมผืนผ้า ในขณะที่ Sketch มุ่งเป้าไปที่ความแม่นยำสูงสุดเท่าที่จะเป็นไปได้ในราคาของความหมายและขนาดไฟล์ที่ใหญ่ขึ้น หากคุณต้องการเข้าใจมากขึ้นว่าความแตกต่างนี้หมายความว่าอย่างไร เราจะเจาะลึกถึงข้อดีและข้อเสียของการรักษารูปทรงพื้นฐานในภายหลัง

เส้น

องค์ประกอบพื้นฐานประเภทต่อไปคือเส้น ในกรณีนี้ เราเรียกเส้นหนึ่งว่าเป็นเส้นตรงเส้นเดียวที่ลากจากจุด A ไปจุด B Illustrator, Sketch และ Figma ต่างก็มีเครื่องมือสำหรับวาดเส้นของตัวเองโดยเฉพาะ ใน SVG เรามีองค์ประกอบ <line /> จำเป็นต้องมีแอตทริบิวต์สี่ประการ: พิกัดของจุดเริ่มต้นและพิกัดของจุดสิ้นสุด:

 <line x1="100" y1="100" x2="200" y2="200"/>

เมื่อพูดถึงการส่งออก Illustrator และ Figma จะส่งออกเส้นเป็นองค์ประกอบ <line /> หากเป็นไปได้ ในขณะที่ Sketch จะคำนวณเส้นไปยังองค์ประกอบ <path /> เสมอ

Polylines

ทีนี้มาดูโพลิไลน์กัน Polyline เป็นชุดของเส้นตรงที่เชื่อมต่อกัน Polylines ไม่มีเครื่องมือเฉพาะในเครื่องมือออกแบบ สามารถวาดด้วยเครื่องมือ Pen (ใน Illustrator และ Figma) หรือด้วยเครื่องมือ Vector (ใน Sketch)

ใน SVG เส้นแบ่งถูกกำหนดด้วยองค์ประกอบ <polyline /> <polyline /> วาดโดยใช้แอตทริบิวต์ points ซึ่งเป็นรายการพิกัดที่กำหนดจุดทั้งหมดที่สร้าง polyline มาดูตัวอย่างของโพลิไลน์ที่ประกอบด้วยสามส่วนและสี่จุด:

 <polyline points="10,20 10,20 30,10 40,20" />

Illustrator และ Sketch แปล polylines เป็นองค์ประกอบ <polyline/> ในขณะที่ Figma ส่งออก polylines เป็น <path /> s

ลูกศร

ในเครื่องมือทั้งสามนี้ คุณสามารถควบคุมส่วนท้ายของบรรทัดเพื่อเปลี่ยนเป็นลูกศรและอื่นๆ ได้ และเครื่องมือทั้งสามจะส่งออกบรรทัดเช่น <path /> s แม้ว่าจะไม่ใช้ตัวพิมพ์ใหญ่ก็ตาม รูปร่างเดียวกันก็จะถูกแปลเป็น <line /> s หรือ <polyline /> s เป็นเพราะ SVG ไม่รองรับลูกศรใช่ไหม ไม่แน่

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

<marker> เป็นองค์ประกอบ SVG แยกต่างหากที่สามารถกำหนดได้ภายใน <defs> ของ SVG จากนั้นใช้กับองค์ประกอบ <line> , <polyline> และ <path> ที่มีแอตทริบิวต์ marker: marker , marker-start , marker-mid และ marker-end . หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับคุณลักษณะเหล่านี้ เราขอแนะนำให้คุณตรวจสอบเอกสารอย่างเป็นทางการของ W3C

รูปหลายเหลี่ยมและดวงดาว

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

รูปหลายเหลี่ยมบางรูปเป็นรูปหลายเหลี่ยมปกติ สิ่งที่พิเศษเกี่ยวกับรูปหลายเหลี่ยมปกติคือด้านและมุมทั้งหมดเท่ากัน ในการวาดรูปหลายเหลี่ยมปกติ เช่น รูปหกเหลี่ยมหรือห้าเหลี่ยม คุณสามารถใช้เครื่องมือ รูปหลายเหลี่ยม ได้เช่นเดียวกันใน Illustrator, Sketch และ Figma เครื่องมือ รูปหลายเหลี่ยม ใน Illustrator และ Sketch จะสร้างองค์ประกอบ <polygon /> ใน SVG ในทางกลับกัน ใน Figma รูปร่างทั้งหมดที่สร้างด้วยเครื่องมือ Polygon จะส่งผลให้องค์ประกอบ <path />

เครื่องมือออกแบบทั้งสามยังมีเครื่องมือ Star สำหรับการวาดดาวโดยเฉพาะ อย่างไรก็ตาม เมื่อพูดถึงการส่งออก รูปร่างที่สร้างด้วยเครื่องมือ Star จะทำงานเหมือนกับที่สร้างด้วยเครื่องมือ Polygon ใน SVG ดวงดาวเป็นเพียงรูปหลายเหลี่ยม ไม่มีองค์ประกอบ ~~<star />~~

สิ่งสำคัญคือต้องจำไว้ว่าเครื่องมือรูป ดาว และ รูปหลายเหลี่ยม ถูกใช้เพื่อสร้างดาวฤกษ์และรูปหลายเหลี่ยมแบบปกติ ในขณะที่องค์ประกอบ <polygon /> ใน SVG สามารถใช้กับรูปหลายเหลี่ยมแบบปกติหรือแบบผิดปกติได้

ถนนทุกสายมุ่งสู่ <path />

ดังที่เราได้เรียนรู้ไปแล้ว ใน SVG มีรูปร่างพื้นฐานสามแบบที่มีไว้สำหรับการวาดรูปร่างจากเส้นตรงโดยเฉพาะ: <line /> , <polyline /> และ <polygon /> แต่ถ้าเราต้องการให้เส้นของเราโค้งล่ะ? ถึงเวลาแล้วที่เราจะพูดถึงองค์ประกอบ <path />

<path /> องค์ประกอบ

<path /> เป็นองค์ประกอบ SVG ที่หลากหลายที่สุด สามารถใช้เพื่อวาดเส้นและรูปร่างใดๆ ที่เป็นไปได้ ซึ่งรวมถึงแต่ไม่จำกัดเพียง รูปร่างพื้นฐานทั้งหมดที่ระบุไว้ข้างต้น ในความเป็นจริง ทุกรูปร่างพื้นฐาน ( <circle/> , <ellipse /> , <rect /> , <line /> , <polyline /> , <polygon /> ) สามารถอธิบายเป็นองค์ประกอบ <path /> ยิ่งไปกว่านั้น มีรูปทรงมากมายที่สามารถสร้างด้วย <path /> แต่ไม่สามารถสร้างด้วยองค์ประกอบ SVG อื่น ๆ ได้ หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับ <path /> และไวยากรณ์ของมัน เราขอแนะนำให้คุณอ่านบทความที่ยอดเยี่ยมนี้โดย Chris Coyier

ตอนนี้ เราจะสร้างองค์ประกอบ <path /> ในเครื่องมือออกแบบได้อย่างไร อย่างแรก ตามที่เราได้เรียนรู้ข้างต้น เลเยอร์บางอันที่สร้างด้วยเครื่องมือรูปร่างคำนวณไปยังองค์ประกอบ <path /> แม้ว่าในทางทฤษฎีแล้ว อาจเป็นองค์ประกอบอื่นๆ (เช่น Figma ส่งออกรูปหลายเหลี่ยมทั้งหมดเป็น <path /> s แม้ว่าจะเป็น กำหนดเป็น <polygon /> s จากนั้น ทุกรูปร่างที่ผิดปกติอื่น ๆ ที่เราวาดด้วยเครื่องมือ Pen หรือเครื่องมือ Vector จะต้องส่งออกเป็น <path /> เนื่องจากไม่มีองค์ประกอบ SVG อื่นที่สามารถกำหนดได้ ในที่สุด ใน Sketch และ Figma เราสามารถแปลงรูปร่างพื้นฐานเป็นเลเยอร์ที่คำนวณเป็น <path /> ใน Sketch เราสามารถทำได้โดยเลือก Layer > Combine > Flatten ในขณะที่ Figma เราสามารถพบฟังก์ชันนี้ภายใต้ Object > Flatten Selection ( ⌘ + E บน macOS, Ctrl + E บน Windows)

การดำเนินการบูลีน

การดำเนินการบูลีนเป็นฟังก์ชันที่ดำเนินการกับรูปร่างเพื่อรวมเข้าด้วยกันด้วยวิธีต่างๆ ใน Illustrator, Sketch และ Figma มีการดำเนินการบูลีนมาตรฐาน 4 แบบ:

• ยูเนี่ยน (รวมกัน)
  ผลรวมของรูปทรง
• ลบ (ลบด้านหน้า)
  รูปร่างด้านล่างลบด้วยพื้นที่ส่วนกลางระหว่างรูปร่าง
• ตัด
  พื้นที่ส่วนกลางระหว่างรูปทรง
• ส่วนต่าง (ไม่รวม)
  ผลรวมของรูปร่างที่หักด้วยพื้นที่ส่วนกลางระหว่างรูปร่าง

ใน Illustrator ฟังก์ชันทั้งหมดเหล่านี้สร้างรูปร่างเดียว (เค้าร่าง) เป็นการกระทำที่ไม่สามารถย้อนกลับได้—ไม่เช่นนั้นจะใช้ เลิกทำ ( ⌘ + Z บน macOS, Ctrl + Z บน Windows) ใน Sketch และ Figma การดำเนินการบูลีนจะสร้างกลุ่มเลเยอร์ที่สามารถยกเลิกการจัดกลุ่มได้ในภายหลังโดยไม่มีอันตรายใดๆ กับรูปร่างภายใน อย่างไรก็ตาม คุณสามารถรวมกลุ่มเหล่านี้เป็นรูปร่างเดียวเพื่อให้ได้ผลลัพธ์ที่คล้ายคลึงกันใน Illustrator โดยใช้ฟังก์ชัน Flatten ที่กล่าวถึงในย่อหน้าก่อนหน้า

คำถามคือ SVG รองรับการดำเนินการบูลีนหรือไม่ ไม่มันไม่ได้ พวกเขาเพิ่งจะรวมกัน ดังนั้น ทุกรูปร่างที่คุณสร้างด้วยการดำเนินการบูลีนใน Figma หรือ Sketch จะถูกส่งออกเป็นองค์ประกอบ <path /> เดียว

มันดูเหมือนกัน เหตุใดจึงสำคัญ

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

รูปร่างดังกล่าวสามารถกำหนดใน SVG ได้หลายวิธี อาจเป็นองค์ประกอบ <rect /> องค์ประกอบ <polygon /> มันสามารถเป็นองค์ประกอบ <path /> ได้อย่างแน่นอน (เนื่องจากทุกอย่างสามารถเป็นองค์ประกอบ <path /> ได้) นอกจากนี้ยังสามารถเป็นองค์ประกอบ <line /> (หรือองค์ประกอบ <polyline /> ) หากเราตัดสินใจที่จะสร้างโดยใช้จังหวะแทนการเติม

แต่ละองค์ประกอบเหล่านี้สร้างสี่เหลี่ยมผืนผ้าที่มีลักษณะเหมือนกันทุกประการ:

แต่ถ้าผลลัพธ์สุดท้าย (กราฟิกที่แสดงโดยตัวแทนผู้ใช้ในเบราว์เซอร์) ดูเหมือนกัน ไม่สำคัญจริง ๆ ว่าเราจะเลือกแนวทางใด? มันก็ไม่ ตามกฎทั่วไป ฉันมักจะแนะนำให้ใช้รูปทรงพื้นฐานเมื่อทำได้

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

1. ความหมาย/ความสามารถในการอ่าน
   เครื่องมือบีบอัด เช่น SVGO ให้ตัวเลือกแก่คุณในการคำนวณรูปร่างพื้นฐานทั้งหมดไปยังองค์ประกอบเส้นทาง มันสามารถช่วยคุณประหยัดเวลาได้เล็กน้อย แต่จะลดความสามารถในการอ่านโค้ดของคุณลงอย่างแน่นอน ไวยากรณ์ <path /> นั้นไม่เป็นธรรมชาติอย่างยิ่ง ดังนั้นหาก SVG ของคุณกำลังจะได้รับการแก้ไขในตัวแก้ไขโค้ดแทนที่จะเป็นเครื่องมือออกแบบ มันจะเข้าใจได้ง่ายกว่ามากหากคุณเก็บรูปร่างพื้นฐานไว้เป็นรูปร่างพื้นฐาน
2. ขนาดไฟล์
   การบีบอัดรูปร่างไปยังเส้นทางอาจช่วยให้คุณย่อขนาดไฟล์ได้ แต่ก็ไม่เสมอไป! ตัวอย่างเช่น สี่เหลี่ยมผืนผ้าโค้งมนใช้พื้นที่เป็น <path /> มากกว่าเป็น <rect />
3. แอนิเมชั่น
   คุณเคยพยายามทำให้ SVG เคลื่อนไหวหรือไม่? สนุกมาก — ตราบใดที่คุณใช้ SVG ที่สะอาดและมีความหมาย ด้วยรูปร่างพื้นฐาน คุณสามารถจัดการพารามิเตอร์ต่างๆ เช่น รัศมี ความกว้าง ความสูง หรือตำแหน่งของจุดได้อย่างง่ายดาย หากคุณรวมรูปร่างของคุณเป็นเส้นทาง การดำเนินการส่วนใหญ่จะทำได้ยากกว่ามากหรือเป็นไปไม่ได้เลย
4. ตัวแปร/การตอบสนอง
   โปรดจำไว้ว่า SVG ไม่ใช่ภาพนิ่ง เช่น JPG คุณสามารถจัดรูปแบบ กำหนดธีม ทำให้ตอบสนอง และอื่นๆ เช่นเดียวกับแอนิเมชั่น การทำให้ไฟล์ของคุณมีโครงสร้างที่ดีและมีความหมายจะช่วยคุณทำงานเหล่านั้นได้อย่างแน่นอน

เช่นเดียวกับกฎทุกข้อ คุณสามารถหาข้อยกเว้นบางประการได้ แต่โดยทั่วไป การรักษา SVG ของคุณให้อ่านง่าย ยืดหยุ่น และมีโครงสร้างมากที่สุด ถือเป็นแนวทางปฏิบัติที่ดี

ตอนนี้ มาดูแอตทริบิวต์และฟีเจอร์อื่นๆ เช่น viewBox, กลุ่ม, การแปลงและเอฟเฟกต์ภาพกัน

width height และ viewBox

หากคุณมีประสบการณ์กับ SVG มาบ้างแล้ว คุณอาจสังเกตเห็นว่าแท็กเปิด <svg> มักมีคุณสมบัติดังต่อไปนี้: width , height และ viewBox ในเครื่องมือออกแบบ เรามีขนาดของอาร์ตบอร์ด (หรือเฟรมในกรณีของ Figma) แล้วค่าเหล่านี้เกี่ยวข้องกันอย่างไร?

เริ่มต้นด้วยการอธิบายแอตทริบิวต์ <svg> ที่เราเพิ่งกล่าวถึง คุณสามารถมองว่า viewBox เป็นผืนผ้าใบเสมือนในรูปแบบของระบบพิกัด ศูนย์กลางของระบบพิกัดนี้จะอยู่ที่มุมซ้ายบนของพื้นที่ที่กำหนด รายการทั้งหมดภายในแท็ก <svg viewBox="…"> จะถูกจัดวางตามระบบพิกัดนี้และตัดทอนด้วย ระบบจะไม่แสดงสิ่งใดๆ ที่ล้น viewBox viewBox ยอมรับ 4 ตัวเลขเป็นค่าของมัน:

 <svg viewBox="0 0 12 8"> … </svg>

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

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

width and height เป็นแอตทริบิวต์ <svg> ที่กำหนดความกว้างและความสูงที่แท้จริงขององค์ประกอบ SVG ตรงกันข้ามกับ viewBox พวกเขาควรใช้หน่วยที่ระบุ เช่น พิกเซล ems หรือ rems ซึ่งหมายความว่าเราสามารถแปลง SVG ด้วยได้ — หากอัตราส่วนระหว่าง width และ height แตกต่างจากอัตราส่วนระหว่างค่าของ viewBox นั้น SVG จะเอียงกราฟิกที่ระบุภายใน viewBox ตามค่า width และ height :

จะเกิดอะไรขึ้นเมื่อเราส่งออก SVG จากเครื่องมือออกแบบ ใน Sketch และ Figma เนื้อหาทั้งหมด (ไม่ว่าจะเป็นเลเยอร์เดียว กลุ่ม หรืออาร์ตบอร์ด) จะได้รับ viewBox เท่ากับขนาดขององค์ประกอบที่ส่งออกและตั้งค่า width และ height เป็นพิกเซล เท่ากับค่าสองค่าสุดท้ายของ viewBox ภาพ ใน Illustrator เนื้อหาทั้งหมดมี viewBox ซึ่งระบุในลักษณะเดียวกับใน Sketch และ Figma แต่ไม่ได้ใช้ width และ height

กลุ่ม

กลุ่มเป็นเครื่องมือพื้นฐานในการจัดระเบียบเลเยอร์ในเครื่องมือออกแบบ นอกเหนือจากการตั้งค่าลำดับชั้นแล้ว กลุ่มยังใช้เพื่อนำการดำเนินการจำนวนมากไปใช้ เช่น การแปลง กับองค์ประกอบหลายรายการ การทำงานของกลุ่มใน Illustrator, Sketch และ Figma ไม่มีความแตกต่างกันอย่างมีนัยสำคัญ และโชคดีที่ฟังก์ชันพื้นฐานของกลุ่ม SVG ( <g>…</g> ) ค่อนข้างเหมือนกัน

แปลงร่าง

ใน SVG มีการแปลงพื้นฐานห้าแบบที่เรานำไปใช้กับองค์ประกอบได้:

1. translate : ย้ายองค์ประกอบไปตามแกนแนวตั้งและ/หรือแนวนอน;
2. scale : ปรับขนาดองค์ประกอบตามแกนแนวตั้งและ/หรือแนวนอน:
3. rotate : สร้างการหมุนสองมิติโดยมุมที่กำหนดเป็นองศารอบจุดที่กำหนด
4. skew ( skewX หรือ skewY ): เอียงองค์ประกอบตามมุมที่กำหนดเป็นองศาตามแกนแนวตั้งหรือแนวนอน
5. matrix : ฟังก์ชันการแปลงที่มีความซับซ้อนและหลากหลายที่สุด เนื่องจากต้องใช้การพูดคุยพีชคณิตค่อนข้างมากเพื่ออธิบายว่าการแปลงเมทริกซ์ทำงานอย่างไร มันจึงอยู่นอกเหนือขอบเขตของบทความนี้ ให้ยอมรับว่า matrix อนุญาตให้คุณทำการแปลงที่ซับซ้อนได้หลายอย่าง เช่น การยืด การบีบ การตัด และอื่นๆ

หมายเหตุ : โปรดสังเกตว่าแม้ว่าการแปลง SVG บางรายการจะดูคล้ายกับการแปลง CSS มาก แต่ก็ไม่เหมือนกัน ตัวอย่างเช่น CSS มีทั้งฟังก์ชันการหมุน 2D และ 3D ในขณะที่ SVG มีฟังก์ชันการหมุน 2D เพียงฟังก์ชันเดียว นอกจากนี้ ในขณะที่ CSS ยอมรับหน่วยมุมต่างๆ เช่น องศาหรือเรเดียน การหมุน SVG จะถูกตั้งค่าเป็นองศาเสมอ ดังนั้น สามารถละเว้นหน่วยได้ (เช่น rotation rotate(45) , NOT ~~rotate(45deg)~~ )

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

 <g transform="scale(3) rotate(90) translate(50,100)"> … </g>

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

การหมุนเป็นข้อยกเว้น โดยค่าของมันถูกเก็บไว้ใน Inspector แยกจากเรขาคณิตขององค์ประกอบ และส่งออกเป็นฟังก์ชัน transform="rotate(…)"

น่าสนใจ กฎเดียวกันนี้ใช้กับการพลิก (ภาพสะท้อน) ใน Sketch และ Figma (ไม่ใช่ใน Illustrator!) แต่ละคนก็มีแนวทางเป็นของตัวเอง Sketch ใช้การผสมผสานของการปรับขนาดเชิงลบและการแปลเพื่อให้ได้เอฟเฟกต์พลิก ในขณะที่ Figma ทำการพลิกภายในฟังก์ชันเมทริกซ์เดียว

รัศมีชายแดน

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

แต่แล้ว SVG ล่ะ? องค์ประกอบ <polygon /> และ <path /> มีแอตทริบิวต์ rx และ ry ด้วยหรือไม่ น่าเสียดายที่ไม่มี รูปร่างใดๆ ที่ไม่ใช่สี่เหลี่ยมผืนผ้า เมื่อคุณปัดเศษมุมใดๆ ของมัน จะถูกส่งออกเป็นองค์ประกอบ <path /> ที่ถือว่ามุมโค้งมนเป็นส่วนสำคัญของเรขาคณิตของรูปร่าง

เติมและจังหวะ

Illustrator, Sketch และ Figma รองรับการเติมและการลากเส้นเป็นคุณสมบัติพื้นฐานของรูปร่างใดๆ ดังนั้นจึงเกิดขึ้นใน SVG ดังนั้น การเติมที่ระบุในเครื่องมือออกแบบจะถูกส่งออกภายในแอตทริบิวต์การ fill และสโต๊คจะถูกส่งออกภายในแอตทริบิวต์ stroke อย่าคิดว่ามันตรงไปตรงมาทั้งหมด ปีศาจอยู่ในรายละเอียด

เติมสี

การเติมสีเป็นการเติมพื้นฐานที่สุดที่มี และระบุด้วยสีธรรมดาสีเดียว (เช่น #3fd8e2 ) ใน SVG ค่านี้จะถูกใส่โดยตรงในแอตทริบิวต์การ fill (เช่น fill="#3fd8e2" )

เครื่องมือออกแบบส่งออกการเติมสีด้วยค่าฐานสิบหก (เช่น #0000ff ) แม้ว่าใน SVG คุณยังสามารถใช้รูปแบบการตั้งชื่ออื่นๆ ทั้งหมดที่ CSS รู้จัก เช่น ชื่อสี (เช่น blue ) ค่า RGB (เช่น rgb(0,0,255) ) หรือแม้แต่ค่า HSL (เช่น hsl(240,100%,50%) )

เติมความทึบ

เมื่อพูดถึงการเติมความทึบ SVG ยอมรับสีกึ่งโปร่งใส (เช่น ค่า RGBA) แม้ว่าจะมีแอตทริบิวต์การ fill-opacity ก็ตาม เนื่องจากปัญหาความเข้ากันได้ การใช้ fill-opacity จึงเป็นแนวทางที่แนะนำและเป็นแนวทางที่ใช้โดย Figma และ Sketch (ฉันไม่ได้พูดถึง Illustrator ที่นี่ เนื่องจาก Illustrator ไม่อนุญาตให้คุณควบคุมความทึบของการเติม) ดังนั้น หากคุณต้องการสร้างสี่เหลี่ยม SVG ที่เต็มไปด้วยสีแดงกึ่งโปร่งใส คุณสามารถทำสิ่งต่อไปนี้:

 <rect width="100" height="100" fill="rgba(255,0,0,0.5)" />

แต่แนวทางที่แนะนำมากกว่า (ใช้โดย Sketch และ Figma) จะเป็น:

 <rect width="100" height="100" fill="#ff0000" fill-opacity="0.5" />

ไล่โทนสี

หากคุณคุ้นเคยกับ CSS คุณอาจทราบดีว่าเมื่อพูดถึงพื้นหลัง การสลับไปมาระหว่างพื้นหลังสีและการไล่ระดับสีนั้นค่อนข้างตรงไปตรงมา คุณสมบัติ background-color (หรือ background ) เดียวกันสามารถใช้ได้ในทั้งสองกรณี เนื่องจากการไล่ระดับสีใน SVG นั้นเก่ากว่าการไล่ระดับสี CSS มาก ไวยากรณ์ของพวกมันจึงค่อนข้างแตกต่างกัน

ในการใช้การไล่ระดับสีคือ SVG ก่อนอื่นคุณต้องกำหนดมันภายในแท็ก <defs>…</defs> จากนั้นอ้างอิงในแอตทริบิวต์การ fill เช่น:

 <defs> <linearGradient> <stop stop-color="red" offset="0%"></stop> <stop stop-color="blue" offset="100%"></stop> </linearGradient> </defs> <rect fill="url(#myGradient)" />

ดังนั้น สิ่งที่เกิดขึ้นระหว่างการส่งออก SVG เมื่อคุณใช้การเติมแบบไล่ระดับคือการไล่ระดับสีใน <defs> และกำลังถูกอ้างอิงในโค้ดด้านล่าง

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

รูปแบบ/การเติมรูปภาพ

Sketch และ Figma ยังมีการเติมรูปภาพโดยใช้กราฟิกแรสเตอร์เพื่อเติมองค์ประกอบทั้งหมดหรือเป็นรูปแบบซ้ำ

เมื่อพูดถึงการส่งออกการเติมรูปภาพไปยัง SVG จริงๆ แล้วค่อนข้างคล้ายกับการไล่ระดับสี รูปภาพถูกกำหนดใน <defs> ด้วยองค์ประกอบ <pattern>…</pattern> แล้วอ้างอิงภายในแอตทริบิวต์การ fill :

 <defs> <pattern patternUnits="objectBoundingBox"> <use xlink:href="#picture"></use> </pattern> </defs> <rect fill="url(#myPattern)" />

เพื่อให้ใช้งานได้ #picture รูปภาพอ้างอิงต้องกำหนดไว้ที่ใดที่ หนึ่ง เครื่องมือออกแบบจะฝังโดยตรงใน SVG เป็นองค์ประกอบ <image/> แม้ว่าจะไม่ใช่แนวทางที่แนะนำสำหรับประสิทธิภาพก็ตาม หากคุณต้องการใช้ภาพแรสเตอร์ใน SVG ของคุณจริงๆ ฉันขอแนะนำให้ลบแท็กรูปภาพออกจาก SVG และใช้เป็นไฟล์สแตนด์อโลนแทน:

 <defs> <pattern patternUnits="objectBoundingBox"> <use xlink:href="#picture"></use> </pattern> <image xlink:href="image.png"/> </defs> <rect fill="url(#myPattern)" />

จังหวะ

แอตทริบิวต์ stroke ใน SVG เช่นเดียวกับแอตทริบิวต์ fill ที่ยอมรับสีในรูปแบบต่างๆ เช่น hex, RGB หรือ HSL และในทำนองเดียวกันการ fill คุณสามารถควบคุมความทึบของจังหวะด้วย stroke-opacity เช่นเดียวกับการ fill สโตรกสามารถใช้การไล่ระดับสีเป็นค่าได้ เอฟเฟกต์ทั้งหมดสามารถทำได้ในเครื่องมือออกแบบและส่งออกไปยัง SVG ได้สำเร็จ

หมวกโรคหลอดเลือดสมองและเข้าร่วม

นอกจากนี้ยังมีคุณลักษณะเฉพาะบางจังหวะอีกด้วย ขั้นแรก คุณสามารถควบคุมความกว้างของเส้นขีดได้ เครื่องมือออกแบบรองรับและส่งออกเป็นแอตทริบิวต์ stroke-width คุณยังสามารถควบคุมการสิ้นสุดและการเข้าร่วมของจังหวะ SVG ช่วยให้คุณกำหนดได้โดย stroke-linecap และ stroke-linejoin หมวกแก็ปที่เป็นไปได้มีสามแบบ: ฝา butt และฝา square และการต่อแบบ round เป็นไปได้สามแบบ: การรวมแบบ miter การรวมแบบ round และการรวม bevel ทั้งตัวพิมพ์ใหญ่และตัวเชื่อมสามารถควบคุมได้ใน Illustrator, Figma และ Sketch และตัวพิมพ์ใหญ่และตัวเชื่อมที่พร้อมใช้งานจะจับคู่กับตัวพิมพ์ใหญ่ที่มีให้ใน SVG

เส้นประและเส้นประ

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

SVG ช่วยให้คุณสร้างเส้นประด้วยแอตทริบิวต์ stroke-dasharray stroke-dasharray อนุญาตให้ส่งลำดับของขีดคั่นและช่องว่างหลายรายการเป็นค่าที่ตรงกับคุณสมบัติของ Figma และ Illustrator นอกจากนี้ยังหมายความว่า Sketch ไม่อนุญาตให้คุณใช้ SVG ที่เป็นไปได้ทั้งหมดในกรณีนี้

กรณีขอบที่น่าสนใจคือเส้นประ เราทำสำเร็จโดยการตั้งค่าส stroke-linecap ให้ round และความยาวของเส้นประเป็นศูนย์ เช่น

 <line … stroke="black" stroke-dasharray="0 2" stroke-linecap="round"/>

หมายเหตุ : ปัจจุบันผู้ใช้ Figma พบจุดบกพร่องที่ไม่อนุญาตให้สร้างเส้นประ ตัวอย่างเช่น การใช้ 0, 10 หรือ 10, 0 ในการตีความ Dashes แบบเดียวกับ 10, 10 และให้เส้นประปกติแทนที่จะเป็นเส้นประ โชคดีที่มีวิธีหลีกเลี่ยง แทนที่จะใช้ศูนย์ ให้ใช้ค่าที่น้อยมาก เช่น 0.0001, 10 ซึ่งควรส่งผลให้เส้นประสมบูรณ์ตามที่คาดไว้

การจัดตำแหน่งจังหวะ

มีอีกอย่างหนึ่ง ความแตกต่างที่สำคัญกว่ามากระหว่างเครื่องมือออกแบบและ SVG: การจัดตำแหน่งจังหวะ Illustrator, Sketch และ Figma ทั้งหมดช่วยให้คุณสามารถควบคุมการจัดแนวของสโตรกและตั้งค่าภายใน ภายนอก หรือการจัดแนวกึ่งกลาง แต่เดาอะไร? SVG 1.1 ไม่รองรับการจัดตำแหน่งจังหวะ ใน SVG จังหวะทั้งหมดเป็นจังหวะที่จัดกึ่งกลาง ไม่มีจังหวะภายในหรือจังหวะภายนอก นี่คือสาเหตุที่มีสิ่งแปลก ๆ เกิดขึ้นเมื่อคุณส่งออกการสโตรกภายนอกและภายในของคุณไปยัง SVG

ผู้วาดภาพประกอบ ในกรณีดังกล่าว ส่งออกรูปร่างและเส้นขีดเป็นรูปร่างสองแบบแยกกัน ดังนั้น หากคุณใช้เส้นในหรือเส้นขีดภายนอกกับสี่เหลี่ยมผืนผ้าใน Illustrator ใน SVG จะส่งผลให้มีรูปสี่เหลี่ยมผืนผ้าและองค์ประกอบ <path /> ที่แยกจากกันแทนการลากเส้นของสี่เหลี่ยมผืนผ้า เช่น:

 <rect x="10" y="10" width="120" height="120"/> <path d="M120,20V120H20V20H120M140,0H0V140H140V0Z"/>

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

Figma และ Sketch มีแนวทางที่แตกต่างกัน พวกเขาส่งออกสโตรกทั้งหมดเป็นสโตรกอย่างซื่อสัตย์ แต่จะคำนวณขนาดของรูปร่างใหม่ ดังนั้น หากคุณมีวงกลมที่มีรัศมีเท่ากับ 5 และเส้นภายในเท่ากับ 2 สิ่งที่คุณจะพบใน SVG ของคุณจะเป็นวงกลมที่มีรัศมีเท่ากับ 4 (และเส้นขีดยังเท่ากับ 2)

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

หมายเหตุ: ปัญหาเดียวกันกับการจัดตำแหน่งจังหวะใช้กับ CSS เช่นกัน คุณสมบัติ border CSS ไม่รองรับการจัดตำแหน่งภายในและภายนอกเช่นกัน อย่างไรก็ตาม หากต้องการ คุณสามารถแฮ็กลักษณะการทำงานนี้ด้วยคุณสมบัติ โครง outline และ box-shadow

เติมหลายครั้งและจังหวะ

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

เงา ฟิลเตอร์ และเอฟเฟกต์อื่นๆ

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

ขอบเขตทั้งหมดของความเป็นไปได้ของตัวกรอง SVG นั้นกว้างเกินไปที่จะอธิบายในบทความนี้ หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับพวกเขา เราขอแนะนำให้คุณดูการพูดคุยและบทความเกี่ยวกับหัวข้อนี้โดย Sarah Soueidan

ต้องกำหนดตัวกรองเช่นเดียวกับรูปแบบหรือการไล่ระดับสีเพื่อนำไปใช้กับเลเยอร์ในภายหลัง Every filter is defined as a <filter>…</filter> element that can contain numerous effects, known as filter primitives , each standing for a separate visual effect.

Filter primitives can be combined together to create filters. For example, this is what a basic blur effect applied to a rectangle looks like:

 <defs> <filter> <feGaussianBlur stdDeviation="10"/> </filter> </defs> <rect filter="url(#GaussianBlur)" width="200" height="300"/>

…but you can also create a more complex filter that consists of more than one filter primitive:

 <defs> <filter> <feGaussianBlur stdDeviation="10"/> <feMorphology operator="dilate" in="SourceGraphic" radius="3" /> </filter> </defs> <rect filter="url(#GaussianBlur)" width="200" height="300"/>

Out of the three design tools we discuss, only Illustrator lets you play with SVG filters. You can find them in the app's menu, under Effect > SVG Filters . Sketch and Figma are a completely different story. Any effects these applications offer are mostly focused on CSS and native implementations, eg Background Blur effect was implemented primarily for designing iOS apps and Drop/Inner Shadow effects parameters are matching CSS properties ( box-shadow and text-shadow ).

It doesn't mean we can't export these effects to SVG. We can. However, translating these effects to SVG is utterly not as straightforward as to CSS. Let's consider a square with a drop shadow applied.

This is how our square could look like, once exported to HTML/CSS:

 <style> .square { width: 100px; height: 100px; background: red; box-shadow: 10px 10px 24px 0 rgba(0,0,0,0.5); } </style> <div class="square"></div>

A similar square exported from Sketch to SVG gives us a significantly more complex piece of code:

 <defs> <rect x="14" y="14" width="100" height="100"></rect> <filter x="-31.0%" y="-31.0%" width="182.0%" height="182.0%" filterUnits="objectBoundingBox"> <feOffset dx="10" dy="10" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset> <feGaussianBlur stdDeviation="12" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur> <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix> </filter> </defs> <g> <use fill="black" filter="url(#filter-2)" xlink:href="#square"></use> <use fill="#FF0000" fill-rule="evenodd" xlink:href="#square"></use> </g>

What happens here is that Sketch duplicates the square, so we have two identical squares, one above another, and turns the duplicate into a shadow.

To accomplish this, it applies a filter to a duplicated square that consists of three different filter primitives:

• one to offset the square;
• one to set its color to semi-transparent black;
• one to blur it.

In other design tools, we would encounter a similar situation.

It doesn't mean that we should never, by all means, use shadows in SVG. It's handy to keep in mind though that as long as SVG gives you a very powerful toolkit to modify your graphics, some seemingly simple effects are not that simple to achieve at all.

โหมดผสมผสาน

โหมดผสมผสาน (เช่น Darken , Multiply หรือ Overlay ) อนุญาตให้ผสมองค์ประกอบตั้งแต่สององค์ประกอบขึ้นไปโดยการรวมค่าเข้าด้วยกันในรูปแบบต่างๆ ที่รู้จักกันดีในหมู่นักออกแบบกราฟิก (และแอพพลิเคชั่นเช่น Adobe Photoshop) โหมดผสมผสานทำงานใน Sketch, Figma และ Illustrator เช่นกัน

ใน SVG มีโหมดผสมผสานเป็นหนึ่งในตัวกรอง พวกเขามีตัวกรอง <feBlend /> ดั้งเดิม อย่างไรก็ตาม เนื่องจากไวยากรณ์ของ <feBlend /> ค่อนข้างซับซ้อน Sketch, Figma และ Illustrator จึงใช้ CSS แทน:

 .rectangle { mix-blend-mode: overlay; }

ด้วยการสนับสนุนเบราว์เซอร์ mix-blend-mode ที่ค่อนข้างดีในปัจจุบันนี้ จึงไม่น่าจะเป็นปัญหาใหญ่ อย่างไรก็ตาม หากคุณต้องแน่ใจว่าการสนับสนุนเบราว์เซอร์กันกระสุนซึ่งรวมถึง Microsoft Edge และ IE เป็นสิ่งสำคัญ คุณจะต้องเปลี่ยนโหมดผสมผสาน CSS ด้วยตัวกรอง SVG ด้วยตนเอง

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

สัญลักษณ์และส่วนประกอบ

ในตัวอย่างโค้ดบางส่วนด้านบน คุณอาจสังเกตเห็นองค์ประกอบที่เรายังไม่ได้พูดถึง: องค์ประกอบ <use>…</use> <use> ช่วยให้เรากำหนดและนำองค์ประกอบกลับมาใช้ใหม่ได้ใน SVG ซึ่งคล้ายกับ Symbols ใน Illustrator และ Sketch หรือ Components ใน Figma จำการกำหนดรูปแบบ การไล่ระดับสี และตัวกรองภายในแท็ก <defs>…</defs> เพื่อให้สามารถใช้ในส่วนอื่นของโค้ด SVG ได้หรือไม่ ในความเป็นจริง องค์ประกอบ SVG ใดๆ สามารถกำหนดและนำกลับมาใช้ใหม่ได้ด้วยวิธีนี้ เมื่อคุณกำหนดรูปร่างหรือกลุ่มแล้ว คุณสามารถอ้างอิงถึงรูปร่างนั้นในส่วนที่เหลือของเอกสารได้บ่อยเท่าที่คุณต้องการ เช่น:

 <defs> <circle cx="100" cy="100" r="20"/> </defs> <use fill="red" xlink:href="#circle"> </use> <use fill="green" xlink:href="#circle"> </use> <use fill="blue" xlink:href="#circle"> </use> …

คุณยังสามารถใช้โครงสร้างที่ซับซ้อนมากขึ้นได้โดยใช้แท็ก <symbol>…</symbol> สัญลักษณ์ทำหน้าที่เป็นเนื้อหาที่แยกจากกันภายใน SVG ของเรา และสามารถมีแอตทริบิวต์ viewBox ของตัวเองได้ (ดูความกว้าง ความสูง และ viewBox สำหรับการอ้างอิง)

หมายความว่าสัญลักษณ์และส่วนประกอบของเครื่องมือออกแบบของเราจะถูกส่งออกไปยังสัญลักษณ์ SVG หรือไม่ ใน Illustrator — ใช่ มันใช่เลย ใน Sketch และ Figma — ไม่ มันไม่ใช่ ทำไม? ในขั้นต้น เนื่องจากสัญลักษณ์ของ Illustrator นั้นค่อนข้างเรียบง่ายและสามารถแปลเป็น SVG ได้อย่างง่ายดาย ในขณะที่สัญลักษณ์ของ Sketch และส่วนประกอบของ Figma นั้นไม่ธรรมดาเลย และการส่งออกคุณสมบัติบางอย่าง (เช่น การแทนที่แบบซ้อน) นั้นค่อนข้างยุ่งยากหรือแทบจะเป็นไปไม่ได้เลย

ข้อความ

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

Illustrator, Sketch และ Figma รองรับการส่งออกข้อความไปยัง SVG และคำนวณเลเยอร์ข้อความลงในองค์ประกอบ <text>…</text> ใน SVG องค์ประกอบข้อความ SVG จะแสดงเหมือนกับองค์ประกอบกราฟิก รูปร่าง ฯลฯ อื่นๆ โดยมีความแตกต่างเพียงอย่างเดียวคือองค์ประกอบเหล่านี้คือข้อความ

เช่นเดียวกับใน CSS เราควบคุมพารามิเตอร์ของข้อความพื้นฐานทั้งหมดได้ เช่น น้ำหนัก ความสูงของบรรทัด หรือการจัดตำแหน่ง ที่จริงแล้ว ถ้าคุณรู้วิธีจัดรูปแบบข้อความใน CSS คุณก็รู้แล้วว่าต้องทำอย่างไรใน SVG อย่างไรก็ตาม มันอาจจะดูเก่าไปหน่อย ประการแรก พารามิเตอร์ทั้งหมดต้องตั้งค่าในแอตทริบิวต์แบบอินไลน์ เช่นเดียวกับมาตรฐานทองคำของ HTML 3.2 ประการที่สอง ไม่มีชวเลข ตัวอย่างเช่น คุณจะไม่พบสิ่งที่คล้ายกับคุณสมบัติ CSS ของ font นั่นเป็นเพราะว่าแอตทริบิวต์ข้อความ SVG นั้นอิงตามข้อกำหนด CSS 2 ซึ่งนำเรากลับไปสู่ยุค 90 และเก่ากว่า CSS ที่เรารู้จักในปัจจุบัน

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

แบบอักษรที่กำหนดเอง

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

โชคดีสำหรับเรา SVG เล่นได้ดีกับ CSS ซึ่งหมายความว่าเราสามารถใช้แบบอักษรเว็บแทนแบบอักษร SVG เช่น:

 <style> @import url("https://fonts.googleapis.com/css?family=Roboto"); </style> <text x="20" y="50" font-family="Roboto">Text</text>

ผมขอไม่ลงรายละเอียดเกี่ยวกับการใช้แบบอักษรของเว็บที่นี่ นอกเหนือจากหมายเหตุสำคัญข้อหนึ่ง: อย่าลืมเกี่ยวกับมัน กล่าวอีกนัยหนึ่ง หากคุณใช้แบบอักษรที่กำหนดเองใน SVG ของคุณ คุณต้องจำเกี่ยวกับการจัดหาแบบอักษรเหล่านี้ให้กับลูกค้า เช่นเดียวกับใน HTML/CSS

เค้าโครงแบบอักษร

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

1. คุณไม่สามารถแก้ไขข้อความที่มีโครงร่าง ทั้งก่อนหรือหลังการส่งออก
   การทำงานกับข้อความที่มีโครงร่าง คุณต้องจำเกี่ยวกับการเก็บสำเนาที่แก้ไขได้ในไฟล์ Illustrator, Sketch หรือ Figma ไว้ตลอดเวลา มิเช่นนั้น คุณจะไม่สามารถแก้ไขเลเยอร์ข้อความได้เมื่อจัดกรอบแล้ว สิ่งนี้จะเพิ่มความซับซ้อนที่ไม่จำเป็นให้กับกระบวนการ ไม่ต้องพูดถึงการแก้ไขข้อความโครงร่างหลังจากส่งออก SVG แล้ว สามารถอัปเดตข้อความใน SVG ได้ตลอดเวลา ข้อความโครงร่างจำเป็นต้องเปิดไฟล์ต้นฉบับทุกครั้งที่คุณต้องการทำการเปลี่ยนแปลงการคัดลอกที่น้อยที่สุด
2. ไม่สามารถเข้าถึงข้อความโครงร่าง
   ข้อความใน SVG เช่นเดียวกับองค์ประกอบข้อความอื่นๆ บนเว็บ สามารถอ่านได้โดยโปรแกรมอ่านหน้าจอและเทคโนโลยีที่เข้าถึงได้อื่นๆ การวางโครงร่างข้อความเป็นการป้องกันไม่ให้ผู้คนใช้เทคโนโลยีดังกล่าวเข้าถึงเนื้อหาของคุณ
3. ผู้คนคาดหวังว่าข้อความจะเป็นข้อความ
   คนส่วนใหญ่ที่ใช้เว็บไม่รู้อะไรเลยเกี่ยวกับ SVG, HTML หรือเครื่องมือออกแบบ หากพวกเขาเห็นข้อความ พวกเขาก็คาดหวังว่าจะเป็นอย่างนั้น พวกเขาอาจต้องการเลือก คัดลอก หรือใส่ในเครื่องมือค้นหา ทั้งหมดนี้เป็นไปได้ด้วยข้อความใน SVG เว้นแต่คุณจะร่างโครงร่างไว้
4. อย่าลืมเกี่ยวกับ SEO
   ข้อความใน SVG ยังสามารถเข้าถึงได้และใช้งานโดยเครื่องมือค้นหา การเขียนโครงร่างข้อความทำให้เนื้อหาของคุณค้นหาได้น้อยลงและอาจปรากฏต่อสาธารณะน้อยลง

สรุป

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