مثال های SVG

مثال های خودتان امتحان کنید

در مثال های زیر، کدهای SVG مستقیما به کدهای HTML اضافه شده اند. 

این مثال ها، به وسیله ی مرورگرهای فایرفاکس و اینترنت اکسپلورر و گوگل کروم و اپرا و سافاری پشتیبانی می شوند. 

مثال های SVG

اشکال ابتدایی SVG

یک دایره

یک مستطیل

یک مستطیل به همراه opacity

یک مستطیل به همراه opacity نمونه دوم

یک مستطیل با گوشه های گرد شده

یک بیضی

سه بیضی بر روی یکدیگر

دو بیضی

یک خط

یک چند ضلعی با سه ضلع

یک چند ضلعی با چهار ضلع

یک ستاره

یک ستاره ی دیگر

یک چندخطی

یک چند خطی دیگر

یک رسم

یک منحنی درجه 2

نوشتن یک متن

چرخاندن یک متن

یک متن در چند خط

یک متن به صورت لینک

تعریف یک رنگ برای یک خط یا متن یا کادر

تعریف عرض برای یک خط یا متن یا کادر(stroke-width)

تعریف انواع مختلف گوشه ها برای یک رسم باز(stroke-linecap)

تعریف خط های فاصله دار(stroke-dasharray)

فیلترهای SVG

افکت blur با feGaussianBlur

شفاف کردن عکس انحرافی - feOffset

تاریک کردن سایه - feOffset

ترکیب سایه با یک رنگ - feOffset

شیب رنگ در SVG

یک بیضی به همراه یک شیب رنگ خطی افقی از رنگ زرد تا قرمز

یک بیضی به همراه یک شیب رنگ عمودی خطی از رنگ زرد تا قرمز

یک بیضی به همراه یک شیب رنگ افقی خطی از رنگ زرد تا قرمز به همراه یک متن

یک بیضی به همراه یک شیب رنگ شعاعی از رنگ سفید تا آبی

یک بیضی دیگر به همراه یک شیب رنگ شعاعی از رنگ سفید تا آبی

مثال های متفرقه

مستطیلی که پس از 5 ثانیه محو می شود

یک مستطیل رشد کننده که رنگ آن عوض می شود

سه مستطیل که رنگشان عوض می شود

حرکت یک متن در یک مسیر

حرکت و چرخش و تغییر اندازه در طی یک مسیر

حرکت و چرخش و تغییر اندازه در طی یک مسیر + یک مستطیل بزرگ شونده که تغییر رنگ می دهد

چرخش بیضی ها