Softonic

مولّد أنماط الشرائط SVG

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

أنماط الشرائط المسطّحة من أكثر الطرق موثوقية لملء قسم رئيسي، أو فاصل، أو بطاقة فارغة دون الاعتماد على صورة جاهزة. ينتج هذا المولّد ملف SVG نظيفا قائما على <pattern> بلونين، وعرض شريط قابل للضبط، وزاوية دوران، فيتدرّج الملف نفسه بوضوح من قسم رئيسي للهاتف بعرض 320 بكسل إلى لافتة سطح مكتب بدقة 4K.

كيف تنشئ نمط شرائط SVG

  1. 1

    اضبط حجم اللوحة

    أدخل العرض والارتفاع اللذين تحتاجهما: يستخدم SVG خاصية viewBox فيظل يتدرّج على الصفحة.

  2. 2

    اختر عرض الشريط

    القيم الأصغر تعطي شرائط رفيعة ضيقة؛ والقيم الأكبر تعطي شرائط على طراز المظلات.

  3. 3

    اختر الزاوية

    استخدم 0 للأفقي، و90 للعمودي، و45 للأقطار الكلاسيكية.

  4. 4

    اختر لونين

    اضبط قيمتي الست عشري للمقدمة والخلفية: الشرائط الشفافة مقبولة أيضا.

  5. 5

    انسخ SVG

    الصقه بشكل مدمج، أو احفظه كملف .svg، أو ضعه في خلفية CSS عبر محوّل SVG إلى CSS.

كيف يُبنى النمط

يعرّف SVG عنصر <pattern> صغيرا بحجم شريطين، ثم يملأ <rect> يغطي كامل viewBox بـ fill="url(#stripes)". ولأن الأنماط تتكرر تلقائيا، فإن تغيير حجم اللوحة لا يغيّر سُمك الشريط، بل عدد الشرائط التي تتسع فقط.

patternTransform="rotate(angle)" هو ما يمنحك الأقطار دون الحاجة إلى إعادة حساب الهندسة. ولا يزال النمط يتبلّط بسلاسة عند أي زاوية.

ورقة مرجعية لعرض الشريط

عرض الشريط المظهر الاستخدام الشائع
2 - 6 بكسل شرائط رفيعة دقيقة خلفيات النماذج، نسيج خفي
10 - 20 بكسل قطري متوازن الأقسام الرئيسية، البطاقات، الفواصل
30 - 60 بكسل مظلة جريئة لافتات صفحات الهبوط، فنون الحالات الفارغة
80 بكسل+ كتل بحجم الملصقات الرؤوس التي يجب أن تُقرأ من بعيد

نصائح

  • أبقِ التباين منخفضا (مثلا #f5f5f5 فوق #ffffff) عندما يقع النمط خلف نص.
  • زوايا 15 و30 و45 درجة تبدو “مصممة” أكثر من 0 أو 90 الصارمتين.
  • لتحريك الشرائط، لُفّ <rect> داخل <g> وحرّكه بشكل متكرر؛ ولأن النمط يتبلّط، تحصل على تمرير لانهائي مجانا.
  • المخرجات SVG خالصة دون مراجع خارجية، فهي آمنة للتضمين في HTML أو قوالب البريد التي تجرّد وسوم <script>.

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

نعم. احفظ المخرجات كملف .svg وأشر إليه بـ background-image: url(...) وbackground-repeat: repeat، أو مرّره إلى محوّل SVG إلى CSS للحصول على عنوان URL بيانات مدمج.

يطبّق المتصفح تنعيم الحواف على الأقطار. إن رأيت تنافرا، زِد عرض الشريط بـ 1 - 2 بكسل أو حوّله إلى صورة PNG أكبر ثم صغّره.

تنتج منتقيات الألوان ألوانا صلبة، لذا لجعل أحد الأشرطة شفافا عدّل ملف SVG الناتج: اضبط أحد fill على none، أو على قيمة ست عشرية من 8 خانات بقناة ألفا مثل #00000000. عندها يظهر كل ما يقع خلف SVG.

المخرجات ملكك، فهي مجرد ترميز مُنتَج بناء على مدخلاتك، دون أشكال مسجّلة العلامة أو أصول من طرف ثالث.

يُرسَل لوناك والعرض والارتفاع إلى خادمنا فقط لعرض معاينة SVG؛ ولا يُخزَّن أو يُسجَّل أي شيء، ولا تُرفَع أي ملفات.

أدوات ذات صلة

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

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

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

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

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

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

صانع الأعلام

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

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

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

أداة تقسيم شبكة إنستغرام

قسّم صورة عريضة إلى شبكة إنستغرام بحجم 3×3 أو إلى أي عدد من الصفوف. القطع مُرقّمة لتسهيل رفعها بترتيب عكسي.

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