SVG در HTML

دسته بندی : آموزش HTML سطح مقاله : متوسط زمان مطالعه : 4 دقیقه آخرین بروز رسانی: 05 آذر 1399

SVG در HTML مخفف Scalable Vector Graphics به معنای گرافیک برداری مقیاس‌پذیر است. SVG ابزاری قدرتمند برای ایجاد و جایگذاری گرافیک‌های دوبعدی در صفحات HTML به شمار می‌رود. این قابلیت، SVG را به ابزاری منعطف و کاربردی برای ساخت طیف وسیعی از برنامه‌های کاربردی از جمله بازی‌ها، انیمیشن‌ها، نمودارها و ابزارهای طراحی تبدیل کرده است.

نحوه بکار گیری SVG در HTML

SVG یا گرافیک برداری مقیاس‌پذیر، همانطور که گفتیم ابزاری قدرتمند برای ایجاد و درج گرافیک‌های دوبعدی در صفحات HTML است. به دلیل مزایایی مانند مقیاس‌پذیری، دسترسی‌پذیری، تعاملی بودن و انعطاف‌پذیری، SVG به طور گسترده در طراحی وب مدرن مورد استفاده قرار می‌گیرد. در اینجا دو روش اصلی برای استفاده از SVG در HTML وجود دارد:

درج کد SVG به طور مستقیم در HTML

ایجاد یک عنصر SVG:

HTML

<svg width="200" height="100">
</svg>

این کد یک عنصر SVG با عرض 200 پیکسل و ارتفاع 100 پیکسل ایجاد می‌کند. شما می‌توانید عرض و ارتفاع را مطابق با نیاز خود تنظیم کنید.

اضافه کردن عناصر SVG:

درون عنصر SVG، می‌توانید از عناصر مختلف SVG برای ایجاد اشکال، خطوط، متن و سایر عناصر گرافیکی استفاده کنید. به عنوان مثال، برای ایجاد یک مستطیل قرمز، می‌توانید از کد زیر استفاده کنید:

HTML

<rect width="100" height="50" fill="red" />

بستن عنصر SVG:

HTML

</svg>

این کد عنصر SVG را می‌بندد.

مثال:

در اینجا یک مثال کامل از نحوه درج کد SVG به طور مستقیم در HTML برای ایجاد یک مربع قرمز، یک دایره آبی و یک مثلث سبز آورده شده است:

HTML

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG در HTML</title>
</head>
<body>
  <svg width="400" height="300">
    <rect width="100" height="50" fill="red" />
    <circle cx="150" cy="50" r="20" fill="blue" />
    <polygon points="250,50 300,100 200,200" fill="green" />
  </svg>
</body>
</html>

این کد یک صفحه HTML با یک عنصر SVG ایجاد می‌کند که شامل یک مربع قرمز، یک دایره آبی و یک مثلث سبز است.

مزایای استفاده از کد SVG به طور مستقیم در HTML:

کنترل بیشتر: شما کنترل کامل بر ظاهر و عملکرد گرافیک‌های SVG خود دارید.
سادگی: نیازی به ایجاد یا مدیریت فایل‌های SVG خارجی نیست.
سازگاری: کد SVG به طور مستقیم در HTML شما درج می‌شود و با همه مرورگرهای وب سازگار است.

معایب استفاده از کد SVG به طور مستقیم در HTML:

پیچیدگی: برای ایجاد گرافیک‌های پیچیده، ممکن است به نوشتن کد SVG بیشتری نیاز داشته باشید.
خوانایی: درج کد SVG در HTML می‌تواند صفحه را شلوغ و خواندن آن را دشوار کند.

نکات:

برای ویرایش کد SVG، می‌توانید از ویرایشگرهای متن یا ویرایشگرهای تخصصی SVG مانند Inkscape استفاده کنید.
برای تست گرافیک‌های SVG خود، می‌توانید از ابزارهای توسعه‌دهنده مرورگر وب خود استفاده کنید.
منابع آنلاین و کتاب‌های آموزشی زیادی در مورد SVG وجود دارد که می‌توانید از آنها برای یادگیری بیشتر در مورد این موضوع استفاده کنید.

