این آموزش در تاریخ ۱۴۰۲/۰۶/۲۳ آپدیت شده است.
آموزش تگ svg در HTML
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش تگ svg در HTML با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تگ 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 |
<body> <img src="files/mysvg.svg" style="width:100%;"> </body> |
مثال شماره ۲ : رسم اشکال مختلف ( مستطیل ، مربع و… ) با استفاده از svg
|
1 2 3 4 5 6 7 |
<body> <svg width="130" height="60"> <rect width="130" height="60" style="fill:#00b185;stroke-width:3;stroke:#000"/> </svg> </body> |
مثال شماره ۳ : ایجاد متن با استفاده از svg
|
1 2 3 4 5 6 7 |
<body> <svg width="200" height="70"> <text font-size="25" font-family="tahoma" x="10" y="50" style="fill:blue;">Free-Learn</text> </svg> </body> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از تگ svg در HTML پشتیبانی میکنند یا خیر.
| نام مرورگر | Chrome | Firefox | Opera | Safari | Edge |
| پشتیبانی | بله | بله | بله | بله | بله |
Free-Learn
نکات و توضیحات
تفاوت های svg با Canvas شامل موارد زیر می باشد :
- هردوتاش ظرفی برای نگهداری اشکل گرافیکی می باشد
- svg یک گرافیک ۲بعدی و مبتنی بر کد xml می باشد ولی canvas از طریق جاوا اسکریپت ایجاد میشه
- اگه ویژگی های یک svg تغییر کند مرورگر بطور خودکار اون شکل رو بروزرسانی میکنه ولی در canvas پیکسل به پیکسل شکل از نو اجرا / طراحی میشه
- یک فایل svg بصورت تکه تکه می باشد و میتوان به تکه های مختلف svg دسترسی پیدا کرد و اونهارو تغییر و یا حذف کرد
