تصویر SVG چیست؟ چرا و چگونه از آن استفاده کنیم؟

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

در صفحات وب هم همین موضوع در مورد تصاویر صدق می‌کند. اگر اندازه‌ای بیشتر از اندازه خود تصویر به آن اختصاص یابد یا در عنصری قرار بگیرد که در آن از اطراف کشیده شود، با تصویری با کیفیت پایینتر روبرو خواهید شد. این موضوع سالها پیش در بین جامعه طراحان با بوجود آمدن نرم افزار های گرافیک برداری مانند Corel Draw و Adobe illustrator حل شد. اما تصاویر گرافیکی برداری (Vector Graphics) چه چیز هستند؟

آنچه در ادامه می‌خوانید:

1. SVG چیست؟

2. چرا باید از SVG استفاده کنیم؟

3. تصاویر SVG را از کجا دریافت کنیم؟

4. چگونه از تصاویر SVG در صفحات وب استفاده کنیم؟

5. چگونه تصاویر SVG را توسط CSS به صفحه اضافه کنیم؟

6. نمایش تصاویر SVG بصورت مستقیم در صفحه HTML

7. نمایش تصاویر SVG توسط تگ <object>

8. نمایش تصاویر SVG توسط تگ <iframe>

9. نمایش تصاویر SVG توسط تگ <embed>

SVG چیست؟

تصاویر برداری از نقطه‌ها، خطها و اشکالی بر پایه فرمولهای ریاضی تشکیل شده اند. وقتی اندازه آن را بزرگتر می‌‌کنید، وضوح (Reolution) آن کاهش پیدا نمی‌کند. بنابراین می تواند به راحتی در هر مقیاسی بدون اینکه افت کیفیت پیدا کند مورد استفاده قرار گیرد.

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

SVG مخفف عبارت (Scalable Vector Graphics) به معنی “تصاویر گرافیکی برداری مقیاس پذیر” است. این نوع خاصی از تصاویر گرافیکی برداریست که توسط زبان نشانه گذاری XML نوشته می‌شود.

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

دلایل مختلفی ما را به سمت استفاده از تصاویر SVG سوق می‌دهند که به تعدادی از آنها اشاره می کنیم:

تصاویر SVG به هنکام بزرگنمایی (زوم) یا تغییر اندازه کیفیت خود را از دست نمی‌دهند.
این تصاویر می توانند توسط ویرایشگرهای کد مثل VSCode خلق یا ویرایش شوند.
آنها قابلیت متحرک شدن دارند.
اندازه فایل آنها کوچک است و قابلیت مقیاس پذیری بالایی دارند.

اما حالا ببینیم تصاویر SVG چگونه کار می کنند.

تصاویر SVG را از کجا دریافت کنیم؟

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

تصویری از سایت unDraw — ۱. صفحه اول سایت unDraw برای جستجوی تصاویر SVG

چگونه از تصاویر SVG در صفحات وب استفاده کنیم؟

این ساده‌ترین روشیست که با آن می‌توانید تصاویر SVG را در صفحات وب اضافه کنید. با استفاده از تگ <img> و مشخص کردن آدرس فایل SVG می‌توانید تصاویر را به صفحه خود اضافه کنید.

<img src="https://my-project.ir/img/sample.svg" alt="تصویر SVG" />

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

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>SVG Samples</title>
  </head>
  <body>
    <img src="https://my-project.ir/img/sample.svg" alt="تصویر SVG" />
  </body>
</html>

مشاهده و ویرایش کد در حالت تمام صفحه

وقتی با استفاده از تگ <img> تصویر SVG را اضافه کرده و اندازه آن را مشخص نکنید، تصویر با اندازه اصلی آن در صفحه به نمایش در خواهد آمد. در مثال بالا چون من اندازه تصویر را تغییر ندادم، تصویر با اندازه اصلی خود در صفحه نمایش داده شده است.

