عنصر <svg> لـ SVG

تُستخدم صور SVG باستخدام مجموعة متنوعة من العناصر، التي يتم تطبيقها على بنية الصورة الب矢量ية والرسم والتنسيق. إذا لم يكن svg العنصر الجذر، يمكن استخدام عنصر svg لدمج قطعة SVG مستقلة داخل مستند الحالي (مثل مستند HTML). هذه القطعة المستقلة تحتوي على نطاق رؤية مستقل ونظام إحداثيات.

قواعد استخدام العنصر svg

العنصر الجذر لجميع صور SVG هو عنصر <svg>. يستخدم العنصر svg بناءً على القواعد التالية:

<svg xmlns="http://www.w3.org/2000/svg">　
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">　
</svg>

تذكر أن لا تنسى استخدام إعلانين للاسماء المدمجة، وإلا لن يعرض Firefox ملف SVG كصورة، بل سيقوم بتفسيره كملف XML آخر.

عناصر SVG المدمجة

يمكن للعناصر SVG أن تكون مدمجة، مثل ما هو موضح هنا:

<svg xmlns="http://www.w3.org/2000/svg">
　　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<svg>
　　　　</svg>
</svg>

يمكن استخدام عناصر SVG المدمجة لجمع أشكال SVG معًا وتوضيحها كجمع. سيتم تحديد جميع الأشكال المدمجة داخل عنصر SVG بناءً على موقع العناصر المحيطة بها (x، y). يمكنك أيضًا تحريك جميع الأشكال المدمجة بتحريك x وy للعناصر المحيطة بها.
هذا مثال يحتوي على دwoch مربع داخل عناصر SVG. بالإضافة إلى اللون، يتم تعريف x، y، الارتفاع والعرض للثلاثة أربعة مربعات بشكل متطابق. العناصر SVG المحيطة لها قيم x مختلفة. نظرًا لأن موقع x للمربعات هو تفسيره النسبي للعناصر SVG المحيطة بها، فإن المربعات تظهر في مواقع x مختلفة.

مثال على الخط

<svg xmlns="http://www.w3.org/2000/svg">
　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　<svg　x="10">
　　　　<rect　x="10"　y="10"　height="100"　width="100"
　　　　　　　　style="stroke:#ff0000;　fill:　#0000ff"/>
　　</svg>
　　<svg　x="200">
　　　　<rect　x="10"　y="10"　height="100"　width="100"
　　　　　　　　style="stroke:#009900;　fill:　#00cc00"/>
　　</svg>
</svg>

الملحوظة: يجب أن تكون خصائص النطاق الاسمي مطلوبة فقط في عنصر svg الجذر. إذا لم يتم تعيين أي نطاق اسمي لـ svg، فإنه يفترض أن تكون جميع العناصر المدمجة في النطاق الاسمي الافتراضي (المحدد في العنصر الجذر).
هذا هو رسم الصورة SVG التي تم إنشاؤها بواسطة الكود المذكور أعلاه: