مثالی از 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 خارجی اشاره دارند. این DTD در “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd” قرار دارد. این DTD در W3C قرار دارد و شامل تمام عناصر مجاز SVG است.

کد SVG با علامت <svg> شروع می‌شود، شامل برچسب باز <svg> و برچسب بسته </svg>. این علامت ریشه است. ویژگی‌های width و height عرض و ارتفاع مستند SVG را تنظیم می‌کنند. ویژگی version نسخه SVG مورد استفاده را تعریف می‌کند و ویژگی xmlns نام‌فضای SVG را تعریف می‌کند.

SVG <circle> برای ایجاد یک دایره استفاده می‌شود. ویژگی‌های cx و cy مختصات x و y مرکز دایره را تعریف می‌کنند. اگر این دو ویژگی را نادیده بگیریم، نقطه (0, 0) به عنوان نقطه مرکز استفاده می‌شود. ویژگی r شعاع دایره را تعریف می‌کند.

ویژگی‌های stroke و stroke-width نحوه نمایش لبه شکل را کنترل می‌کنند. ما لبه دایره را به 2px پهنا و لبه سیاه تنظیم می‌کنیم.

ویژگی fill رنگ درون شکل را تنظیم می‌کند. ما رنگ پرکننده را به قرمز تنظیم می‌کنیم.

عملکرد برچسب بسته این است که عناصر SVG و مستند خود را ببندد.

توضیح:تمام برچسب‌های باز باید دارای برچسب بسته باشند!