با استفاده از این روش و درک مفاهیم SVG، می‌توانید گرافیک‌های باکیفیت و پویا را به طور مستقیم در صفحات HTML خود ایجاد کنید.

پیوند به یک فایل SVG خارجی

یکی دیگر از روش‌های استفاده از SVG در HTML، پیوند به یک فایل SVG خارجی است. این روش به شما امکان می‌دهد تا گرافیک‌های SVG را در یک فایل جداگانه ذخیره کنید و سپس آنها را در صفحات HTML مختلف خود به اشتراک بگذارید.

مراحل زیر نحوه انجام این کار را نشان می‌دهد:

ایجاد یک فایل SVG:

یک فایل SVG با استفاده از یک ویرایشگر متن یا ویرایشگر تخصصی SVG مانند Inkscape ایجاد کنید. کد SVG خود را در این فایل ذخیره کنید.

ذخیره فایل SVG:

فایل SVG را در مکانی که می‌توانید به آن از طریق HTML خود دسترسی داشته باشید ذخیره کنید. به عنوان مثال، می‌توانید آن را در همان دایرکتوری صفحه HTML خود یا در یک دایرکتوری فرعی ذخیره کنید.

پیوند به فایل SVG در HTML:

از عنصر <img> در HTML خود برای پیوند به فایل SVG خارجی استفاده کنید. به عنوان مثال، برای پیوند به فایلی به نام “my-image.svg” در همان دایرکتوری صفحه HTML خود، می‌توانید از کد زیر استفاده کنید:

HTML

<img src="my-image.svg" alt="My SVG Image">

شما می‌توانید مقادیر صفات width و height را برای تنظیم اندازه تصویر SVG در صفحه خود تنظیم کنید. همچنین می‌توانید از صفت alt برای افزودن متن جایگزین برای تصویر استفاده کنید که در صورت عدم بارگیری تصویر SVG نمایش داده می‌شود.

مثال:

در اینجا یک مثال کامل از نحوه پیوند به یک فایل SVG خارجی به نام “my-image.svg” در همان دایرکتوری صفحه HTML آورده شده است:

HTML

<!DOCTYPE html>
<html lang="fa">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>SVG در HTML</title>
</head>
<body>
  <img src="my-image.svg" alt="My SVG Image" width="200" height="150">
</body>
</html>

این کد یک صفحه HTML با یک تصویر SVG ایجاد می‌کند که از فایلی به نام “my-image.svg” در همان دایرکتوری صفحه HTML بارگذاری می‌شود.

مزایای استفاده از فایل‌های SVG خارجی:

مدیریت آسان: شما می‌توانید گرافیک‌های SVG خود را در یک فایل جداگانه ذخیره و مدیریت کنید.
استفاده مجدد: می‌توانید از یک فایل SVG در صفحات HTML مختلف خود استفاده مجدد کنید.
سازگاری: فایل‌های SVG خارجی با همه مرورگرهای وب سازگار هستند.

معایب استفاده از فایل‌های SVG خارجی:

درخواست‌های HTTP اضافی: بارگذاری یک فایل SVG خارجی به یک درخواست HTTP اضافی نیاز دارد که می‌تواند سرعت بارگذاری صفحه را کمی کاهش دهد.
پیچیدگی: برای استفاده از فایل‌های SVG خارجی، باید آنها را در یک مکان قابل دسترس ذخیره کنید و مسیر آنها را در HTML خود به درستی مشخص کنید.

نکات:

برای بهینه‌سازی عملکرد، می‌توانید فایل‌های SVG خود را فشرده کنید.
برای ارائه یک تجربه کاربری بهتر، می‌توانید از بارگذاری تنبلانه تصاویر SVG استفاده کنید.
منابع آنلاین و کتاب‌های آموزشی زیادی در مورد SVG وجود دارد که می‌توانید از آنها برای یادگیری بیشتر در مورد این موضوع استفاده کنید.

با استفاده از این روش و درک مفاهیم SVG، می‌توانید گرافیک‌های باکیفیت و پویا را از طریق فایل‌های SVG خارجی در صفحات HTML خود به اشتراک بگذارید. به شما پیشنهاد میکنیم برای دیدن آموزش رایگان و کامل CSS به سایت آکادمی دویکس مراجعه کرده و مقالات این دسته را مطالعه کنید.

