Softonic

مولد شكل SVG

خطوة 1 / 2

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

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

  1. 1

    اختر شكلًا

    دائرة، مربع، مثلث، نجمة، خماسي، سداسي أو قلب.

  2. 2

    حجم المجموعة وسمك الخط

    حجم الرسم البياني بوحدة البكسل. عرض الخط يحدد سماكة المحيط؛ حيث يُلغِي القيمة 0 المحيط تمامًا.

  3. 3

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

    أي لون من ألوان المربعات. حدد قيمة التعبئة بـ `none` للأشكال المجوفة.

  4. 4

    للمستويات النجمية، حدد النقاط

    يتقبل النموذج الأساسي للنجم من 3 إلى 12 نقطة؛ حيث يُعد خمس نقاط النموذج الكلاسيكي، بينما تمنح سبع نقاط مظهر شارة الشرطة.

  5. 5

    قم بنسخ ملف SVG.

    يستخدم أداة الربط (Markup) المكوّن الأساسي من تنسيق SVG المطابق (`<circle>`، `<rect>`، `<polygon>`، `<path>`) لتقليل عدد البايتات إلى الحد الأدنى.

هندسة الشكل بنظرة واحدة

الشكل المكوّن الأساسي في تنسيق SVG المعاملات المهمة
دائرة <circle> نصف القطر، التعبئة، الخط الرئيسي
المربع <rect> العرض، الارتفاع، السُمك (لا يوجد قيمة للمسافة هنا)
مثلث <polygon> (٣ نقاط) متساوي الأضلاع، يشير لأعلى
* النجمة <polygon> (N × 2) نقاط (3–12)، نسبة نصف القطر الداخلي إلى النصف القطر الخارجي
البنتاغون <polygon> (5 نقاط) موجهة بحيث يتجه الطرف لأعلى
السداسي <polygon> (٦ نقاط) موجهة بحيث تكون النقاط مواجهة للأسفل (قم بتدويرها بمقدار ٣٠ درجة لجعلها مستوية)
القلب <path> مع تقنية بيزيير مركزه على القماش، متماثل

مثال على الناتج: نجمة مكونة من خمس نقاط

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200">
  <polygon points="100,2 118.65,73.57 191.98,73.57 132.66,117.86 151.31,189.43 100,145.14 48.69,189.43 67.34,117.86 8.02,73.57 81.35,73.57"
    fill="#6366f1" stroke="#312e81" stroke-width="2"/>
</svg>

يُحدد نصف القطر الداخلي بـ 40٪ من نصف القطر الخارجي، وهو ما يتوافق مع النسب الكلاسيكية المستخدمة في نجوم الأعلام والكؤوس.

حالات الاستخدام

  • الأفاتار والأقنعة: استخدم دائرة كمسار قصّي لصور الملف الشخصي.
  • رقائق الحالة: على شكل مربع (مُستدير باستخدام خاصية border-radius في CSS أو إصدار أحدث من rx)، وتُستخدم كمؤشر بسيط للحالة.
  • واجهات التقييم: نجوم مملوءة، نصف مملوءة، أو ذات حواف محددة، وفقًا لمقياس من 0 إلى 5.
  • الشعارات والرموز التذكارية: مثلث سداسي الشكل يحتوي على نص أو أيقونة داخله.
  • أزرار التفاعل: قلب يمثل إعجابك، وقوائم الرغبات، والملفات المحفوظة.

لماذا تُستخدم العناصر الأساسية في تنسيق SVG على طريقة عامة؟

استخدام <circle> أو <polygon> بدلًا من النسخة المكافئة <path>:

  • حجمه أصغر من حيث عدد البايتات بالنسبة إلى الأشكال البسيطة (من 10 إلى 30 بايتًا). – من الأسهل إضافة حركة إلى هذه العناصر – حيث يمكن تطبيق تأثيرات التحول الزمني (tweening) مباشرةً على خصائص مثل r وcx وcy وpoints باستخدام CSS أو GSAP.
  • يُقرأ بشكل أوضح في عناصر التفتيش والاختلافات.

بالنسبة إلى الأشكال المعقدة (مثل الكتل، الأيقونات، الشعارات)، تُعد المسارات الخيار الأمثل لأنها قادرة على تمثيل المنحنيات والقطع المختلطة ضمن عنصر واحد فقط.

الوصولية

جميع ملفات SVG المولدة تكون ذات طابع زخرفي بشكل افتراضي. إذا كان الشكل يحمل معنى معينًا (مثل دائرة حمراء تدل على خطأ، وعلامة صفراء تدل على نجاح)، فيمكن تغليفه داخل عنصر والد يحتوي على العلامتين role="img" وaria-label، أو إضافة عنصر فرعي من نوع <title> داخل ملف SVG نفسه.

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

تحدد النصف القطر الداخلي درجة “السماكة” لكل ذراع. يستخدم هذا المولّد نسبة 40٪ من النصف القطر الخارجي للحصول على مظهر متوازن. وللحصول على نجم أكثر وضوحًا، خفض هذه النسبة في ملف SVG الناتج (مثلاً إلى 25٪)؛ أما إذا كنت ترغب في نجم أكثر ضبابية أو على شكل كتل لعب ليغو، فرفعها إلى 60٪.

يُنتج هذا المولد ملفًا بسيطًا من نوع <rect>. يمكن إضافة ملف rx="8" ry="8" إلى المربع المستقيم لتزيل الزوايا الحادة، أو استخدام خاصية CSS border-radius إذا كنت تلف ملف SVG.

نعم، قم بضم ملف SVG داخل عنصر والد يحمل الاسم transform: rotate(30deg)، أو قم بتعديل المسار عن طريق تحريك زاوية البداية بمقدار 30 درجة؛ حيث يكون المولد مُعدًا افتراضيًا بحيث يشير إلى الأعلى، وهو ما يتماشى مع معظم تصاميم الشارات.

نعم، يستخدم تنسيق SVG إطارات محددة بدقة، وإحداثيات كاملة البكسلات، بالإضافة إلى ترميز ذي طول أدنى. ويمكنك استخدامه مباشرة في React أو Vue أو Astro أو البريد الإلكتروني أو في HTML العادي دون الحاجة إلى أي تعديلات.

لا، تُستخدم معلمات الشكل لعرض ملف SVG الخاص بالطلب الحالي، ثم تُستبعد بعد ذلك.

أدوات ذات صلة

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

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

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

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

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

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

صانع الأعلام

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

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

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

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

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

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