Softonic

مولد فواصل SVG

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

أصبحت صفحات الهبوط نادرًا ما تحتوي على حدود أفقية واضحة بين الأقسام الملونة؛ إذ تندمج هذه الأقسام بسلاسة من خلال موجة منحنية، أو منحدر مائل، أو صف من المثلثات. وجميع هذه العناصر عبارة عن أشكال بسيطة مُصممة باستخدام تنسيق SVG: إطار (viewbox) مُحدد حجمه وفق عرض الصفحة، أو مضلع أو مسار مملوء بلون خلفية القسم التالي، ويُثبت هذا الإطار في أسفل القسم السابق. ويقوم هذا المولّد بإنشاء هذه الأشكال بخمسة أنماط مختلفة (موجة، منحنى، منحدر، مثلثات، سلالم)، مع إمكانية تحديد أي عرض أو ارتفاع أو لون أو انقلاب عمودي حسب الحاجة.

كيفية بناء مُفصِّل القسم

  1. 1

    اختر أسلوبًا

    الموجة (منحنى S)، المنحنى (قوس واحد)، الميل (قائم الزاوية)، المثلثات (زِغ زَغ)، السلالم (متدرجة).

  2. 2

    حدد العرض والارتفاع

    العرض = عرض الصفحة (من 1200 إلى 1920 بكسل). الارتفاع = ارتفاع العارضة (عادةً ما يتراوح بين 50 و200 بكسل).

  3. 3

    اختر نوع التعبئة

    اختر لون خلفية القسم التالي بحيث يندمج المُفصِّل فيه بسلاسة تامة.

  4. 4

    استقيم بشكل رأسي

    قم بتغيير وضعية flipY لقلب الشكل إذا كنت بحاجة إلى توجيهه لأعلى بدلاً من الأسفل.

  5. 5

    قم بنسخ ملف SVG.

    قم بلصق العنصر في أسفل القسم الخارجي أو في أعلى القسم الداخلي. استخدم `preserveAspectRatio="none"` (المدرج مسبقًا) لضمان تمدد الشكل مع نافذة العرض.

الأساليب الخمسة وأوقات استخدامها

النمط الأجواء مناسب جدًا
الموجة ناعمة وودودة البطل → شهادات العملاء، ألوان الباستيل
المنحنى نظيف وأنيق شبكة عناصر → عنصر دعوة (CTA)، تصميم بسيط للغاية
الميل عصري، جريء البطل الداكن → محتوى فاتح، مواضيع ذات تباين عالٍ
المثلثات دقيقة وتقنية أدوات مخصصة للمطورين، لوحة تحكم SaaS
السلالم مُصممة بشكل منظم وذات طابع رجعي جداول الأسعار، التصاميم التحريرية

إضافة قسمة في علامتك التوضيحية

الموقع النموذجي في أسفل القسم:

<section class="hero">
  <!-- hero content -->
  <div class="divider" aria-hidden="true">
    <!-- paste the SVG here -->
  </div>
</section>
<section class="next">…</section>

.hero { position: relative; }
.divider {
  position: absolute; bottom: 0; left: 0; width: 100%; line-height: 0;
}
.divider svg { width: 100%; height: auto; display: block; }

لماذا preserveAspectRatio="none"؟

بشكل افتراضي، يتم تكبير ملف SVG بشكل موحد. أما بالنسبة إلى المقسم الذي يمتد عبر نطاق العرض، فيجب أن يمتد الشكل أفقيًا بشكل كامل، أي من حافة إلى حافة دون أي انحناءات طفيفة مركزة على الصفحة. ويطلب ملف preserveAspectRatio="none" من المحرك عرض الصورة تشويه نسبة الأبعاد بحرية، وهو بالضبط ما يحتاجه المقسمون.

الوصولية وتحسين محركات البحث

  • قم بتمييز الغلاف aria-hidden="true" بحيث تتجاهل أجهزة قراءة الشاشة الشكل الزخرفي له.
  • احافظ على حجم ملف SVG دون بضع كيلوبايتات؛ إذ تؤدي ملفات SVG الكبيرة المدمجة إلى تأخير عملية تحليل هيكل DOM. وتكون المخرجات هنا أقل بكثير من 1 كيلوبايت.
  • تجنّب استخدام الصور النقطية كأدوات فاصلة؛ لأنها تظهر بشكل غير واضح (بشكل بكسلات) على الشاشات فائقة العرض وشاشات الريتينا.

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

ليس بشكل صارم؛ فخاصية width في تنسيق SVG تحدد الحجم الأساسي، بينما تُملأ الشكل جميع الحاويات باستخدام خاصية preserveAspectRatio="none" أو خاصية CSS width: 100%. وعند ضبط العرض على قيمة عددية كاملة مثل 1200، يصبح من السهل قراءة الأرقام الموجودة في المسار.

عادةً ما يكون هذا هو الخط الأساسي المدمج الافتراضي لعنصر SVG. أضف display: block (أو vertical-align: bottom) إلى ملف SVG لإزالة الفجوة.

نعم. قم بإنشاء مُقسَّمَين أو ثلاثة منفصلين بألوان ودرجات شفافية مختلفة، ثم رتبهم فوق بعضهم البعض. حاول تغيير موقع كل مُقسَّم بمقدار بضعة بكسل باستخدام الأمر margin-top أو CSS transform لإنتاج تأثير البارالكس.

ملف SVG الناتج ثابت. بالنسبة للموجات المتحركة، قم بتطبيق إطار مفتاحي من نوع CSS transform: translateX() على العنصر المحيط، أو استخدم نسختين متجاورتين وانزّلهما تدريجيًا.

لا يتم تخزين أي بيانات؛ إذ يتم عرض ملف SVG بشكل جديد في كل مرة استنادًا إلى قيم النموذج الحالية.

أدوات ذات صلة

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

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

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

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

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

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

صانع الأعلام

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

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

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

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

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

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