سرور مجازی NVMe

روش ایجاد و مدیریت SVG Sprites

طراحی و توسعه نرم افزار

توسط تیم تولید محتوا آخرین بروزرسانی دی ۱۸, ۱۴۰۲

سرفصلهای مطلب

زمان لازم برای مطالعه: 4 دقیقه

روش ایجاد و مدیریت SVG Sprites

SVG وقتی صحبت از گرافیکی می شود ، برنده مسابقه می شود روی وب. طراحان و توسعه دهندگان SVG را به جای فونت های آیکون، تصاویر شطرنجی و اسپریت های شطرنجی انتخاب می کنند. مزایای استفاده از SVG بسیار زیاد است، اما به نظر من، این به مقیاس پذیری خلاصه می شود. استفاده از SVG می تواند به سادگی کپی و چسباندن کد صادر شده از یک برنامه مبتنی بر برداری باشد. از آنجا مشکل در ارائه آن گرافیک ها به کارآمدترین شکل است. SVG sprites را وارد کنید. اینها با الگوی مشابهی کار می کنند که اسپرایت های تصویر چگونه ایجاد و گنجانده می شوند روی یک وب page بسیار متفاوت است

اصلا چرا از Sprites استفاده کنیم؟

Sprites به افزایش سرعت ، حفظ یک گردش کار توسعه مداوم کمک می کند و ایجاد آیکون ها را بسیار سریعتر می کند. Sprites SVG به طور معمول با استفاده از نمادهایی با شکل یا فرم مشابه ایجاد می شود در حالی که گرافیک های در مقیاس بزرگتر برنامه های یک طرفه هستند. در بسیاری از موارد ، یک کتابخانه نماد از نظر اندازه مقیاس خواهد داشت. افزودن نمادهای جدید باید کارآمد و در نهایت آسان باشد. SVG sprites به تحقق این امر کمک می کند.

در حال صادر کردن کد SVG

SVG ها را می توان از برنامه گرافیکی وکتور مورد علاقه شما صادر کرد. من تمایل دارم از ترکیبی از ابزارها استفاده کنم و متوجه شده ام که همه آنها پشتیبانی خوبی برای صادرات SVG دارند. طرح به طور خاص خودنمایی می کند زیرا می توانید یک نماد یا گرافیک را انتخاب کنید و ضربه بزنید فرمان + ج و کد SVG را در کلیپ بورد خود کپی کنید. سپس می توانید به ویرایشگر کد خود بروید ، کد را بچسبانید و گرافیک را قبل از چشمان خود در مرورگر ظاهر کنید.

بهینه سازی SVG برای وب

متأسفانه، اگر بخواهید از Sketch کپی و جایگذاری کنید، ممکن است متوجه شوید که کد کمتر از حد مطلوب است و می تواند بهتر بهینه شود. ابزارهایی برای آن وجود دارد. اگر به طور خاص از Sketch استفاده می کنید، آن را بررسی کنید پلاگین SVGO Compressor. مثل تو export SVGS این افزونه به طور خودکار قبل از ذخیره پرونده آنها را بهینه می کند. اگر از Sketch استفاده نمی کنید، همین عملکرد را در اینجا بررسی کنید فرم برنامه یا اگر برنامه های وب را ترجیح می دهید، جیک آرچیبالد یکی را برای شما جمع آوری کنید.

ایجاد SVG Sprites به صورت دستی

ایجاد SVG sprite را می توان به صورت دستی انجام داد. شما به یک برنامه طراحی برداری نیاز دارید که بتواند کد SVG تولید کند. برای این کار از Sketch و استفاده خواهم کرد export چند آیکون به عنوان SVG.

پس از صادرات آیکون ها و اجرای آنها از طریق پلاگین SVGO Compressor، برای هر آیکون موارد زیر باقی می ماند. توجه داشته باشید که در این مرحله هر نماد یک فایل جداگانه است:

<!-- aircraft.svg -->
<svg xmlns="https://www.w3.org/2000/svg" width="62" height="51" viewBox="0 0 62 51">
 <path fill="#000000" d="M38.9872..."></path>
</svg>

<!-- attachment.svg -->
<svg xmlns="https://www.w3.org/2000/svg" width="60" height="64" viewBox="0 0 60 64">
 <path fill="#000000" d="M15.9264..."></path>
</svg>

<!--brush.svg-->
<svg xmlns="https://www.w3.org/2000/svg" width="62" height="62" viewBox="0 0 62 62">
 <path fill="#000000" d="M7.8416..."></path>
</svg>

<!--camera.svg-->
<svg xmlns="https://www.w3.org/2000/svg" width="64" height="52" viewBox="0 0 64 52">
 <path fill="#000000" d="M32,19.2 ..."</path>
</svg>

اکنون که SVG های ما همه بهینه شده اند، می توانیم با استفاده از کد بالا شروع به ایجاد sprite کنیم. برای ایجاد یک جن از اطراف شروع کنید عنصری که به عنوان یک container برای تمام نمادها این عنصر باید مانند کد زیر در سند شما باشد:

