Softonic

مولد شبكة SVG

خطوة 1 / 3
التالي

تُعد خلفية الشبكة عنصرًا أساسيًا في أدوات التصميم (مثل Figma وFramer)، وفي صفحات الهبوط الموجهة للمطورين (مثل Linear وVercel)، وكذلك في أي واجهة تهدف إلى إعطاء إحساس بالرسم التخطيطي أو ورق الرسم. كما أنها من أخف الخلفيات يمكن استخدامها؛ حيث تعتمد على نمط <pattern> المتكرر بخطين، وحجمها عادة أقل من 300 بايت. يقوم هذا المولّد بإنشاء الشبكة بحجم خلية ووزن خط وألوان مختلفة، مما يتيح لك ضبطها لتوفير إطلالة شبكية خفيفة على طراز Figma أو مظهرًا أوضح يعكس الطابع التخطيطي.

كيفية بناء الشبكة

  1. 1

    تحديد أبعاد اللوحة

    اضبط العرض والارتفاع بين 50 و3000 بكسل. يساعد اختيار مضاعف لحجم الخلية على تجنب الخلايا الجزئية عند الحواف.

  2. 2

    اختر حجم الخلية

    اختر حجمًا بين 5 و500 بكسل. جرّب 20–40 للخلفيات الخفيفة، و8–12 لورق الرسم، و60–80 للإطارات الخطية الواضحة.

  3. 3

    اختر عرض الخط واللون

    تُقرأ الخطوط ذات السماكة بين 0.5 و1 بكسل على أنها خطوط نظيفة؛ أما الخطوط ذات السماكة أكبر من 2 بكسل فتبدو وكأنها مرسومة يدويًا.

  4. 4

    قم بتعيين الخلفية

    اختر لون الخلفية الصلب الذي سيخرجه SVG. ولإنشاء طبقة فوق خلفية أخرى، انسخ SVG ثم غيّر أو احذف عنصر `<rect>` الخاص بالخلفية في كودك.

  5. 5

    قم بنسخ ملف SVG.

    قم بلصق العنصر في علامة ترميز أو داخل النص مباشرةً ضمن عنوان بيانات CSS الخاص بصورة خلفية قابلة للتجميع.

عنصر النمط

كل خلية تمثل وحدة واحدة من نوع <path>، وتُرسم الحافة اليمنى والحافة السفلية؛ وبتكرار هذه الوحدة يتم بناء الشبكة بأكملها باستخدام شظايا خطية اثنين فقط لكل خلية، وليس أربعة.

<defs>
  <pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse">
    <path d="M 40 0 L 0 0 0 40" fill="none" stroke="#cccccc" stroke-width="1"/>
  </pattern>
</defs>
<rect width="100%" height="100%" fill="#ffffff"/>
<rect width="100%" height="100%" fill="url(#grid)"/>

تكمن السحرية في المسار المحدد بواسطة M 40 0 L 0 0 0 40: يبدأ من النقطة (40، 0)، ثم يمتد إلى الخط (0، 0)، ومنه إلى الخط (0، 40). هذا المسار يرسم الخط العلوي فقط حتى الزاوية العلوية اليسرى، ثم يمتد لأسفل على الجانب الأيسر؛ وعند تجميع هذه الخطوط معًا، ينتج شبكة كاملة دون أي خطوط مكررة.

دليل تحديد مقاسات النماذج

حالة الاستخدام حجم الخلية خط الرسم إحساس باللون
قماش على شكل فيغما 20–30 بكسل 1 بكسل #e5e7eb على #fafafa
ورقة رسم بياني 10–12 بيكسل 0.5 بيكسل #cbd5e1 على #ffffff
المخطط 40–60 بكسل 1 بكسل #bfdbfe على #1e3a8a
إطار سلكي 80 بيكسل 1.5 بيكسل #9ca3af على #ffffff
واجهة تحكم رجعية 16 بيكسل 1 بيكسل #22c55e على #000000

شبكات رئيسية وفرعية

إذا كنت ترغب في تصميم على شكل مخطط يحتوي على شبكة دقيقة وشبكة رئيسية أكثر وضوحًا كل N خلية، فقم بتراكب خلفيتين بصيغة SVG:

.grid {
  background:
    url("data:image/svg+xml,<svg>... major grid ...</svg>"),
    url("data:image/svg+xml,<svg>... minor grid ...</svg>");
}

يقوم المتصفح بدمج العناصر باستخدام طلاء واحد فقط، دون أي تأثير سلبي على الأداء.

الوصولية

الشبكة ذات طابع زخرفي بحت؛ قم بتطبيقها على عنصر افتراضي (::before مع position: absolute; inset: 0; z-index: -1;) بحيث ترى أجهزة قراءة الشاشة وبرامج تحليل المحتوى فقط المحتوى الفعلي، وليس الخلفية.

الأسئلة الشائعة

يمكن لخطوط SVG المُرسومة بعرض أقل من بكسل أن تتجنب ظاهرة التداخل البصري (anti-aliasing). قم بضبط عرض الخط على القيم الكاملة للبكسلات (مثل 1 أو 2)، ثم قم بإزاحة المسار بمقدار 0.5 بكسل (بالنسبة للخطوط ذات العرض البالغ بكسل واحد) ليتماشى مع شبكة البكسلات.

لا يناسب هذا المولد؛ فشبكات السداسيات تتطلب خلية يكون عرضها أكبر بـ √3 مرة من ارتفاعها، بالإضافة إلى مسار يشكّل نصف سداسي. استخدم أداة متخصصة للشبكات السداسية أو رسمها مباشرة في برنامج Figma.

يُنتج هذا المحرر خلفية صلبة. لإنشاء طبقة شفافة، انسخ SVG ثم غيّر أول عنصر <rect> للخلفية إلى fill="transparent" أو احذفه في كودك.

نعم، شبكات SVG تتراوح حجمها بين 200 و500 بايت، وتتكيف بدقة مع جميع مقاييس DPR، كما تسمح بتغيير اللون باستخدام متغيرات CSS. أما شبكة PNG فتبلغ حجمها عادةً من 5 إلى 20 كيلوبايت، وتظهر مبكسلة على شاشات Retina.

يرسل المحرر الأبعاد والألوان الحالية إلى الخادم لعرض SVG. وفي مسار الخطوات الثلاث تظهر هذه الإعدادات أيضًا في عنوان الصفحة. لا تدخل قيَمًا سرية؛ فلا توجد عملية رفع لملف مصدر ولا مشروع محفوظ.

أدوات ذات صلة

مولد الورق المسطر

أنشئ ورقًا مسطرًا قابلًا للطباعة مجانًا. اختر تسطيرًا جامعيًا أو واسعًا أو ضيقًا، واضبط تباعد الأسطر بالمليمتر وحجم الصفحة وخط هامش، ثم اطبع أو نزّل ملف SVG.

منتقي ألوان Material Design

تصفح لوحة ألوان Material Design وانسخ أي درجة (من 50 إلى A700) بصيغة HEX أو RGB أو HSL بنقرة واحدة.

مولّد ورق الرسم البياني

أنشئ ورق رسم بياني قابلاً للطباعة عبر الإنترنت: اختر شبكة مربّعات أو نقاطاً، واضبط التباعد بالمليمتر، وحدّد A4 أو Letter ولون خطوط مخصّصاً، ثم اطبع أو نزّل ملف SVG واضحاً.

صانع الأعلام

صمّم علماً مخصصاً بسيطاً بنسبة 3:2 في متصفحك باستخدام ستة تخطيطات وألوان ونص ورمز. نزّل SVG أو PNG، أو افتح مربع حوار الطباعة في المتصفح.

عكس ألوان الصورة

قم بعكس كل قناة من قنوات RGB في الصورة لإنتاج صورة سلبية، وهي مفيدة للتعديلات الإبداعية وعرض نسخ الأفلام المصورة.

منشئ قوائم التصنيف إلى مستويات

أنشئ قائمة تصنيف خاصة من نصوص وصور محلية، وخصص المستويات ورتب بالسحب أو لوحة المفاتيح، ثم صدّر JSON أو PNG أو SVG.

الأداة متاحة بلغات أخرى