วิธีใช้
- วาง XML VectorDrawable ทางซ้าย หรือใช้ตัวอย่าง / เปิดไฟล์ ตัวอย่างจะอัปเดตขณะพิมพ์
- พื้นหลัง ซูม RTL ทินต์ และสีธีมเปลี่ยนเฉพาะพรีวิว XML ต้นทางไม่เปลี่ยน
- คัดลอกหรือบันทึก SVG หรือบันทึก PNG ไม่มีการอัปโหลด
วาง XML VectorDrawable ของ Android เพื่อพรีวิวเป็น SVG ทันที เรนเดอร์ path, group, clip-path, ไล่สี และ tint ในเบราว์เซอร์ แล้วส่งออก SVG หรือ PNG
มุมมอง
พื้นหลัง
ซูม
สีธีม
ทินต์
บรรทัด: 0
คอลัมน์: 0
การเลือก: 0 ตัวอักษร
ตัวอย่าง
อินพุต เอาต์พุต ข้อจำกัด
อินพุตคือ XML VectorDrawable หรือไฟล์ .xml เอาต์พุตคือพรีวิว SVG แบบสดและการส่งออก SVG/PNG animated-vector เรนเดอร์เฉพาะ <vector> คงที่ภายใน @color/?attr ใช้สีธีม ฉบับร่างอยู่ในที่เก็บในเครื่อง 30 วัน
ตัวอย่าง
ตัวอย่างแบตเตอรี่ชาร์จอย่างเป็นทางการ — <vector> พร้อม <group> ที่หมุน และ <path android:fillColor="#AARRGGBB"> — แสดงเป็นไอคอนเอียง
ไวยากรณ์ VectorDrawable
- <vector>: viewportWidth/Height, width/height (dp), alpha, tint, autoMirrored
- <path>: pathData, fillColor, fillAlpha, fillType (evenOdd/nonZero), strokeColor, strokeWidth, strokeLineCap/Join
- <group>: rotation, pivotX/Y, scaleX/Y, translateX/Y กับลูก
- <clip-path>: ตัดการวาดในกลุ่มเดียวกัน
- สี: #RGB / #ARGB / #RRGGBB / #AARRGGBB Android ใส่แอลฟาก่อน
- ไล่สีเชิงเส้นและรัศมี API 24+ ผ่าน aapt:attr sweep จะประมาณ/เตือน
- แอตทริบิวต์ธีม เช่น ?attr/colorControlNormal ใช้สีธีม
คำถามที่พบบ่อย
XML ถูกอัปโหลดหรือไม่?
ไม่ วาง ไฟล์ พรีวิว และส่งออกอยู่ในเบราว์เซอร์ ฉบับร่างอยู่บนอุปกรณ์นี้เท่านั้น
AnimatedVectorDrawable เล่นไหม?
ไม่ วาดเฉพาะ <vector> คงที่ภายใน <animated-vector> ไม่รองรับ ObjectAnimator
ทำไมสีไม่ตรง?
fillColor ของ Android คือ #AARRGGBB (แอลฟาก่อน) ไม่ใช่ #RRGGBBAA ของ SVG @color และ ?attr ที่ไม่มีทรัพยากรโปรเจกต์จะใช้สีธีม