<!DOCTYPE html>
<head>
 <title>SVG Sprites</title>
</head>
<svg style="display:none;">
 <!-- icons will go here -->
</svg> 
</html>

توجه کنید که چگونه SVG دارای سبک درون خطی است نمایش: هیچ. این برای استفاده صحیح از SVG sprites لازم است. حتی اگر نمادها ارائه نمی شوند روی را page مقدار زیادی از فضا خواهد شد. برای جلوگیری از این فضای اضافی که SVG ایجاد می کند، SVG را با CSS مخفی می کنیم. در این مرحله تنها گنجاندن کد از نمادها کافی نیست. ما باید از a استفاده کنیم عنصری که به شما امکان می دهد کد SVG را جاسازی کنید و همچنین کدهای خاص خود را تهیه کنید جعبه نمایش ویژگی که برای نمادهایی که ممکن است در عرض و ارتفاع متفاوت نمایش داده شوند مهم است. عناصر تعریف شده در داخل عنصر تنها زمانی می تواند به مرورگر ارائه شود که توسط آن ارجاع داده شود <استفاده> عنصر اسپرایت نهایی شبیه قطعه زیر است:

<!DOCTYPE html>
<head>
 <title>SVG Sprites</title>
</head>
<svg style="display:none;">
 <symbol id="aircraft" viewBox="0 0 62 51">
 <path fill="#000000" d="M38.9872..."></path>
 </symbol>
 <symbol id="attachment" viewBox="0 0 60 64">
 <path fill="#000000" d="M15.9264..."></path>
 </symbol>
 <symbol id="brush" viewBox="0 0 62 62">
 <path fill="#000000" d="M7.8416..."></path>
 </symbol>
 <symbol id="camera" viewBox="0 0 64 52">
 <path fill="#000000" d="M32,19.2 ..."</path>
 </symbol>
</svg> 
</html>

توجه کنید که چگونه اضافه کرده ام شناسه ویژگی های هر عنصر نماد این مهم است زیرا هنگامی که به یک نماد خاص در sprite اشاره می کنید، به یک راه منحصر به فرد برای هدف قرار دادن آن نیاز دارید. همچنین، توجه کنید که چگونه هر نماد منحصر به فرد خود را دارد جعبه نمایش مولفه های. دو پارامتر اول تقریباً همیشه “0 0” خواهند بود. دو مورد دوم برابر با اندازه نمادی است که شما صادر کرده اید.

از جمله یک نماد روی را page

در حالی که sprite همه آماده است، ما به راهی برای گنجاندن نمادهای خاص نیاز داریم روی آ page. برای انجام این کار شما از <استفاده> عنصر نوشته شده به این صورت:

<svg>
 <use xlink:href="#aircraft"></use>
 <svg>

روی شما page، باید ببینید که نماد ظاهر می شود و این واقعاً تمام چیزی است که برای آن وجود دارد!

خودکارسازی SVG Sprites

ایجاد SVG درون خطی اسپرایت آنقدرها هم سخت نیست. مشکل در این واقعیت نهفته است که بسیاری از توسعه دهندگان نیاز به ایجاد sprite برای صدها نماد یا بیشتر برای برنامه های کاربردی قوی دارند. ایجاد چنین چیزی با دست می تواند زمان بر و خسته کننده باشد. توسعه دهندگان به راهی برای خودکارسازی نیاز دارند process بنابراین آنها وقت خود را برای ایجاد اسپریت با دست تلف نمی کنند. خوشبختانه ابزارهایی برای چنین چیزی وجود دارد. مدیران وظایف مانند غرغر کردن یا گلپ پلاگین هایی برای استفاده در دسترس داشته باشید. اینها ایجاد SVG sprites را ساده می کند. با ارائه هر فایل SVG در یک دایرکتوری معین، افزونه همه SVG های موجود در فهرست مرجع شما را بهینه می کند و تولید می کند تا در یک sprite جدید گنجانده شود. اگر نیاز به اضافه کردن نمادهای بیشتری به sprite دارید، تنها کاری که باید انجام دهید این است export نماد را به عنوان یک SVG و آن را به همان پوشه اضافه کنید. از آنجا افزونه بخش وقت گیر را مدیریت می کند. برخی از پلاگین های موجود در طعم های مختلف: grunt-svgstore، gulp-svg-sprites، svg-sprite.

نتیجه

مانند همه چیز در توسعه وب، بیش از یک راه برای ایجاد SVG sprites وجود دارد. شما می توانید آنها را به صورت خارجی ارجاع دهید، آنها را از طریق CSS وارد کنیدو حتی آنها را بسازید پاسخگو.

(تگ‌ها برای ترجمه )export

منتشر شده در 1403-01-09 02:14:02

منبع نوشتار

امتیاز شما به این مطلب