مثال على SVG

SVG مكتوبة باستخدام XML.

مثال SVG

هذا المثال هو مثال بسيط على وثيقة SVG. يجب أن يتم حفظ ملفات SVG باستخدام نهاية ملف .svg:

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</svg>

انظر إلى الأمثلة (للمتصفحات التي تدعم SVG فقط)

(إذا كنت ترغب في رؤية كود SVG المصدر، فافتح هذا المثال، ثم انقر بزر الماوس الأيمن في النافذة. اختر "رؤية الكود المصدر".)

توضيح الكود:

السطر الأول يحتوي على إعلان XML. لاحظ خصائص standalone! هذه الخاصية تحدد ما إذا كانت هذه وثيقة SVG "مستقلة" أو تحتوي على إشارات إلى ملفات خارجية.

standalone="no" يعني أن وثيقة SVG ستقوم بالإشارة إلى ملف خارجي - هنا، هو ملف DTD.

تقوم السطر الثاني والثالث بالإشارة إلى هذا DTD الخارجي للSVG. يقع هذا DTD في 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'. يقع هذا DTD في W3C ويحتوي على جميع العناصر المسموح بها للSVG.

تبدأ كود SVG بجعل العنصر <svg>، بما في ذلك العلامة المفتوحة <svg> والعلامة المغلقة </svg> . هذا العنصر الجذر. يمكن تعيين خصائص width و height لتعيين عرض وارتفاع وثيقة SVG. يمكن تعريف الخاصية version لتعريف الإصدار المستخدم، والعنصر xmlns لتعريف مساحة الاسم SVG.

يستخدم SVG <circle> لإنشاء دائرة. تعريف القيم cx و cy هو x و y للإحداثيات المركزية للدائرة. إذا تم تجاهل هذه القيم، فإن نقطة الدائرة ستكون (0, 0). تعريف القيمة r هو قطر الدائرة.

يتحكم المفتاح stroke والمفتاح stroke-width في كيفية عرض هالة الشكل. نحن نضبط هالة الدائرة على عرض 2px مع حواف سوداء.

يحدد المفتاح fill لون الشكل الداخلي. نحن نضبط لون التعبئة على الأحمر.

يستخدم العلامة المغلقة لإغلاق عنصر SVG ووثيقة الوثيقة نفسها.

ملاحظة:يجب أن تكون جميع العلامات المفتوحة لها علامات مغلقة معينة!