مزایای استفاده از SVG در HTML

استفاده از SVG در HTML مزایای متعددی دارد که آن را به ابزاری ارزشمند برای طراحان و توسعه‌دهندگان وب تبدیل می‌کند. در اینجا برخی از مهم‌ترین مزایای آن را شرح می‌دهیم:

1. مقیاس‌پذیری: تصاویر SVG به صورت برداری هستند، به این معنی که از فرمول‌های ریاضی برای تعریف اشکال و خطوط استفاده می‌کنند. این امر باعث می‌شود تا آنها بدون افت کیفیت در هر اندازه ای قابل تغییر اندازه باشند. این ویژگی SVG را برای وب‌سایت‌های واکنش‌گرا و برنامه‌هایی که نیاز به نمایش تصاویر در دستگاه‌های مختلف با وضوح‌های متفاوت دارند، ایده‌آل می‌کند.

2. وضوح و شفافیت: تصاویر SVG همیشه با وضوح و شفافیت کامل نمایش داده می‌شوند، برخلاف تصاویر شطرنجی (مانند JPEG یا PNG) که با افزایش یا کاهش اندازه، کیفیت آنها افت می‌کند. این ویژگی SVG را برای آیکون‌ها، لوگوها و سایر عناصر گرافیکی که نیاز به جزئیات دقیق دارند، مناسب می‌کند.

3. کوچک بودن حجم فایل: تصاویر SVG به طور کلی حجم فایل کوچکتری نسبت به تصاویر شطرنجی با کیفیت مشابه دارند. این امر به ویژه برای وب‌سایت‌هایی که ترافیک بالایی دارند و سرعت بارگذاری برای آنها حائز اهمیت است، مفید است.

4. قابلیت ویرایش: کد SVG به راحتی قابل ویرایش و personalize کردن است. شما می‌توانید به طور مستقیم در کد تغییراتی ایجاد کنید یا از ابزارهای ویرایش SVG برای ایجاد و ویرایش تصاویر استفاده کنید.

5. قابلیت انیمیشن: تصاویر SVG را می‌توان با استفاده از CSS یا JavaScript به طور پویا انیمیشن و manipulate کرد. این امر امکان ایجاد گرافیک‌های جذاب و تعاملی را فراهم می‌کند.

6. دسترسی‌پذیری: تصاویر SVG به طور ذاتی برای افراد دارای معلولیت قابل دسترس‌تر هستند. می‌توان برای این تصاویر توضیحات متنی و اطلاعات مربوط به دسترسی ارائه کرد تا افراد با استفاده از خوانندگان صفحه به آنها دسترسی داشته باشند.

7. سازگاری با موتورهای جستجو: تصاویر SVG به طور کلی توسط موتورهای جستجو به خوبی شناسایی و فهرست می‌شوند. این امر می‌تواند به بهبود سئو وب‌سایت شما کمک کند.

8. سازگاری با مرورگرها: تصاویر SVG توسط همه مرورگرهای وب مدرن پشتیبانی می‌شوند. این امر نگرانی شما را در مورد سازگاری با مرورگرهای مختلف برطرف می‌کند.

در مجموع، SVG یک ابزار قدرتمند و versatile برای ایجاد گرافیک‌های وب است. مزایای متعددی مانند مقیاس‌پذیری، وضوح و شفافیت، کوچک بودن حجم فایل، قابلیت ویرایش، قابلیت انیمیشن، دسترسی‌پذیری، سازگاری با موتورهای جستجو و سازگاری با مرورگرها دارد که آن را به گزینه‌ای ایده‌آل برای طراحان و توسعه‌دهندگان وب تبدیل می‌کند.

علاوه بر مزایای ذکر شده، SVG قابلیت‌های دیگری مانند ایجاد گرادیان‌ها، فیلترها، ماسک‌ها و الگوها را نیز ارائه می‌دهد. این قابلیت‌ها به شما امکان می‌دهد گرافیک‌های پیچیده و جذاب را با استفاده از کد SVG ایجاد کنید.

این مقاله چقدر براتون مفید بود؟

اولین امتیاز را ثبت کنید😊