نحوه استفاده از svg در طراحی سایت

امروزه تصاویر در طراحی سایت با فرمت‌های مختلفی استفاده می‌شوند . شناخته شده‌ترین فرمت‌های تصاویر جهت استفاده در طراحی سایت ، فرمت‌های png و jpg هستند که هنوزهم این دو فرمت بخوبی جای خود را حفظ کرده و مورد استفاده قرار می‌گیرند . در حال حاضر فرمت های دیگری نیز چندین سال است که در دنیای طراحی سایت رواج پیدا کرده و به کار می‌روند . ازجمله این فرمت‌ها ، svg و webp و avif هستند . فرمت webp یکی از بهترین فرمت‌ها برای تصاویر است که هم کیفیت بسیار بالایی را ارائه می‌دهد و کنار آن ، حجم متناسب را نیز حفظ می‌کند . همچنین امکان متحرک سازی تصاویر در فرمت webp نیز وجود دارد .

این فرمت توسط جدیدترین نسخه مرورگرها پشتیبانی می‌شود اما به این دلیل که هنوز نسخه‌های پشتیبانی شده در مرورگرها ، توسط اکثریت کاربران بروز نشده است ، لذا استفاده از این فرمت بصورت همگانی ، هنوز کمی زمان نیاز خواهد داشت . این فرمت برای تصاویری که فرمت png و jpg دارند کاملا قابل جایگزین شدن است و می‌توانیم برای تصویر محصولات ، تصویر اسلایدر ، بنر سایت و … از این فرمت بسادگی استفاده کنیم .

اما داستان svg  چیست ؟

svg یکی از فرمت‌هایی است که در اکثر موارد برای آیکون ها و یا تصاویر با اندازه کوچک استفاده می‌شود اما مسلم است که برای تصاویر با اندازه بزرگ نیز می‌توان از آن استفاده کرد . svg خاصیت جذابی دارد و آن هم اینکه بصورت پیکسلی نیست . منظور از اینکه بصورت پیکسلی نیست چه می‌باشد ؟

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

در تصاویر با فرمت svg دیگر خبری از پیکسل نیست و عنصر سازنده این تصاویر Vector است . اگر یک تعریف از وکتور داشته باشیم می‌توان گفت :

تصاویر svg نیز براساس وکتور یا همان خط ساخته شده است و هرخط در هرنقطه از تصویر ، مختصات خاص خود را دارد . شما می‌توانید تصاویر و آیکون‌های زیبایی را توسط svg در سایت خود استفاده کنید . svg برپایه وکتور ساخته می‌شود اما روش ساخت آن بر پایه XML است . XML هم برای انسان و هم برای سیستم قابل درک است لذا هیچ مشکلی در استفاده از آن وجود ندارد . این یک پیش زمینه از تصاویر svg بود که در یک مقاله کامل‌تر به صفرتاصد داستان وکتور و همچنین svg خواهیم پرداخت . اما اکنون فرض می‌کنیم که شما یک تصویر یا بهتر است بگوئیم یک آیکون با فرمت svg را دانلود کرده و قصد دارید تا در پروژه طراحی سایت خودتان از آن استفاده کنید . زمانی که شما یک آیکون با فرمت اس وی جی دانلود کنید ، فایل شما بصورت زیر خواهد بود :

image.svg

فرمت آیکون شما svg است و اکنون تصمیم داریم تا از این آیکون در سایت خودمان استفاده کنیم !

روش اول استفاده از svg

ساده ترین روش برای استفاده از تصویر svg این است که آن را داخل یک تگ img دقیقا همانند سایر تصاویر با فرمت png و jpg و … آدرس دهی کنید . برای مثال به نمونه زیر دقت کنید :

<img src="img/image.svg" alt="">

