الرئيسية
CSS والتصميم
SVG إلى خلفية CSS

محول خلفية SVG إلى CSS تشفير رمز SVG كخلفية صورة CSS باستخدام ترميز URI البيانات.

🎨

SVG إلى خلفية CSS

تشفير رمز SVG كخلفية صورة CSS باستخدام ترميز URI البيانات.

لصق كود SVG

أدخل أو لصق تعليمات SVG في حقل الإدخال.

تعيين خصائص الخلفية

تكوين إعدادات حجم الخلفية و تكرارها و موضعها.

نسخ CSS

معاينة SVG كخلفية و نسخ رمز CSS.

Loading tool...

What Is SVG إلى خلفية CSS?

أداة تحويل SVG إلى خلفية CSS تقوم بتحويل كود SVG إلى صورة خلفية في CSS باستخدام ترميز URI للبيانات. تستخدم هذه التقنية دمج SVG مباشرة في ملفات CSS دون الحاجة إلى ملفات صور منفصلة أو طلبات HTTP. يمكنك لصق رمز SVG ، وتكوين حجم الخلفية و تكرار الخلفية و موضع الخلفية،然后 توليد الأداة الكود المرمز. ي置ّ ترميز URI للبيانات الحروف الخاصة (مثل <, >, #) بمستواكل آمنة لURL حتى يمكن دمج SVG بأمان في دالة url() في CSS. يعرض المعاينة SVG كما تم تطبيقه كخلفية على عنصر عينة. هذا النهج مثالي للأيقونات الصغيرة والأنماط والعناصر الزخرفية التي تريد إدراجها في ملفات CSS دون الاعتماد على الملفات الخارجية.

Why Use SVG إلى خلفية CSS?

لا يلزم وجود ملفات صورة منفصلة - يتم دمج SVG مباشرة في CSS
يقلل من طلبات HTTP لملحقات SVG الصغيرة
يمكن تكوين حجم الخلفية و تكرارها و موضعها
يعرض المعاينة الحية SVG كخلفية CSS

Common Use Cases

خلفيات الأيقونات

دمج أيقونات SVG الصغيرة مباشرة في CSS لأزرار و علامات القوائم.

خلفيات الأنماط

تشفير أنماط SVG المتكررة كخلفيات CSS دون ملفات صورة.

عناصر الزينة

إضافة زخارف SVG إلى عناصر الوهمية عبر خلفيات CSS.

قوالب البريد الإلكتروني

دمج رسومات SVG في CSS لقوالب البريد الإلكتروني حيث قد يتم حظر الصور الخارجية.

Technical Guide

تستخدم URI بيانات SVG التنسيق التالي: url("data:image/svg+xml,<encoded-svg>"). يتم ترميز محتوى SVG عن طريق استبدال الحروف الخاصة: < يصبح %3C, > يصبح %3E, # يصبح %23, وتحويل الاقتباسات إلى اقتباسات فردية. هذا الترميز أكثر كفاءة من Base64 لملفات SVG لأنه يحافظ على قابلية القراءة و通常 يكون أصغر. تقبل خاصية صورة الخلفية URI للبيانات، ويتم التحكم في العرض بواسطة خصائص خلفية قياسية (الحجم، التكرار، الموضع).对于 ملفات SVG الكبيرة ، فكّر باستخدام الملفات الخارجية بدلاً من ذلك ، حيث أن URI البيانات الكبيرة تزيد حجم ملف CSS ولا يمكن تخزينها بشكل مستقل. يُقلم background-size: contain SVG ليتماشى مع العنصر مع الحفاظ على النسبة الجانبية. يملأ background-size: cover العنصر، وربما يقص SVG. تعطي القيم المحددة بالبكسل أو النسبة المئوية التحكم الدقيق.

Tips & Best Practices

1
استخدم ترميز URL (وليس Base64) لحجم ملف أصغر مع SVG
2
إزالة سمات SVG غير الضرورية لتقليل حجم التشفير
3
احتفظ بملفات SVG صغيرة - تؤدي URI البيانات الكبيرة إلى تضخم CSS و لا يمكن تخزينها بشكل منفصل
4
استخدم علامات تنصيص فردية في SVG لتجنب مشاكل الهروب في CSS

Related Tools

نمط خلفية سي اس اس

إنشاء أنماط خلفية متكررة في سي اس اس بما في ذلك الشرائط والشطرنج والنقاط والمزيد.

🎨 CSS & Design

بحث عن الأيقونات

ابحث عن وتخصيص أيقونات SVG مفتوحة المصدر مع حجم و لون و خط قابل للتعديل.

🎨 CSS & Design

مُولِّد متغيرات CSS

إنشاء خصائص مخصصة لCSS (متغيرات) للألوان والتباعد والتخطيط.

🎨 CSS & Design

مُولِد نَمَطات SVG

انشئ نمطات متكررة مبنية على SVG لخلفيات CSS مع أشكال متنوعة.

🎨 CSS & Design

Frequently Asked Questions

Q هل ترميز URI البيانات أفضل من Base64 لملفات SVG?

نعم، عادة ما يكون ملف SVG المرمز بواسطة URL أصغر من Base64 و يبقى قابلاً للقراءة البشرية في CSS.

Q هل يمكنني استخدام أي ملف SVG?

نعم، يمكن تشفير أي رمز SVG صحيح. أزل السمات غير الضرورية و المسافات البيضاء للحصول على حجم مثالي.

Q هل يعمل هذا في جميع المتصفحات?

نعم، تدعم متصفحات الويب الحديثة URI بيانات SVG في خلفيات CSS.

Q ماذا عن ملفات SVG الكبيرة?

للملفات SVG الكبيرة أو المعقدة، استخدم ملفات SVG خارجية بدلاً من ذلك. لا يمكن تخزين URI البيانات بشكل مستقل عن CSS.

Q هل يمكنني استخدام ملفات SVG المرمزة بواسطة URI في علامات <img>?

نعم، يعمل تنسيق URI البيانات نفسه في سمات src لعناصر الصور و خلفية الصورة في CSS.

About This Tool

SVG إلى خلفية CSS is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.