LogoSVG URL انکوڈر

SVG URL انکوڈر

اگر آپ SVG کو واپس ڈی کوڈ کرنا چاہتے ہیں، تو یہاں انکوڈ شدہ SVG رکھیں
پیش نظارہ

SVG کو CSS میں URL کے طور پر استعمال کیا جا سکتا ہے، لیکن بغیر انکوڈنگ کے یہ تمام براؤزرز میں کام نہیں کرے گا۔
اگر SVG پر encodeURIComponent() انکوڈنگ استعمال کی جائے تو یہ ہر جگہ کام کرے گا۔

SVG میں xmlns خصوصیت ہونی چاہیے: xmlns='http: //www.w3.org/2000/svg'۔
اگر موجود نہ ہو تو خودبخود شامل کر دی جائے گی

انکوڈ شدہ SVG کو background، border-image یا mask میں استعمال کیا جا سکتا ہے (لائیو ڈیمو)۔

FAQ

SVG کیا ہے؟

SVG کا مطلب ہے Scalable Vector Graphics۔ SVG کو ویب کے لیے ویکٹر پر مبنی گرافکس کی تعریف کے لیے استعمال کیا جاتا ہے۔ SVG گرافکس کو XML فارمیٹ میں بیان کرتا ہے۔ SVG فائلوں کے ہر عنصر اور خصوصیت کو اینیمیٹ کیا جا سکتا ہے۔

CSS میں SVG کیسے استعمال کریں؟

CSS میں براہ راست SVG کوڈ استعمال کرنے کے لیے آپ کو SVG کوڈ کو انکوڈ کرنا ہوگا۔ اس کے لیے یہ SVG URL Encoder ٹول یا JavaScript فنکشن encodeURIComponent() استعمال کریں۔ انکوڈ شدہ SVG ڈیٹا URI کو url() فنکشن کے ذریعے background-image، border-image اور mask CSS خصوصیات کے ساتھ استعمال کیا جا سکتا ہے۔ مثال: 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");

CSS میں SVG کا رنگ کیسے تبدیل کریں؟

کسی بھی SVG کا رنگ بدلنے کے لیے، آپ mask اور background-color CSS خصوصیات کو ملا سکتے ہیں۔ نیچے دی گئی مثال 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 کو مخصوص حروف کو ان کی UTF-8 انکوڈنگ کی نمائندگی کرنے والے ایک، دو، تین یا چار ایسکیپ سیکوینس سے بدل کر انکوڈ کرتا ہے۔ encodeURI() کے مقابلے میں یہ فنکشن زیادہ حروف انکوڈ کرتا ہے، جن میں URI نحو کے حصے بھی شامل ہیں۔

URL کو کیسے ڈیکوڈ کریں؟

URL کو ڈیکوڈ کرنے کے لیے decodeURIComponent() فنکشن استعمال کریں، جو %XX شکل میں ہر ایسکیپ سیکوینس کو ایک UTF-8 کوڈ یونٹ (ایک بائٹ) سمجھ کر URI کو ڈیکوڈ کرتا ہے۔ UTF-8 میں، پہلے بائٹ میں آگے آنے والے 1 بٹس کی تعداد (جو 0، 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");