به این ترتیب شما تصویر اس وی جی خود را در داخل پروژه مشاهده خواهید کرد . می‌توانید توسط دستورات CSS بسادگی برای این تصویر عرض و ارتفاع و … تنظیم نموده و آن را در محل دلخواه نمایش دهید . اگر قصد دارید تا از تصاویر اس وی جی برای آیکون ها استفاده کنید ، سعی کنید تا اندازه‌های کوچکتر که معمولا 64*64 پیکسل هستند را استفاده کنید . البته که مجموع حجم چندصد فایل اس وی جی برای آیکون‌های سایت شاید 10 کیلو بایت هم نباشد . اما در ادامه روش دوم استفاده از اس وی جی را یاد بگیریم .

روش دوم استفاده از svg

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

<svg width="86" height="57" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="m4.771 30.834-.406 8.188a3.462 3.462 0 0 1-3.328-3.417C.749 31.52.414 27.346.933 23.32c.572-4.444 3.082-5.393 7.006-3.267 3.485 1.906 6.92 3.92 10.355 5.943 1.06.629 2.394 1.163 1.778 3.092-2.551.728-4.458-1.147-6.562-1.998-2.103-.851-4.293-2.01-7.171-3.365C7.095 25.611 7.46 26.763 8 27.83c5.19 10.21 12.634 18.138 23.309 22.709a29.014 29.014 0 0 0 15.36 2.398c7.947-1.04 12.34-4.969 13.918-12.751.663-3.268.55-6.694.793-10.128-1.858-.246-3.102-.392-4.347-.574-6.055-.867-9.55-4.634-11.285-10.234-.694-2.224-.895-4.602 1.198-6.284 2.093-1.683 4.308-1.313 6.483-.42 3.276 1.345 5.573 3.901 7.409 6.823 1.2 1.902 2.128 3.978 3.262 6.12 2.382.277 4.27-1.116 6.145-2.27 4.781-2.964 7.707-7.476 9.876-12.518C81.62 7.235 82.995 3.72 84.506.023c1.576 2.459 1.55 3.505-2.362 11.86a37.056 37.056 0 0 1-6.575 10.21c-2.885 2.978-6.804 4.945-11.002 7.858.045 1.771.306 4.422.177 7.084-.738 11.925-7.932 19.033-19.82 19.817-7.818.505-14.89-1.728-21.467-5.736A44.23 44.23 0 0 1 7.498 34.31l-2.005-3.68-.722.204Zm54.968-4.802c-1.945-6.915-6.173-10.902-10.624-9.993.172 6.534 4.463 10.564 10.623 9.993Z" fill="#494949"/>
</svg>

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

روش سوم ، background-image

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

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

به همین سادگی می‌توانید بصورت url نیز داخل دستور background-image از تصاویر SVG استفاده کنید .

روش چهارم داخل تگ Picture

تگ Picture نیز ازجمله تگ‌هایی است که تنها در شرایط خاصی از آن استفاده می‌کنیم اما به اندازه تگ img در طراحی سایت شاید کاربرد ندارد و درمحل خاص خود باید از آن استفاده کرد . به مثال زیر دقت کنید :

<picture>
  <source type="image/svg+xml" srcset="image.svg">
  <img src="image.png" alt="">
</picture>

استفاده از SVG در داخل این تگ شرایط و ملاحضات خاص خود را دارد و همانطور که مشاهده می‌کنید یک صفت بنام srcset نیز در داخل تگ source وجود دارد . لذا احتمال استفاده از این حالت بسیار کم است اما با این وجود اگر قصد داشتید تا از SVG در داخل این تگ استفاده کنید ، سینتکس صحیح را در بالا خدمتتان ارائه کردیم .

روش پنجم استفاده از تگ object

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

<object type="image/svg+xml" data="image.svg"></object>

سینتکس دقیق استفاده از اس وی جی در داخل تگ object نیز به ترتیب بالا خواهد بود . روش‌های دیگری نیز همچون آدرس دهی داخل تگ iframe و همچنین تگ embed نیز وجود دارد که ازجمله بهترین روش‌ها نیستند . درحالت کلی دو روش اول که خدمتتان معرفی شده است بهینه‌ترین حالت‌ها برای به کار بردن صحیح و نمایش درست SVG داخل سایت هستند . موفق باشید .