Logo for Parsclick

کار با فایل SVG در قالب موتور Blade Engine لاراول

  بهروز ولیخانی بهروز ولیخانی
  October 17, 2016 at 5:20 PM
  ۲۶ مهر، ۱۳۹۵ ساعت ۱۷:۲۰

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

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


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

استفاده از سورس تصویر (Image Src)


<img src="icon.svg" alt="My SVG Icon">

تعبیه کردن SVG به شکل (Embedding an SVG)


<svg class="icon icon-lg" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M3.938 6.497a6.958 6.958 0 0 0-.702 1.694L0 9v2l3.236.809c.16.6.398 1.169.702 1.694l-1.716 2.861 1.414 1.414 2.86-1.716a6.958 6.958 0 0 0 1.695.702L9 20h2l.809-3.236a6.96 6.96 0 0 0 1.694-.702l2.861 1.716 1.414-1.414-1.716-2.86a6.958 6.958 0 0 0 .702-1.695L20 11V9l-3.236-.809a6.958 6.958 0 0 0-.702-1.694l1.716-2.861-1.414-1.414-2.86 1.716a6.958 6.958 0 0 0-1.695-.702L11 0H9l-.809 3.236a6.96 6.96 0 0 0-1.694.702L3.636 2.222 2.222 3.636l1.716 2.86zM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill-rule="evenodd">
</path>
</svg>

استفاده از تکنیک (SVG Sprite)


<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="position:absolute; display: none; visibility: hidden; width: 0; height: 0;">
<symbol id="icon-arrow-down" //..
<symbol id="icon-arrow-up" //..
// etc…
</svg>

<!— Then to referece it: —>
<svg><use xlink:href="#icon-arrow-down"></svg>

همانطور که شما می ببینید این روش ها  کاربر پسند نیست ،  به همین دلیل Adam Wathan یک پکیجی رو در این باره برای فریم ورک Laravel تهیه کرده است که تمام این کارها را با استفاده از موتور Blade template engine آسان تر کرده است .

Laravel Blade SVG Package

پکیج Blade svg دستورالعمل جدیدی را جهت استفاده از هر دو روش  inline SVG و SVG sprites ارائه کرده است :

نصب و راه اندازی پکیج :


شما می توانید این بسته را با اجرای  این دستور در ترمینال خود در ریشه یکی از پروژه خود بوسیله Composer  نصب کنید :


composer require nothingworks/blade-svg

حال پس از نصب پکیج باید به فایل config//app.php رفته و service provider های آن را اضافه کنیم :


<?php

return [
// ...
'providers' => [
// ...

BladeSvg\BladeSvgServiceProvider::class,

// ...
],
// ...
];

سپس دستور زیرا اجرا کنید :


php artisan vendor:publish --provider="BladeSvg\BladeSvgServiceProvider"

تبریک پکیج شما با موفقیت نصب گردید حال برای استفاده از این پکیج به دو صورت گفته شده به فایل config/blade-svg.php رفته و مقدار inline را بر روی True و یا False قرار دهید ، این بدین معناست که:

True : باعث ارائه کامل آیکون های درون خطی SVG inline  به طور پیش فرض میشود .

False : به sprite sheet مراجعه کرده و با استفاده از تگ use آیکون هارا رندر میکند .


return [
'inline' => true,
// True renders the full icon SVG inline by default
// False references the sprite sheet and render the icon with a `use` tag
];

همچنین پس از آن میتوانید دسترسی به دو دستورات زیر را داشته باشید :
@icon('icon-arrow-up')
{{ svg_icon('icon-arrow-up') }}

تفاوت svg_icon این است که به شما کمک میکند و اجازه میدهد تا به صورت syntax زنجیره ای روان در عملیات پیشرفته تر از آن استفاده کنید .

نمونه های مثال های استفاده از Blade svg :

به صورت درون خطی :


@icon('icon-arrow-up', ['class' => 'icon-lg'])

حالت رندر شده :


<svg class="icon icon-lg" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path d="M3.938 6.497a6.958 6.958 0 0 0-.702 1.694L0 9v2l3.236.809c.16.6.398 1.169.702 1.694l-1.716 2.861 1.414 1.414 2.86-1.716a6.958 6.958 0 0 0 1.695.702L9 20h2l.809-3.236a6.96 6.96 0 0 0 1.694-.702l2.861 1.716 1.414-1.414-1.716-2.86a6.958 6.958 0 0 0 .702-1.695L20 11V9l-3.236-.809a6.958 6.958 0 0 0-.702-1.694l1.716-2.861-1.414-1.414-2.86 1.716a6.958 6.958 0 0 0-1.695-.702L11 0H9l-.809 3.236a6.96 6.96 0 0 0-1.694.702L3.636 2.222 2.222 3.636l1.716 2.86zM10 13a3 3 0 1 0 0-6 3 3 0 0 0 0 6z" fill-rule="evenodd">
</path>
</svg>

همچنین اگر تنظیمات inline را False قرار دهید بدین شکل رندر خواهد شد :


<svg class="icon icon-lg">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-arrow-up"></use>
</svg>

لازم به ذکر است که فرقی نمیکند شما از کدام دو سبک بالا استفاده کرده اید زیرا میتوانید با استفاده از helper function های موجود بین سبک ها سوییچ کنید :


{{ svg_icon('icon-arrow-up', 'icon-lg')->sprite() }}
{{ svg_icon('icon-arrow-up', 'icon-lg')->inline() }}

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

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



منبع : www.studio-design.ir