วิธีสร้างไฟล์ 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 ใดๆ ที่มีองค์ประกอบเหล่านี้

ประเภทองค์ประกอบ	เหตุผลที่ห้ามใช้
แท็ก <script>	ป้องกันการทำงานของ JavaScript และการโจมตี XSS
แท็ก <image>	ป้องกันการฝังกราฟิกแบบ 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. พื้นหลังทึบ

ไม่อนุญาตให้ใช้พื้นหลังโปร่งใส โปรแกรมอีเมลสลับระหว่างธีมสว่างและมืด และโลโก้โปร่งใสอาจมองไม่เห็นบนพื้นหลังทั้งสองแบบ ใส่องค์ประกอบ <rect> ทึบที่ครอบคลุม viewBox ทั้งหมด

3. ข้อมูลเมตาที่จำเป็น

ประกาศความสอดคล้องในองค์ประกอบราก <svg> โดยตั้งค่า version="1.2" และ baseProfile="tiny-ps" ใส่องค์ประกอบ <title> เพื่อให้เป็นไปตามข้อกำหนดด้านการเข้าถึง

วิธีสร้างไฟล์ที่ตรงตามข้อกำหนด

เครื่องมือออกแบบมาตรฐาน รวมถึง Adobe Illustrator และ Figma ไม่สามารถส่งออกเป็น SVG Tiny P/S ได้โดยตรง คุณมีสองทางเลือก: ทำความสะอาดไฟล์ด้วยตนเอง หรือใช้เครื่องมือแปลง

วิธีการด้วยตนเอง

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

1. ลบแท็กที่ห้ามใช้ทั้งหมดที่ระบุไว้ในตารางก่อนหน้า
2. แปลงการจัดสไตล์ CSS เป็นแอตทริบิวต์การนำเสนอแบบอินไลน์
3. คำนวณ viewBox ใหม่เป็นอัตราส่วน 1:1
4. เพิ่มข้อมูลเมตา version, baseProfile และ <title> ที่จำเป็น
5. ตรวจสอบความถูกต้องของผลลัพธ์กับสคีมา W3C SVG Tiny 1.2

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

วิธีการอัตโนมัติ

เครื่องมือแปลงเช่น makeBIMI ดำเนินการแต่ละขั้นตอนโดยอัตโนมัติ:

1. การแปลงเป็นเวกเตอร์: หากคุณอัปโหลดภาพ raster (PNG หรือ JPG) เครื่องมือจะติดตามพิกเซลเป็นเส้นทางเวกเตอร์
2. การทำความสะอาด: เครื่องมือจะลบแท็ก <script>, <image> และการอ้างอิงภายนอก
3. การบังคับใช้เรขาคณิต: เครื่องมือใช้กล่องขอบเขต 1:1 และพื้นหลังทึบ
4. การตรวจสอบความถูกต้อง: เครื่องมือตรวจสอบความถูกต้องของผลลัพธ์กับสคีมา 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/