تحويل SVG إلى URI بيانات آمن لاستخدامه في CSS
الصق شيفرة SVG واحصل على URI بيانات يبدأ بالبادئة data:image/svg+xml، جاهز للاستخدام في url() ضمن CSS أو كمصدر لصورة. يصبح لون مثل #0a7 هو %230a7، فلا يكسر أي حرف ورقة الأنماط لديك. مجاني في متصفحك.
- مجاني
- يعمل في متصفحك
- دون تسجيل
- بياناتك لا تغادر جهازك
شغّل الأداة مجانًا
تعمل هذه الأداة داخل متصفحك — مجانًا، ولا تُرسل بياناتك إلى أي خادم
حوّلوا ترميز SVG الخام إلى URI بيانات يمكن وضعه في قيمة CSS من نوع url() أو في أي موضع يقبل عنوان URL لصورة. تتحقق الأداة أولاً من أن المدخل XML سليم البنية، ثم ترمّز المستند بصيغة UTF-8 وتهرّب كل محرف قد يغيّر تحليل عنوان URL أو CSS. تبدأ النتيجة بنوع وسائط SVG ولا تضيف طبقة base64، ولذلك يسهل فحصها ونسخها وتخزينها مؤقتاً وإدارة إصداراتها مع الأنماط الخاصة بكم.
لماذا يحتاج URI بيانات SVG إلى تهريب دقيق
يتكون SVG من نص، لكن لصق ذلك النص مباشرة داخل رمز CSS من نوع <code>url()</code> ليس موثوقاً. فاللون مثل <code>#0a7</code> يُدخل جزءاً في عنوان URL، وقد تفصل المسافات بين الرموز، كما يمكن لعلامات الاقتباس أو الأقواس إنهاء قيمة CSS. تزيل هذه الأداة ذلك الالتباس بترميز SVG إلى بايتات UTF-8، ولا تترك مقروءاً إلا المحارف غير المحجوزة في عناوين URL.
تتحول بقية المحارف إلى تهريب مئوي، بما فيها علامات الهاش والأقواس الزاوية وعلامات الاقتباس والفواصل العليا والأقواس والمسافات وفواصل الأسطر. لذلك تبقى القيمة سليمة داخل <code>url(...)</code> سواء كانت بلا اقتباس أم بين علامتي اقتباس مفردتين أو مزدوجتين. تأتي البادئة <code>data:image/svg+xml,</code> قبل الترميز المشفر.
لا توجد طبقة base64، فتظل الحروف والأرقام الشائعة قابلة للفحص.
يتم التحقق قبل إجراء التحويل
قد ينتج عن ترميز تعليم غير صالح نص مهرب بصورة صحيحة، لكنه يفشل عندما يحاول المتصفح تحليل الصورة. لتجنب هذه النتيجة المضللة، تفحص الأداة مستند XML أولاً. تشترط وجود عنصر جذر SVG واحد، وتطابق وسوم الفتح والإغلاق وتعشيقها الصحيح، ووضع قيم السمات بين علامات اقتباس، وعدم تكرار اسم السمة في العنصر نفسه، وإغلاق التعليقات وأقسام CDATA، وصحة مراجع الكيانات.
يُرفض النص خارج الجذر وأي جذر ثانٍ. وتُقبل تصريحات XML وتعليمات المعالجة والتعليقات وCDATA وتصريح نوع المستند عندما تقع في مواضع صحيحة بنيوياً. يؤكد هذا الفحص سلامة صياغة XML، لكنه لا يضمن دعم كل متصفح لجميع عناصر SVG وسماته وقيم رسمه وحركاته ومراجعه الخارجية.
استخدام النتيجة في CSS وHTML
استخدموا URI المعاد في أي موضع تتوقع فيه المنصة عنوان URL لصورة. ومن مواضعه الشائعة في CSS صورة الخلفية ومصدر القناع وعلامة القائمة والمحتوى المولد. يمكن وضع القيمة بين علامتي اقتباس مفردتين أو مزدوجتين لتسهيل قراءتها، مع أن التهريب الصارم يحمي أيضاً رمز <code>url()</code> غير المقتبس.
وفي HTML يمكن إسنادها إلى سمة <code>src</code> للصورة مع اقتباس قيمة السمة بالطريقة المعتادة. تكرر URI البيانات بايتاتها عند كل ظهور ما لم يستخرج نظام البناء التصريح أو يعيد استخدامه؛ لذا فهي أنسب للأيقونات والشارات والزخارف الصغيرة من الرسوم الكبيرة. التحويل حتمي، فالمدخل المتطابق يعطي دائماً المخرج نفسه.
لا تجلب الأداة الخطوط أو الصور أو الأنماط، ولا تحسن المسارات، ولا تعقم محتوى SVG النشط. تعاملوا مع التعليم غير الموثوق وفق قواعد الأمان في السياق الذي ستدرجونه فيه.
حالات الاستخدام
تضمين أيقونة صغيرة في CSS
حوّلوا ملف SVG خاضعاً لإدارة الإصدارات إلى صورة خلفية آمنة من دون إضافة طلب شبكي آخر.
إنشاء أنماط ملائمة للسمات
رمّزوا نسخ SVG أثناء البناء وضعوا URI حتمية في رموز التصميم أو أنماط المكونات.
فحص تعليم SVG المولد
ارفضوا XML المعطوب الصادر من قالب قبل نشر سلسلة الصورة المرمزة.
الأسئلة الشائعة
لماذا يُستخدم الترميز المئوي بدلاً من base64؟
SVG نص أصلاً. يتجنب الترميز المئوي طبقة base64، ويبقي المحارف غير المحجوزة مقروءة، وينتج URI صورة متوافقاً مع المعايير.
هل تحسن الأداة SVG أو تعقمه؟
لا. تتحقق من بنية XML وترمز التعليم الأصلي من دون حذف البيانات الوصفية أو البرامج النصية أو المراجع الخارجية أو المسارات الزائدة.
هل يمكنني لصق النتيجة مباشرة في url() داخل CSS؟
نعم. يُرمَّز كل حرف قد ينهي قيمة CSS أو يقسمها، ومنها علامات الاقتباس والأقواس والمسافات وعلامة #، لذا تعمل القيمة دون اقتباس أو بين علامتي اقتباس مفردة أو مزدوجة. انسخ السلسلة كاملة مع بادئتها.
لماذا رُفض ملف SVG الخاص بي؟
لأن الشيفرة غير سليمة البنية: وسم غير مغلق أو متداخل بشكل خاطئ، أو سمة بلا علامات اقتباس أو مكررة، أو تعليق مفتوح، أو كيان غير صالح، أو نص أو عنصر ثانٍ خارج جذر svg.
متى لا يناسب URI البيانات صورة SVG؟
عندما تكون الصورة كبيرة أو تتكرر في مواضع كثيرة. لأن URI البيانات ينسخ كل بايتاته في كل موضع يظهر فيه، لذا يناسب الأيقونات الصغيرة والشارات والزخارف أكثر من الرسوم الكبيرة.
أدوات ذات صلة
للمطوّرين — الوصول عبر API
كل ما في هذه الصفحة متاح برمجيًا. هذا القسم موجّه للفرق التقنية التي تريد ربط الأداة بأنظمتها الخاصة؛ بقية المستخدمين يمكنهم استخدام الأداة أعلاه مباشرة دون الحاجة لقراءة ما يلي.
الـEndpoint
صادِق على طلبك بترويسة Bearer، وأرسل طلب POST واحدًا لتدخل مهمتك قائمة التنفيذ فورًا؛ ثم تستلم النتيجة عبر webhook أو رابط موقّع.
استدعِ الخدمة من بيئتك
curl -X POST https://api.kit.forhosting.com/web/svg-to-data-uri \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"}'const res = await fetch("https://api.kit.forhosting.com/web/svg-to-data-uri", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/svg-to-data-uri",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/svg-to-data-uri", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"svg":"<svg xmlns=\\"http://www.w3.org/2000/svg\\" viewBox=\\"0 0 24 24\\"><path fill=\\"#0a7\\" d=\\"M2 2h20v20H2z\\"/></svg>"}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"svg":"<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/svg-to-data-uri", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)مثال على الطلب
{
"svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\"><path fill=\"#0a7\" d=\"M2 2h20v20H2z\"/></svg>"
}مثال على الاستجابة
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.svg_to_data_uri",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}الواجهة غير متزامنة: تستلم task_id فور الإرسال، ويمكنك الاستعلام عن الحالة بمعدل طلب واحد في الثانية.
الأسعار
السعر معلن كما تراه: لا tokens ولا نظام نقاط؛ وإن فشلت المهمة فلن تُحاسَب عليها.
الحدود
timeout_sec | 30 |
max_crawl_pages | 25 |
الأخطاء
| HTTP | الرمز | المعنى |
|---|---|---|
401 | unauthorized | مفتاح الوصول مفقود أو غير صالح؛ تحقق من ترويسة Bearer في طلبك. |
402 | insufficient_balance | رصيدك لا يكفي لتنفيذ هذه المهمة؛ أعد شحن الرصيد ثم أعد المحاولة. |
404 | unknown_type | نوع المهمة المطلوب غير موجود في الكتالوج — راجع الاسم المرسل في الطلب. |
429 | rate_limited | تجاوزت الحد المسموح من الطلبات؛ انتظر قليلًا ثم أعد المحاولة. |
ملاحظات تقنية
لماذا يحتاج URI بيانات SVG إلى تهريب دقيق
انسخوا السلسلة كاملة لأن البادئة تخبر المتصفح بكيفية تفسير الحمولة.
يتم التحقق قبل إجراء التحويل
إذا فشل الفحص، يعيد الطلب خطأ <code>invalid_input</code> يصف المشكلة بدلاً من URI بيانات.
أسئلة تقنية
ما تكلفة التحويل عبر API؟
تبلغ تكلفة كل طلب API مقدار $0.002. ويمكن تشغيل نسخة المتصفح محلياً في هذه الصفحة.
هل يمكن لصق النتيجة مباشرة داخل CSS url()؟
نعم. تُرمَّز علامات الاقتباس والأقواس والمسافات والهاش وغيرها من المحارف الحساسة في حمولة SVG.
ماذا يحدث عندما لا يكون XML سليم البنية؟
يتوقف التحويل ويعاد خطأ invalid_input يصف العيب. ولا يُنتج URI جزئي.