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

ترجمه و تالیف : ارسطو عباسی
تاریخ انتشار : 13 خرداد 98
خواندن در 1 دقیقه
دسته بندی ها : طراحی وب

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

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

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

تگ تصویر

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

<img class='lozad' data-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 دچار مشکل شود.

منبع

گردآوری و تالیف ارسطو عباسی
آفلاین
user-avatar

من ارسطو‌ام :) کافی نیست؟! :)

دیدگاه‌ها و پرسش‌ها

برای ارسال نظر لازم است ابتدا وارد سایت شوید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید