آموزش نگ svg در HTML
تگ <svg> در HTML یک ابزار قدرتمند برای ایجاد تصاویر و نمودارهای برداری در وب‌سایت‌ها است. در این مقاله، به طور کامل با تگ <svg> آشنا می‌شویم، ویژگی‌ها و نحوه استفاده از آن را توضیح می‌دهیم و با مثال‌هایی از کاربردهای مختلف آن آشنا می‌شویم.
1. تگ svg در HTML
تگ <svg> یک تگ بلوک است که برای تعریف یک ناحیه رسم برداری در صفحات HTML استفاده می‌شود. این تگ به شما امکان می‌دهد تا اشکال هندسی مختلفی مانند دایره، مستطیل، خط و … را در صفحه وب خود ایجاد کنید.
2. ویژگی‌های تگ svg
تگ <svg> دارای ویژگی‌های زیر است:
- width: عرض ناحیه رسم به واحد پیکسل یا درصد.
- height: ارتفاع ناحیه رسم به واحد پیکسل یا درصد.
3. نحوه استفاده از تگ svg
<svg width="200" height="200">
<circle cx="100" cy="100" r="80" fill="red" />
</svg>در این مثال، یک دایره قرمز با مرکز در (100،100) و شعاع 80 پیکسل رسم شده است.
4. ویژگی‌های عمومی
تگ‌های <svg> می‌توانند دارای ویژگی‌هایی مانند viewBox، preserveAspectRatio و xmlns باشند که به کنترل نمایش و رفتار SVG کمک می‌کنند.
5. مثال کاربردی
<svg width="400" height="200">
<rect x="50" y="20" width="150" height="150" fill="blue" />
<circle cx="300" cy="95" r="40" fill="yellow" />
<line x1="50" y1="180" x2="350" y2="180" stroke="green" />
</svg>در این مثال، یک مستطیل آبی، یک دایره زرد و یک خط سبز درون یک ناحیه SVG به ابعاد 400×200 پیکسل رسم شده است.
6. کاربردها
- نمودارها و نمایش داده‌ها: با استفاده از تگ
<svg>، می‌توانید نمودارها و نمایش داده‌های مختلف را به شکل برداری و با کیفیت بالا ایجاد کنید. - آیکون‌ها و لوگوها: از طریق SVG، می‌توانید آیکون‌ها و لوگوهای برداری برای وبسایت خود ایجاد کنید که در هر اندازه و بدون از دست رفتن کیفیت نمایش داده می‌شوند.
- انیمیشن‌ها: با استفاده از جاوااسکریپت و CSS، می‌توانید انیمیشن‌های پویا را برای شکل‌ها و اشکال SVG ایجاد کنید.
تگ <svg> یک ابزار بسیار قدرتمند برای رسم اشکال و تصاویر برداری در وب است. با استفاده از آن، می‌توانید تصاویر بسیار زیبا و پویا را برای وبسایت‌های خود ایجاد کنید و تجربه کاربری را بهبود بخشید.
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام