رسومات موجهة قابلة للتحجيم: أساسيات الرسم

في هذه المقالة ، ستكتشف المفاهيم الأساسية وهيكل المستند وعناصر الرسم المستخدمة في صور SVG.

إذا كنت جديدًا تمامًا على SVGs ، فقد يساعدك قراءة المقالات التالية أولاً:

شبكة تنسيق SVG

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

ملفات SVG viewBox تحدد السمة الإحداثيات التي تستخدمها الصورة. ستبدو SVGs التالية متطابقة عند تغيير حجمها إلى نفس الحجم:

  • أ viewBox من 0,0 إلى 200,100 مع سطر من 0,0 إلى 100,50
  • أ viewBox من 0,0 إلى 300,150 مع سطر من 0,0 إلى 150,75
  • أ viewBox من 0,0 إلى 30,15 مع سطر من 0,0 إلى 15,7.5 (يُسمح بأجزاء من الوحدة)

مساحة الرسم SVG

على عكس الرسوم البيانية الرياضية ، يبدأ نظام التنسيق SVG من أعلى اليسار (عادةً 0,0) مع توجيه المحور السيني لليمين والمحور الصادي لأسفل. لذلك ، نقطة في 100,200 يمثل 100 وحدة على يمين الحافة اليسرى و 200 وحدة لأسفل من الحافة العلوية.

عندما يتم تقديم SVG ، يمكن إعطاؤه width و height السمات أو الأبعاد المخصصة في CSS. سيتم شد الصورة أو سحقها في كلا الاتجاهين لملء الفراغ المخصص لها. ومع ذلك ، يمكن أن تعلن SVG أنه يمكن الحفاظ على نسبة العرض إلى الارتفاع لضمان قياس الأبعاد بشكل متسق.

مستند SVG XML

صورة SVG هي مستند XML يتبع اصطلاحات صارمة (علامات الإغلاق ، السمات المقتبسة ، إلخ). عندما تم تطوير SVGs لأول مرة في عام 1999 ، كانت الملفات تتطلب إعلان XML و DOCTYPE في أعلى المستند فوق الجذر <svg> جزء:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "https://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="https://www.w3.org/2000/svg">

  

</svg>

ربما لا تزال تواجه هذا التنسيق ، ولكنه أكثر شيوعًا بالنسبة لـ .svg ملفات لاستخدام عنصر جذر واحد:

<svg xmlns="https://www.w3.org/2000/svg">

  

</svg>

ال xmlns السمة مطلوبة. ستسمح معظم المتصفحات بحذفها عندما يتم تضمين SVG مباشرةً في HTML ، على الرغم من أن ذلك قد يؤدي إلى مشاكل إذا كنت تريد معالجة الصورة لاحقًا:

<svg>

  

</svg>

كثير يمكن تطبيق السمات الاختيارية على عنصر الجذر، ولكن الأكثر استخدامًا هي:

  • viewBox لتعيين الأبعاد.

    يتم تحديد منطقة إحداثيات مستطيلة كـ "minX minY width height". فمثلا، viewBox="0 0 600 400" هو 600 بواسطة 400 عرض مربع مع إحداثيات أعلى اليسار في 0,0. تذكر أن هذه مساحة مجردة ؛ لا تتعلق بالبكسل ، وعناصر الرسم الخاصة بك ليست مقيدة ضمن هذه الإحداثيات.

  • الإحتفاظ بنسبة العرض للإرتفاع يحدد كيفية قياس مربع العرض.

    هناك العديد من الخيارات. فمثلا، preserveAspectRatio="xMidYMid meet" يضمن محاذاة منتصف مربع عرض SVG مع منتصف منفذ العرض (نافذة المتصفح أو عنصر HTML الذي يحتوي على SVG) وأن الصورة تلائم المساحة المتاحة مع الحفاظ على نسبة العرض إلى الارتفاع الخاصة بها.

  • height و width اضبط حجم الصورة الجوهري.

    على سبيل المثال ، الإعداد width="300" height="200" قد تستخدم صورة افتراضية لـ 300 بواسطة 200 بكسل ما لم يتم تحديد حجمها باستخدام CSS. إذا تم ضبط العرض والارتفاع بدون ضبط ملف viewBox، يُفترض أن يكون عدد وحدات SVG بهذا الحجم – أي ، viewBox="0 0 300 200".

الجذر <svg> يمكن أن يتبع العنصر عنوانًا اختياريًا ووصفًا محددًا باستخدام title و desc عناصر. وثيقة أساسية:

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet">
  <title>My First Scalable Vector Graphic</title>
  <desc>An experimental SVG from SitePoint.com</desc>

  

</svg>

تجميع العناصر

يمكن تجميع أي مجموعة من العناصر (خطوط ، دوائر ، مستطيلات ، نص ، إلخ) باستخدام <g>...</g> العلامات. في جوهره ، يشبه تجميع الكائنات الرسومية في حزمة رسومات بحيث يمكن التلاعب بها كعنصر واحد.

