آموزش تگ svg در HTML

آموزش تگ svg در HTML سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ svg در HTML با من همراه باشید.

آموزش تگ svg در HTML

تگ Svg در HTML
تگ svg تگی است همانند یک ظرف برای نگهداری اشکال گرافیکی که ایجاد می شوند، اشکال گرافیکی مثه یک مربع یا دایره ، متن و … که همگی میتوانند درون تگ svg نگهداری شوند.

کلمه SVG مخفف Scalable Vector Graphics و به معنی ( گرافیک برداری مقیاس پذیر ) می باشد ، که با استفاده از آن میتوان گرافیک های ۲ بعدی مبتنی بر XML را ایجاد / طراحی کرد.

چرا باید از svg استفاده کنیم؟

چون فایل های svg از کد تشکیل شدن
چون به راحتی میشه یک فایل svg رو ویرایش کرد
چون هرچقدر هم روش زوم کنیم کیفیتش کم نمیشه
چون کیفیت و انعطافش خیلی خیلی بیشتر از فایل های jpg , png و.. می باشد
چون قابل چاپ در هر اندازه و وضوحی می باشد
چون هم حجمش خیلی پایین و هم سرعتش خیلی بالاتر از jpg و.. می باشد
Free-Learn
مثال از تگ svg در HTML
در ادامه میتوانید یک مثال از این تگ را مشاهده نمایید.

مثال شماره ۱ : نمایش یک عکس که از طریق svg ایجاد شده ، یعنی پسوند این فایل ها میشه svg و از کد درست شدن.

1
2
3
4
5

امتحان کنید

مثال شماره ۲ : رسم اشکال مختلف ( مستطیل ، مربع و… ) با استفاده از svg

7

امتحان کنید

مثال شماره ۳ : ایجاد متن با استفاده از svg

امتحان کنید

پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ svg در HTML پشتیبانی میکنند یا خیر.

نام مرورگر Chrome Firefox Opera Safari Edge
پشتیبانی بله بله بله بله بله
Free-Learn
نکات و توضیحات
تفاوت های svg با Canvas شامل موارد زیر می باشد :

هردوتاش ظرفی برای نگهداری اشکل گرافیکی می باشد
svg یک گرافیک ۲بعدی و مبتنی بر کد xml می باشد ولی canvas از طریق جاوا اسکریپت ایجاد میشه
اگه ویژگی های یک svg تغییر کند مرورگر بطور خودکار اون شکل رو بروزرسانی میکنه ولی در canvas پیکسل به پیکسل شکل از نو اجرا / طراحی میشه
یک فایل svg بصورت تکه تکه می باشد و میتوان به تکه های مختلف svg دسترسی پیدا کرد و اونهارو تغییر و یا حذف کرد

اسکریپت های جالب در اسکریپت من