مثال‌های SVG

مشاهده فایل SVG

اگر مرورگر SVG نصب نشده باشد، نمی‌توانید فایل‌های SVG را مشاهده کنید.

نکته:پشتیبانی Firefox 1.5 و Opera 9 از SVG به صورت پیش‌فرض است. اگر یکی از این مرورگرها را استفاده می‌کنید، نیازی به نصب مرورگر SVG نیست.

SVG مرورگر را از Adobe رایگان دانلود کنید.

مشاهده کد منبع SVG

برای مشاهده کد منبع SVG این مثال‌ها را باز کنید، سپس در پنجره راست کلیک کنید و گزینه "مشاهده کد منبع" را انتخاب کنید.

مثال‌های SVG

شکل SVG

مکعب مستطیل
مکعب مستطیل شفاف
مکعب مستطیل شفاف 2
مکعب مستطیل با گوشه‌های گرد
دایره
دایره‌ای
سه دایره‌ای بر روی هم قرار داده شده
دو دایره‌ای
یک خط
سه‌گوش
چهارضلعی
خط چین
مسیر
تورم

فیلترهای SVG

filter feGaussianBlur
یک فیلتر feGaussianBlur دیگر
فیلتر feBlend
فیلتر feColorMatrix
فیلتر feComponentTransfer
فیلتر feOffset
feOffset،feFlood،feComposite،feMerge و feMergeNode
فیلتر feMorphology
فیلتر 1
فیلتر 2
فیلتر 3
فیلتر 4
فیلتر 5
فیلتر 6

تدرج SVG

تدرج خطی (تدرج افقی)
تدرج خطی (تدرج عمودی)
تدرج پرتو
تدرج پرتو 2

SVG Miscellaneous

یک عنصر "a" به مستطیل اضافه می‌کنیم تا مستطیل بتواند به عنوان یک لینک اضافه شود.
با استفاده از JavaScript یک عنصر ایجاد می‌کنیم وقتی کاربر روی دایره کلیک می‌کند.
مستطیل‌هایی که به مدت 5 ثانیه به تدریج محو می‌شوند
با تغییر ویژگی‌های x، y، width و height مستطیل و تغییر رنگ آن، یک اثر انیمیشنی ایجاد می‌کنیم
سه مستطیل که رنگ آن‌ها تغییر می‌کند
متن که در مسیر حرکت یک جنبشی حرکت می‌کند
متن که در مسیر حرکت یک جنبشی حرکت می‌کند، میچرخد و بزرگ می‌شود
متن که در مسیر حرکت یک جنبشی حرکت می‌کند، میچرخد و بزرگ می‌شود و یک مستطیل که به تدریج بزرگ می‌شود و رنگ آن تغییر می‌کند