Logoตัวเข้ารหัส URL ของ SVG

ตัวเข้ารหัส URL ของ SVG

หากต้องการถอดรหัส SVG กลับ คุณสามารถวาง SVG ที่เข้ารหัสไว้ที่นี่
ดูตัวอย่าง

SVG สามารถใช้ใน CSS เป็น URL ได้ แต่หากไม่เข้ารหัสจะใช้งานไม่ได้ในทุกเบราว์เซอร์
หากใช้การเข้ารหัส encodeURIComponent() กับ SVG จะสามารถใช้งานได้ทุกที่

SVG ต้องมีแอตทริบิวต์ xmlns: xmlns='http: //www.w3.org/2000/svg'
หากไม่มี จะถูกเพิ่มโดยอัตโนมัติ

SVG ที่เข้ารหัสแล้วสามารถใช้ใน background, border-image หรือ mask ได้ (ตัวอย่างสด)

FAQ

SVG คืออะไร?

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

วิธีใช้ SVG ใน CSS?

หากต้องการใช้โค้ด SVG ในCSS โดยตรง คุณต้องเข้ารหัส SVG ก่อน คุณสามารถใช้เครื่องมือ SVG URL Encoder นี้ หรือฟังก์ชัน JavaScript encodeURIComponent() ได้ SVG data URI ที่ถูกเข้ารหัสแล้วสามารถใช้กับคุณสมบัติ CSS ได้แก่ background-image, border-image และ mask ผ่านฟังก์ชัน url() ตัวอย่าง: background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='red'/%3E%3C/svg%3E");

วิธีเปลี่ยนสีของ SVG ใน CSS?

หากต้องการเปลี่ยนสีของ SVG ใดๆ คุณสามารถรวมคุณสมบัติ CSS mask และ background-color เข้าด้วยกัน ตัวอย่างด้านล่างจะเปลี่ยนสีของ SVG เป็นสีน้ำเงิน ตัวอย่าง: mask: url(“data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='currentColor'/%3E%3C/svg%3E”); background-color: blue;

URL คืออะไร?

URL (Uniform Resource Locator) คือที่อยู่ของทรัพยากรที่ไม่ซ้ำกันบนอินเทอร์เน็ต เป็นหนึ่งในกลไกหลักที่เบราว์เซอร์ใช้ดึงทรัพยากร เช่น หน้า HTML เอกสาร CSS รูปภาพ และอื่นๆ

วิธีเข้ารหัส URL?

หากต้องการเข้ารหัส URL สามารถใช้ฟังก์ชัน encodeURIComponent() ซึ่งเข้ารหัส URI โดยแทนที่แต่ละอักขระบางตัวด้วยลำดับ escape หนึ่ง สอง สาม หรือสี่ตัวที่แสดงถึงการเข้ารหัส UTF-8 ของอักขระนั้น เมื่อเปรียบเทียบกับ encodeURI() ฟังก์ชันนี้เข้ารหัสอักขระได้มากกว่า รวมถึงอักขระที่เป็นส่วนหนึ่งของไวยากรณ์ URI ด้วย

วิธีถอดรหัส URL?

หากต้องการถอดรหัส URL สามารถใช้ฟังก์ชัน decodeURIComponent() ซึ่งถอดรหัส URI โดยถือว่าลำดับ escape แต่ละตัวในรูปแบบ %XX เป็นหน่วยโค้ด UTF-8 หนึ่งหน่วย (หนึ่งไบต์) ใน UTF-8 จำนวนบิต 1 นำในไบต์แรก ซึ่งอาจเป็น 0 (สำหรับอักขระ ASCII 1 ไบต์) 2, 3 หรือ 4 จะระบุจำนวนไบต์ในอักขระนั้น

ตัวอย่าง SVG ที่เข้ารหัสแล้ว

ใช้เป็นพื้นหลัง
ใช้เป็นมาสก์
ใช้เป็นเส้นขอบ

ตารางการแปลง SVG เป็น CSS

SVGCSS
<svg><circle r="50" cx="50" cy="50" fill="tomato"/><circle r="41" cx="47" cy="50" fill="orange"/><circle r="33" cx="48" cy="53" fill="gold"/><circle r="25" cx="49" cy="51" fill="yellowgreen"/><circle r="17" cx="52" cy="50" fill="lightseagreen"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle r='50' cx='50' cy='50' fill='tomato'/%3E%3Ccircle r='41' cx='47' cy='50' fill='orange'/%3E%3Ccircle r='33' cx='48' cy='53' fill='gold'/%3E%3Ccircle r='25' cx='49' cy='51' fill='yellowgreen'/%3E%3Ccircle r='17' cx='52' cy='50' fill='lightseagreen'/%3E%3C/svg%3E");
<svg><rect x="10" y="10" width="30" height="30"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='10' y='10' width='30' height='30'/%3E%3C/svg%3E");
<svg><circle cx="25" cy="75" r="20"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='25' cy='75' r='20'/%3E%3C/svg%3E");
<svg><ellipse cx="75" cy="75" rx="20" ry="5"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cellipse cx='75' cy='75' rx='20' ry='5'/%3E%3C/svg%3E");
<svg><line x1="10" x2="50" y1="110" y2="150" stroke="black" stroke-width="5"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cline x1='10' x2='50' y1='110' y2='150' stroke='black' stroke-width='5'/%3E%3C/svg%3E");
<svg><polyline points="60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='60, 110 65, 120 70, 115 75, 130 80, 125 85, 140 90, 135 95, 150 100, 145'/%3E%3C/svg%3E");
<svg><polygon points="50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='50, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 45, 180'/%3E%3C/svg%3E");
<svg><polygon points="12,2 15,10 24,10 17,15 19,24 12,19 5,24 7,15 0,10 9,10" fill="gold"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='12,2 15,10 24,10 17,15 19,24 12,19 5,24 7,15 0,10 9,10' fill='gold'/%3E%3C/svg%3E");
<svg><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
<svg><path d="M9 16.17l-4.88-4.88L2 13.41 9 20.41l13-13-1.41-1.41z"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 16.17l-4.88-4.88L2 13.41 9 20.41l13-13-1.41-1.41z'/%3E%3C/svg%3E");
<svg><path d="M 10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 10 C 20 20, 40 20, 50 10' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 70 10 C 70 20, 110 20, 110 10" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 70 10 C 70 20, 110 20, 110 10' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 130 10 C 120 20, 180 20, 170 10" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 130 10 C 120 20, 180 20, 170 10' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 10 60 C 20 80, 40 80, 50 60" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 60 C 20 80, 40 80, 50 60' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 70 60 C 70 80, 110 80, 110 60" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 70 60 C 70 80, 110 80, 110 60' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 130 60 C 120 80, 180 80, 170 60" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 130 60 C 120 80, 180 80, 170 60' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 10 110 C 20 140, 40 140, 50 110" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 110 C 20 140, 40 140, 50 110' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 70 110 C 70 140, 110 140, 110 110" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 70 110 C 70 140, 110 140, 110 110' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 130 110 C 120 140, 180 140, 170 110" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 130 110 C 120 140, 180 140, 170 110' stroke='black' fill='transparent'/%3E%3C/svg%3E");
<svg><path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/></svg>background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80' stroke='black' fill='transparent'/%3E%3C/svg%3E");