آموزش تگ svg در HTML
آموزش تگ svg در HTML
دوست من سلام امیدوارم حالتون عالی و پر از انرژی باشید. توی این بخش از آموزش html css قراره که با آموزش تگ svg در HTML به صورت کامل آشنا بشید.
تگ Svg در HTML
تگ svg تگی است مانند یک ظرف برای نگهداری اشکال و تصاویر گرافیکی که ایجاد می شوند، اشکال گرافیکی مثل یک مربع یا دایره یا مستطیل ، متن و … که همه آنها میتوانند درون تگ svg نگهداری شوند.
کلمه SVG کوتاه شده ی کلمه ترکیبی Scalable Vector Graphics و به معنی ( گرافیک برداری مقیاس پذیر ) است ، که با استفاده از آن میتوان گرافیک های ۲ بعدی مبتنی بر XML را ایجاد و یا حتی طراحی کرد.
چرا باید از svg استفاده کنیم؟
- چون فایل های svg از کد تشکیل شدن
- چون به سادگی میشه یک فایل svg رو ویرایش کرد و تغیر داد
- چون کیفیتش رو در صورت زوم کردن از دست نمیده
- چون کیفیت و انعطافش بسیار بسیار بالاتر از فایل های jpg , png و.. است
- چون قابلیت چاپ رو در هر اندازه و وضوحی داراست
- چون هم سرعتش خیلی بالا و هم حجمش خیلی پایین تر از jpg و.. است
مثال از تگ svg در HTML
در ادامه آموزش html و css میتوانید یک مثال از این تگ را مشاهده نمایید.
مثال شماره ۱ : نمایش عکسی که از طریق svg ایجاد شده ، یعنی پسوند این فایل ها میشه svg و از کد درست شدن.
<body> <img src="files/mysvg.svg" style="width:100%;"> </body>
مثال شماره ۲ : رسم اشکال مختلف ( مستطیل ، مربع ، دایره ، مثلث و… ) با استفاده از svg
<body> <svg width="130" height="60"> <rect width="130" height="60" style="fill:#00b185;stroke-width:3;stroke:#000"/> </svg> </body>
مثال شماره ۳ : ایجاد متن با استفاده از svg
<body>
<svg width="200" height="70">
<text font-size="25" font-family="tahoma" x="10" y="50" style="fill:blue;">
wppush
</text>
</svg>
</body>
راستی اگر دنبال آموزش html css پروژه محور هستید می توانید از دوره ی آموزش وردپرس پوش استفاده کنید. جهت مشاهده ی 28 ساعت ویدیو آموزشی با پشتیبانی مادام العمر روی این لینک کلیک کنید.
پشتیبانی مرورگرها
در جدولی که در پایین مشاهده می کنید به این نتیجه می رسید که آیا مرورگرهای اینترنتی از تگ svg در HTML پشتیبانی میکنند یا خیر.
نکات و توضیحات
تفاوت های svg با Canvas شامل موارد زیر است :
- هردوی آنها ظرفی برای نگهداری اشکل گرافیکی هستند.
- svg یک گرافیک ۲بعدی و بر پایه ی بر کد xml است ولی canvas از طریق جاوا اسکریپت ایجاد می شود.
- اگه ویژگی های یک svg تغییر کند مرورگر بصورت اتوماتیک اون شکل رو بروزرسانی میکنه ولی در canvas پیکسل به پیکسل شکل از نو اجرا یا طراحی میشه.
- یک فایل svg بصورت تکه تکه است و میتوان به تکه های مختلف svg دست پیدا کرد و اون ها رو تغییر داد و یا حذف کرد.
شما میتوانید با دوره ی آموزشی html css در این موارد بسیار مهارت پیدا کنید.
در صورتی که مشکلی دارید و قادر به حل آن نیستید می توانید با ما در تماس باشید
دیدگاهتان را بنویسید