راهنمای کامل SVG | قسمت 2

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

چگونه از SVG استفاده کنیم

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

تگ تصویر

شما می‌توانید از یک SVG تصویری در صفحه استفاده کنید، درست به همان صورتی که تصاویر دیگر را به صفحه وارد می‌کنید:

<img src="myAwesomeSVG.svg" alt="My Awesome SVG">

با قرار دادن چنین حالتی در وبسایت، عرض و ارتفاع تصویر درست همان مقداری را دریافت می‌کند که به صورت پیشفرض خود تصویر دارد. البته در صورتی که از خاصیت width و height استفاده کنید یا اینکه در CSS به آن مقدار بدهید، اندازه‌ها تغییر پیدا خواهند کرد. استفاده از تگ تصویر برای زمانی که می‌خواهید اسکرین ریدرها به محتویات تگ alt در تصاویر و لوگو وبسایت دسترسی داشته باشند بسیار مناسب است. 

تصاویر پس‌زمینه در CSS

می‌توانید از SVG در CSS نیز به عنوان پس زمینه استفاده کنید، این کار درست مانند حالت عادی انجام می‌شود:

.hero {
  background-image: url('myAwesomeSVG.svg');
}

با استفاده کردن از این حالت، شما می‌توانید از دیگر خاصیت‌های پس‌زمینه در CSS بهره‌مند شوید، برای مثال خاصیت اندازه، موقعیت، تکرار و مواردی دیگر:

background-repeat: no-repeat;
background-position: center center;
background-size: contain;

اگر نگرانی مربوط به پشتیبانی SVG را دارید، یک تکنیک بسیار ساده وجود دارد که با در نظر گرفتن آن می‌توانید آسوده باشید:

.hero {
  background-image: url('myAwesomeSVGfallback.png');
  background-image: url('myAwesomeSVG.svg');
}

Inline SVG

می‌توانید از SVG به صورت مستقل و در حالت inline نیز استفاده کنید:

<svg 
  width="100px" height="100px" 
  viewBox="0 0 100 100" version="1.1" 
  xmlns="...">
  <title>My Awesome SVG</title
  <circle class="circle" 
  cx="50" cy="50" r="50" 
  fill="#FFFF00">
  </circle>
</svg>

از آن‌جایی که SVG مقیاس‌پذیر است، اگر در این مثال‌ها ما از مقدار width و height استفاده نکنیم، اندازه آن درست به مقیاس container که در آن قرار دارد، تغییر اندازه می‌دهد. در این حالت ما می‌توانیم برخی از ویژگی‌های SVG را حذف کرده و از آن‌ها در CSS استفاده کنیم. برای مثال می‌توانیم fill را حذف کنیم و در CSS به صورت زیر به کار ببریم:

.circle {
  fill: #FFFF00;
}

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

استفاده به عنوان شئ

شما می‌توانید SVG را درون یک Object یا iframe قرار دهید، در این صورت مرورگر به خوبی آن را کش می‌کند، اما ممکن است برخی از قابلیت‌های SVG دچار مشکل شود.

منبع