วิธีสร้างไฟล์ BIMI SVG Tiny P/S (คู่มือปี 2026)
วิธีสร้างไฟล์ BIMI SVG Tiny P/S (คู่มือปี 2026)
Brand Indicators for Message Identification (BIMI) แสดงโลโก้ขององค์กรของคุณถัดจากข้อความที่ผ่านการยืนยันตัวตนในโปรแกรมอีเมลที่รองรับ ในการเผยแพร่ระเบียน BIMI คุณต้องจัดเตรียมไฟล์โลโก้ที่เป็นไปตามโปรไฟล์ XML แบบจำกัดที่เรียกว่า SVG Tiny Portable/Secure (P/S)
บทความนี้อธิบายข้อกำหนดของโปรไฟล์ SVG Tiny P/S องค์ประกอบที่คุณต้องลบออกจากไฟล์ต้นฉบับ และวิธีการที่คุณสามารถใช้เพื่อสร้างโลโก้ที่ตรงตามข้อกำหนดสำหรับการยื่นขอ Verified Mark Certificate (VMC)
เหตุผลด้านความปลอดภัยเบื้องหลัง SVG Tiny P/S
W3C กำหนดโปรไฟล์ SVG Tiny P/S เพื่อขจัดความเสี่ยงด้านความปลอดภัยจากการเรนเดอร์กราฟิกเวกเตอร์ภายในโปรแกรมอีเมล [1] SVG มาตรฐานรองรับสคริปต์ การโหลดทรัพยากรภายนอก และการร้องขอเครือข่าย โปรแกรมอีเมลที่เรนเดอร์ SVG มาตรฐานทำให้ผู้รับเสี่ยงต่อการโจมตีแบบ cross-site scripting (XSS) และพิกเซลติดตามที่ฝังอยู่ในเนื้อหาข้อความ
SVG Tiny P/S ลบความสามารถแบบไดนามิกและภายนอกทั้งหมดออก ผลลัพธ์คือไฟล์แบบคงที่และสมบูรณ์ในตัวเองที่อธิบายเฉพาะรูปทรงเรขาคณิตเท่านั้น
องค์ประกอบที่ห้ามใช้
องค์ประกอบต่อไปนี้ทำให้การตรวจสอบความถูกต้องของ W3C ล้มเหลว Certificate Authority จะปฏิเสธการยื่นขอ VMC ใดๆ ที่มีองค์ประกอบเหล่านี้
| ประเภทองค์ประกอบ | เหตุผลที่ห้ามใช้ |
|---|---|
| แท็ก | ป้องกันการทำงานของ JavaScript และการโจมตี XSS |
| แท็ก | ป้องกันการฝังกราฟิกแบบ raster (PNG/JPG) ซึ่งสามารถซ่อนโค้ดที่เป็นอันตราย |
| URIs แบบ data:image | ป้องกันการฝัง bitmap ที่เข้ารหัสแบบ Base64 |
| xlink:href | ป้องกันการร้องขอเครือข่ายภายนอก (พิกเซลติดตาม) |
| มิติแบบสัมพัทธ์ | ป้องกันการเลื่อนเลย์เอาต์; ต้องลบแอตทริบิวต์ width และ height ออก |
| CSS ภายนอก | ป้องกันการแทรก stylesheet ภายนอก |
ข้อกำหนดทางคณิตศาสตร์
AuthIndicators Working Group กำหนดข้อจำกัดทางเรขาคณิตที่รับประกันว่าโลโก้จะเรนเดอร์ได้อย่างถูกต้องในโปรแกรมอีเมลต่างๆ รวมถึงโปรแกรมที่ใช้มาสก์แบบวงกลม สี่เหลี่ยม หรือสี่เหลี่ยมมุมมน [2]
1. อัตราส่วนภาพ 1:1
โลโก้ต้องเป็นรูปสี่เหลี่ยมจัตุรัส ตั้งค่าแอตทริบิวต์ viewBox เป็นพื้นที่พิกัด 1:1 เช่น viewBox="0 0 100 100" ลบแอตทริบิวต์ width และ height ออก viewBox เพียงอย่างเดียวควบคุมการปรับขนาด
2. พื้นหลังทึบ
ไม่อนุญาตให้ใช้พื้นหลังโปร่งใส โปรแกรมอีเมลสลับระหว่างธีมสว่างและมืด และโลโก้โปร่งใสอาจมองไม่เห็นบนพื้นหลังทั้งสองแบบ ใส่องค์ประกอบ ทึบที่ครอบคลุม viewBox ทั้งหมด
3. ข้อมูลเมตาที่จำเป็น
ประกาศความสอดคล้องในองค์ประกอบราก โดยตั้งค่า version="1.2" และ baseProfile="tiny-ps" ใส่องค์ประกอบ เพื่อให้เป็นไปตามข้อกำหนดด้านการเข้าถึง
วิธีสร้างไฟล์ที่ตรงตามข้อกำหนด
เครื่องมือออกแบบมาตรฐาน รวมถึง Adobe Illustrator และ Figma ไม่สามารถส่งออกเป็น SVG Tiny P/S ได้โดยตรง คุณมีสองทางเลือก: ทำความสะอาดไฟล์ด้วยตนเอง หรือใช้เครื่องมือแปลง
วิธีการด้วยตนเอง
ในการทำความสะอาดไฟล์ SVG ที่ส่งออกด้วยมือ ให้เปิดไฟล์ในโปรแกรมแก้ไขข้อความและทำตามขั้นตอนต่อไปนี้:
- ลบแท็กที่ห้ามใช้ทั้งหมดที่ระบุไว้ในตารางก่อนหน้า
- แปลงการจัดสไตล์ CSS เป็นแอตทริบิวต์การนำเสนอแบบอินไลน์
- คำนวณ
viewBoxใหม่เป็นอัตราส่วน 1:1 - เพิ่มข้อมูลเมตา
version,baseProfileและที่จำเป็น - ตรวจสอบความถูกต้องของผลลัพธ์กับสคีมา W3C SVG Tiny 1.2
คาดหวังการตรวจสอบความถูกต้องหลายรอบ ข้อผิดพลาดเล็กๆ น้อยๆ ในชื่อแอตทริบิวต์หรือการประกาศ namespace ทำให้การตรวจสอบความถูกต้องล้มเหลว
วิธีการอัตโนมัติ
เครื่องมือแปลงเช่น makeBIMI ดำเนินการแต่ละขั้นตอนโดยอัตโนมัติ:
- การแปลงเป็นเวกเตอร์: หากคุณอัปโหลดภาพ raster (PNG หรือ JPG) เครื่องมือจะติดตามพิกเซลเป็นเส้นทางเวกเตอร์
- การทำความสะอาด: เครื่องมือจะลบแท็ก
,และการอ้างอิงภายนอก - การบังคับใช้เรขาคณิต: เครื่องมือใช้กล่องขอบเขต 1:1 และพื้นหลังทึบ
- การตรวจสอบความถูกต้อง: เครื่องมือตรวจสอบความถูกต้องของผลลัพธ์กับสคีมา W3C SVG Tiny P/S
ไฟล์ SVG เป็นข้อกำหนดเบื้องต้นสำหรับการยื่นขอ VMC หลังจากที่คุณสร้างไฟล์ที่ตรงตามข้อกำหนดแล้ว ให้ดำเนินการตรวจสอบ การบังคับใช้ DMARC และส่งไฟล์ไปยัง Certificate Authority ที่รองรับ
เอกสารอ้างอิง
[1] W3C. "SVG Tiny 1.2 Portable/Secure." World Wide Web Consortium, https://www.w3.org/TR/SVGTiny12/ [2] AuthIndicators Working Group. "BIMI SVG Logo Requirements." BIMI Group, https://bimigroup.org/svg-logo-requirements/