على سبيل المثال ، يمكنك تحديد عقدة مجموعة الجذر بحيث يمكن معالجة الصورة بأكملها عبر JavaScript أو CSS:

<g id="main">
  
</g>

يمكن أن تحتوي مجموعة واحدة على أي عدد من المجموعات الداخلية مع التداخل حسب الضرورة.

خطوط

يتم رسم خط واحد بين نقطتين باستخدام line جزء:

<line x1="10" y1="10" x2="100" y2="200"
stroke="#999" stroke-width="5" stroke-linecap="round" />

ال stroke-linecap تحدد السمة تأثير نهاية السطر وتقبل قيم butt (الافتراضي)، round، square أو inherit:

SVG Stroke-linecap

مصدر الصورة: w3.org

خطوط متعددة

خطوط متعددة حدد مجموعة من مقاطع الخط المستقيم المتصلة:

<polyline points="580,10 560,390 540,200 520,390 400,390"
stroke="#c00" stroke-width="5" stroke-linecap="round"
stroke-linejoin="round" fill="none" />

ال stroke-linejoin تحدد السمة تأثير ربط السطر وتقبل قيم miter (الافتراضي)، round، bevel أو inherit:

SVG Stroke-linejoin

مصدر الصورة: w3.org

المضلعات

المضلعات تشبه الخطوط المتعددة فيما عدا أن الشكل الناتج سيغلق دائمًا:

<polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161"
stroke="#ff0" stroke-width="10" fill="#ff6" />

المستطيلات

يتم تحديد المستطيلات المربعة أو المستديرة باستخدام امتداد rect جزء:

<rect x="100" y="10" width="150" height="100" rx="10" ry="20"
stroke="#060" stroke-width="8" fill="#0f0" />

ال x و y صفات تحدد الزاوية اليسرى العليا. rx و ry تحديد الزاوية الأفقية والعمودية التقريب.

الدوائر

الدوائر يتم تعريفها باستخدام نقطة مركزية ونصف قطر:

<circle cx="100" cy="300" r="80"
stroke="#909" stroke-width="10" fill="#f6f" />

الحذف

الحذف يتم تعريفها باستخدام نقطة مركزية وقيمتين للنصف القطر:

<ellipse cx="450" cy="50" rx="80" ry="30"
stroke="#0cc" stroke-width="10" fill="#0ff" />

نص

يمكن إضافة النص الأساسي باستخدام ملف text جزء:

<text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text>

ال x و y تحدد السمات الإحداثي السفلي الأيسر للحرف الأول في السلسلة ، على الرغم من أن text-anchor و dominant-baseline توفر السمات مزيدًا من التحكم في الموضع.

مسارات

أخيرًا ، هناك ملف path جزء الذي لديه القدرة على محاكاة أي من العناصر الأساسية أعلاه. راجع “كيفية إنشاء مسارات معقدة في SVGs” لمزيد من التفاصيل.

النتائج

يحتوي مستند SVG النهائي الخاص بنا على العناصر التالية:

<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 600 400" preserveAspectRatio="xMidYMid meet">
  <title>My First Scalable Vector Graphic</title>
  <desc>An experimental SVG from SitePoint.com</desc>
  <g id="main">
    <line x1="10" y1="10" x2="100" y2="200" stroke="#00c" stroke-width="5" stroke-linecap="round" />

    <polyline points="580,10 560,390 540,200 520,390 400,390" stroke="#c00" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" fill="none" />

    <polygon points="350,75 379,161 469,161 397,215 423,301 350,250 277,301 303,215 231,161 321,161" stroke="#ff0" stroke-width="10" fill="#ffc" />

    <rect x="100" y="10" width="150" height="100" rx="10" ry="20" stroke="#060" stroke-width="8" fill="#0f0" />

    <circle cx="100" cy="300" r="80" stroke="#909" stroke-width="10" fill="#f6f" />

    <ellipse cx="450" cy="50" rx="80" ry="30" stroke="#0cc" stroke-width="10" fill="#0ff" />

    <text x="240" y="390" font-family="sans-serif" font-size="50" fill="#00f">SVG</text>
  </g>
</svg>

يظهر الكود أعلاه كما يلي:

مثال SVG

يمكنك قم بتنزيل ملف SVG هنا.

هذا مثال بسيط ، لكن الملف أقل من كيلو بايت واحد قبل التحسين والتصغير و gzipping. يكون تنسيق PNG المضغوطة المكافئ أعلاه أكبر بخمس مرات تقريبًا ولا يمكن تغيير حجمه فوق المستوى الأصلي 407 بواسطة 274 الدقة دون فقدان الجودة.

من النادر أن تحتاج إلى رسم SVGs يدويًا ، لأنه من الأسهل استخدام حزمة رسومات مثل المصور، إنكسكيب، SVG- تحريرأو طريقة الرسم. ومع ذلك ، فإن فهم كيفية عمل عناصر SVG الأساسية قد يساعدك على تحسين الصور أو إنشاء صور مذهلة على الخادم أو في JavaScript.

موارد أخرى:

المصدر

أضف تعليق