برای تغییر اندازه تصاویر SVG می‌توانید از ویژگی‌های width و height در CSS استفاده کنید:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      img {
        width: 350px;
        height: 250px;
      }
    </style>
    <title>SVG Samples</title>
  </head>
  <body>
    <img src="https://my-project.ir/img/sample.svg" alt="تصویر SVG" />
  </body>
</html>

مشاهده و ویرایش کد در حالت تمام صفحه

چگونه تصاویر SVG را توسط CSS به صفحه اضافه کنیم؟

این روش هم مشابه استفاده از تگ <img> است ولی اینبار از ویژگی background-image در CSS استفاده می‌کنیم.

.sample-svg {
  background-image: url(sample.svg);
}

وقتی از CSS برای استفاده از تصاویر SVG استفاده می‌کنیم امکان بیشتری برای ایجاد تغییرات در آن نسبت به تگ <img> داریم:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <style>
      .svg-sample {
        background-image: url("https://my-project.ir/img/sample.svg");
      }
    </style>
    <title>SVG Samples</title>
  </head>
  <body class="svg-sample"></body>
</html>

مشاهده و ویرایش کد در حالت تمام صفحه

نمایش تصاویر SVG بصورت مستقیم در صفحه HTML

توسط تگ <svg> می‌توان بطور مستقیم تصاویر SVG را در صفحات HTML بکار برد:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <svg
      id="bb554b9e-b999-4ef3-b2f2-4c0395b94ae2"
      data-name="Layer 1"
      xmlns="http://www.w3.org/2000/svg"
      width="926.62165"
      height="600.08495"
      viewBox="0 0 926.62165 600.08495"
    >
      <circle cx="150.53395" cy="254.87249" r="24.56103" fill="#ffb8b8" />
      <polygon
        points="67.543 549.197 73.762 559.763 117.474 540.803 108.295 525.21 67.543 549.197"
        fill="#ffb8b8"
      />
      <path
        d="M206.09566,694.4297,218.343,715.23658l.0005.00084A15.38605,15.38605,0,0,1,212.888,
         736.302l-.43091.25362L192.4047,702.48857Z"
        transform="translate(-136.68918 -149.95753)"
        fill="#2f2e41"
      />
    .
    .
    .
    .
  </body>
</html

مشاهده و ویرایش کد در حالت تمام صفحه

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

نحوه عملکرد تگ <svg> را ببینید.

نمایش تصاویر SVG توسط تگ <object>

شما می‌توانید از تگ <object> برای استفاده از تصاویر SVG در صفحات وب استفاده نمایید.

<object data="https://my-project.ir/img/sample.svg" height="300" width="400"></object>

در این روش بوسیله صفت data آدرس یا URL تصویر را مشخص می‌کنید. همچنین برای تغییر در اندازه تصویر می‌توانید از صفات with و height در تگ <object> استفاده کنید.

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <object
      data="https://my-project.ir/img/sample.svg"
      height="300"
      width="400"
    ></object>
  </body>
</html>

مشاهده و ویرایش کد در حالت تمام صفحه

نکته: استفاده از تگ <object> برای نمایش تصاویر SVG توسط تمام مرورگرها پشتیبانی می‌شود.

نمایش تصاویر SVG توسط تگ <iframe>

این روش بدلیل محدودیتهای بسیاری که ایجاد می‌کند توصیه نمی‌شود و تنها برای معرفی یک راهکار برای نمایش تصاویر SVG استفاده می‌شود.

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <iframe src="https://my-project.ir/img/sample.svg"></iframe>
  </body>
</html>

مشاهده و ویرایش کد در حالت تمام صفحه

در این روش هیچ دسترسی برای ایجاد تغییرات مانند اندازه تصاویر در اختیار شما نخواهد بود چون تصویر در محیطی جدای صفحه شما بارگذاری شده‌ است.

نمایش تصاویر SVG توسط تگ <embed>

استفاده از تگ <embed> روش دیگری برای استفاده از تصاویر SVG در صفحات وب است.

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

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