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 (گرافیک برداری مقیاس‌پذیر) است. از SVG برای تعریف گرافیک‌های برداری برای وب به فرمت XML استفاده می‌شود. هر عنصر و ویژگی در فایل‌های SVG قابل انیمیشن است.

چگونه SVG را در CSS استفاده کنیم؟

برای استفاده مستقیم از کد SVG در CSS، باید آن را ابتدا رمزگذاری کنید. می‌توانید از این ابزار SVG URL Encoder یا تابع JavaScript encodeURIComponent() استفاده کنید. یک URI داده SVG رمزگذاری‌شده می‌تواند از طریق تابع url() با ویژگی‌های CSS مانند background-image، border-image و mask به کار رود. مثال: 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 (یکنواخت مکان‌یاب منبع) آدرس یک منبع منحصربه‌فرد در اینترنت است. این یکی از مکانیسم‌های کلیدی است که مرورگرها برای دریافت منابعی مانند صفحات HTML، اسناد CSS، تصاویر و غیره استفاده می‌کنند.

چگونه یک URL را رمزگذاری کنیم؟

برای رمزگذاری URL می‌توانید از تابع encodeURIComponent() استفاده کنید که یک URI را با جایگزین کردن هر نمونه از کاراکترهای خاص با یک، دو، سه یا چهار دنباله فرار که نمایانگر رمزگذاری UTF-8 کاراکتر هستند، رمزگذاری می‌کند. در مقایسه با encodeURI()، این تابع کاراکترهای بیشتری را رمزگذاری می‌کند، از جمله آن‌هایی که بخشی از نحو URI هستند.

چگونه یک URL را رمزگشایی کنیم؟

برای رمزگشایی URL می‌توانید از تابع decodeURIComponent() استفاده کنید که URI را با در نظر گرفتن هر دنباله فرار به شکل %XX به عنوان یک واحد کد UTF-8 (یک بایت) رمزگشایی می‌کند. در UTF-8، تعداد بیت‌های 1 ابتدایی در اولین بایت—که می‌تواند 0 (برای کاراکترهای ASCII یک‌بایتی)، 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");