تصویر نویسنده

۲۵ شهریور ۱۳۹۹

0

چگونه کد SVG را با استفاده از اشکال پایه ساده کنیم

آموزش

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


بیشتر بخوانید: “فاوآیکن های SVG و همه کارهای جالبی که می توانیم با آنها انجام دهیم


تصاویر SVG به این دلیل که با استفاده از کد “کشیده شده” اند، آن ها را در هر زمینه ای انعطاف پذیر، سازگار و مقیاس پذیر می کند.

اما هنگام کار با SVG، همیشه این احتمال وجود دارد که کدهای غیرضروری زیادی داشته باشد. در بعضی موارد، کد SVG درون خطی می تواند زیاد باشد که باعث می شود نتیجه طولانی تر شود، کار با آن راحت نباشد و بله، کمی سنگین تر از مقدار لازم باشد.

می توانیم با استفاده از عنصر <use> در مورد این تکه های استفاده مجدد کد کار کنیم یا متغیرهای محلی را برای مدیریت سبک های SVG خود از یک مکان اعمال کنیم.

یا اگر در یک محیط سمت سرور کار می کنیم، همیشه می توانیم با اندکی PHP (یا موارد مشابه) محتوای فایل SVG را به جای استفاده مستقیم آن، استخراج کنیم.

همه این ها خوب است، اما اگر ما بتوانیم به جای استفاده از رویکردهای مبتنی بر کد، این مسئله را در سطح فایل حل کنیم، عالی نخواهد بود؟

من می خواهم روی دیدگاه دیگری متمرکز شوم: چگونه می توان با استفاده از اشکال پایه همان شکل ها را با کد کمتر ساخت؟؟

به این ترتیب، ما می توانیم مزایای آیکون های کوچکتر، قابل کنترل و معنا دار را در پروژه های خود، بدون اینکه تغییرات کیفی یا بصری را تحمیل کنیم، داشته باشیم.

من مثال های مختلفی را مرور می کنم که کد آیکون های متداول و اینکه چگونه می توانیم آنها را با استفاده از ساده ترین اشکال SVG که می توانیم دوباره طراحی کنیم را بررسی می کنیم.

ابن هم آیکون هایی که روی آنها کار خواهیم کرد:

آیکون بستن،ساعت و پاکت نامه

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

ساده کردن آیکون close با عنصر <line>

این کد آیکون “close” یا “cross” است که از flaticon.com دانلود و توسط pixel-perfect ساخته شده است:

See the Pen Cross icon by Pixel Perfect by Mariana (@marianab) on CodePen.

در این مثال، همه چیز در داخل <path> با تعداد زیادی دستور و پارامتر در ویژگی داده (d) در حال رخ دادن است. کاری که این SVG انجام می دهد، ردیابی شکل از مرزهای خود است.

نمایش ایجاد آیکون بستن
یک نمایش سریع با استفاده از mavo.io

اگر با Illustrator آشنا هستید، این معادل رسم دو خط جداگانه، تبدیل آنها به شکل و سپس ترکیب هر دو با pathfinder برای ایجاد یک شکل مرکب است.

ایجاد آیکون X در ایلوستریتور

عنصر <path> به ما امکان می دهد اشکال پیچیده ای ترسیم کنیم، اما در این مورد، با حفظ ظاهر می توان با دو خط همان شکل را ایجاد کرد:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" width="50" height="50" overflow="visible" stroke="black" stroke-width="10" stroke-linecap="round">
   <line x1="0" y1="0" x2="50" y2="50" />
   <line x1="50" y1="0" x2="0" y2="50" />
</svg>

ما با تعریف یک ViewBox شروع می کنیم که از ۰،۰ به ۵۰،۵۰ می رسد. شما می توانید هر ابعادی را که ترجیح می دهید انتخاب کنید.

SVG همیشه به هر ارتفاع و عرضی که تعریف می کنید به خوبی تبدیل می شود. برای سهولت کار، در این مورد نیز، ارتفاع و عرض خطی ۵۰ واحد را تعریف کردم که از محاسبات اضافی در طراحی جلوگیری می کند.

برای استفاده از عنصر <line>، مختصات نقطه اول خط و مختصات آخرین نقطه آن را اعلام می کنیم. در این حالت خاص ، ما از x=0 , y=0 شروع کردیم و در x=50 , y=50 خاتمه دادیم.

آیکون X

این چیزی است که در کد مشاهده می شود:

<line x1="0" y1="0" x2="50" y2="50" />

خط دوم از x=50 , y=0 شروع می شود و در x=0 , y=50 پایان می یابد:

<line x1="50" y1="0" x2="0" y2="50" />

یک خط SVG به طور پیش فرض رنگ ندارد – به همین دلیل ما مقدار black را به ویژگی خط اضافه کردیم.

ما همچنین به ویژگی stroke-width عرض ۱۰ واحد و برای stroke-linecap یک مقدار round دادیم تا گوشه های گرد طرح اصلی را تکرار کند.

این ویژگی ها مستقیماً به تگ <svg> اضافه شدند بنابراین هر دو خط آنها شامل می شوند.

<svg ... stroke="black" stroke-width="10" stroke-linecap="round" ...>

اکنون که خط ۱۰ واحد بزرگتر از اندازه پیش فرض آن که ۱ واحد است، می باشد، خط ممکن است توسط ViewBox بریده شود. ما می توانیم نقاط را ۱۰ واحد به داخل viewBox جا به جا کنیم یا overflow=visible را به طراحی ها اضافه کنیم.

مقادیر برابر با ۰ را می توان حذف کرد، زیرا ۰ پیش فرض است. این بدان معنی است که دو خط با کد بسیار کوچک باقی می مانند:

<line x2="50" y2="50" />
<line x1="50" y2="50" />

فقط با تغییر <path> به <line>، نه تنها یک فایل SVG کوچکتر ساختیم، بلکه یک کد معنادار تر و قابل کنترل تر داریم که اصلاح در آینده را بسیار ساده تر می کند. و نتیجه بصری دقیقاً همان نتیجه اصلی است.

See the Pen Cross icon with basic shapes by Mariana (@marianab) on CodePen.

همان ضربدر، کد متفاوت.

ساده کردن آیکون ساعت با عناصر <circle> و <path>

من این مثال از آیکون ساعت ایجاد شده توسط barracuda را از The Noun Project گرفتم:

See the Pen Clock icon from Noun Project by Mariana (@marianab) on CodePen.

این شکل نیز با <path> ترسیم شده است، اما تعداد زیادی فضای نام و دستورالعمل XML مربوط به نرم افزار مورد استفاده و لایسنس فایل داریم که می توانیم آنها را بدون تأثیر بر SVG حذف کنیم.

آیا می توانید بگویید از چه ویرایشگر تصویرگری برای ایجاد آیکون استفاده شده است؟

بیایید با استفاده از یک دایره و یک مسیر با دستورات ساده تر، این مورد را از ابتدا بسازیم. باز هم، باید با یک viewBox شروع کنیم، این بار از ۰,۰ تا ۱۰۰,۱۰۰ و با عرض و ارتفاع مطابق با آن واحدها.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="100" height="100" fill="none" stroke="black" stroke-width="10" stroke-linecap="round" stroke-linejoin="round">
  <circle cx="50" cy="50" r="40"/>
  <path d="M50 25V50 H75" /> 
</svg>

ما همان سبک های آیکون قبلی را درون تگ <svg> نگه می داریم. fill به طور پیش فرض سیاه است، بنابراین برای حذف آن باید صریحاً به آن یک مقدار بدهیم. در غیر این صورت، دایره پر از رنگ سیاه می شود و سایر اشکال را پنهان می کند.

برای رسم <circle> باید یک نقطه مرکزی را به عنوان جایی که شعاع قرار خواهد گرفت، نشان دهیم.

ما می توانیم با cx (مرکز x) و cy (مرکز y) به این هدف برسیم. سپس r (شعاع) نشان می دهد که دایره ما چقدر بزرگ خواهد بود.

در این مثال، شعاع کمی کوچکتر از viewBox است، بنابراین وقتی عرض ۱۰ واحد باشد، برش داده نمی شود.

ما می توانیم از <path> برای عقربه های ساعت استفاده کنیم زیرا دستورات بسیار مفید و ساده ای برای ترسیم دارد.

در داخل d (داده) باید با دستور M (انتقال به) همراه با مختصاتی که از آنجا شروع به ترسیم می کنیم، شروع کنیم که در این مثال ۵۰،۲۵ است (نزدیک مرکز بالایی دایره).

پس از دستور V (عمودی)، فقط به یک مقدار احتیاج داریم زیرا فقط با یک عدد منفی یا مثبت می توانیم به سمت بالا یا پایین حرکت کنیم. یک عدد مثبت به پایین خواهد رفت.

همین امر برای H (افقی) و به دنبال آن یک عدد مثبت، ۷۵، است که به سمت راست کشیده می شود. همه دستورات با حروف بزرگ هستند بنابراین اعدادی که انتخاب می کنیم نقاط شبکه خواهند بود.

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

See the Pen Clock icon with Basic Shapes by Mariana (@marianab) on CodePen.

همان ساعت، کد متفاوت.

ساده کردن آیکون پاکت نامه با عناصر <rect> و <polyline>

من آیکون پاکت را در Illustrator بدون گسترش اشکال اصلی ترسیم کردم. این کد خروجی می باشد:

See the Pen Envelope SVG Icon by Geoff Graham (@geoffgraham) on CodePen.


توجه: Illustrator چند گزینه SVG را برای خروجی گرفتن از گرافیک ارائه می دهد. من “Style Elements” را در لیست کشویی “CSS Properties” انتخاب کردم تا بتوانم یک تگ <style> داشته باشم که شامل کلاسهایی باشد که ممکن است بخواهم آنها را به یک فایل CSS منتقل کنم. البته روشهای مختلفی برای اعمال استایل ها در SVG وجود دارد.

ما در حال حاضر اشکال پایه را در این کد داریم! من گزینه “Shape to paths” را در Illustrator لغو انتخاب کردم که در آنجا کمک بسیاری کرد.

برای حذف نظرات، دستورالعمل های XML و داده های غیرضروری، مانند عناصر خالی، می توانیم این مورد را با SVGOMG بیشتر بهینه کنیم. در صورت نیاز، می توانیم سایر موارد اضافی را به صورت دستی حذف کنیم.

ما در حال حاضر چیزی مختصر تر داریم:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 310 190" xml:space="preserve">
  <style>.st0{fill:none;stroke:#000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
  </style><rect x="5" y="5" class="st0" width="300" height="180"/>
  <polyline class="st0" points="5 5 155 110 305 5"/>
</svg>

ما می توانیم حتی چیزهای بیشتری را بدون تأثیر بر ظاهر بصری پاکت پاک کنیم، از جمله:

  • version=”1.1″ (منسوخ شده است)
  • id=”Layer_1″ (معنی یا کاربردی ندارد)
  • x=”0″ (یک مقدار پیش فرض است)
  • y=”0″ (یک مقدار پیش فرض است)
  • xml:space=”preserve” (منسوخ شده است)
<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 310 190">
  <style>.st0{fill:none;stroke:#000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10}
  </style>
  <rect x="5" y="5" class="st0" width="300" height="180"/>
  <polyline class="st0" points="5 5 155 110 305 5"/>
</svg>

اگر بخواهیم واقعاً پشتکار نشان دهیم، می توانیم استایلهای CSS را به یک صفحه سبک جداگانه منتقل کنیم.

<rect> به یک نقطه شروع از جایی که عرض و ارتفاع را گسترش می دهیم نیاز دارد، بنابراین بیایید از  x=”5” و y=”5” استفاده کنیم که نقطه بالا سمت چپ ما است.

از آنجا، ما یک مستطیل ایجاد می کنیم که عرض آن ۳۰۰ واحد و ارتفاع ۱۸۰ واحد است. دقیقاً مانند آیکون ساعت، از ۵,۵ به عنوان نقطه شروع استفاده خواهیم کرد زیرا یک حرکت ۱۰ واحدی داریم که اگر مختصات در ۰,۰ قرار بگیرند، برش داده می شود.

<polyline> مشابه <line> است، اما با مقدار نامحدودی از نقاط که ما تعریف می کنیم، مانند جفت مختصات، یکی پس از دیگری، در داخل ویژگی نقاط، جایی که اولین عدد در جفت نشان دهنده x و دومی y باشد.

خواندن توالی با ویرگول راحت تر است اما می توان آن ها را با فضای خالی جایگزین کرد بدون اینکه روی نتیجه تأثیر بگذارد.

See the Pen SVG Envelope Icon (Optimized) by Geoff Graham (@geoffgraham) on CodePen.

همان پاکت نامه، کد متفاوت.

اشکال جایزه!

من نمونه هایی از آیکون هایی را که با اشکال <polygon> و <ellipse> ساده شوند، قرار ندادم، اما اینجا یک روش سریع برای استفاده از آنها را می گویم.

<polygon> مثل <polyline> است، با یان تفاوت که این عنصر همیشه یک شکل بسته را تعریف می کند. در اینجا مثالی مستقیماً از MDN آمده است:

See the Pen Simple SVG Polygon (MDN) by Geoff Graham (@geoffgraham) on CodePen.

دایره ای را که قبلاً برای نماد ساعت رسم کردیم به خاطر می آورید؟ r (شعاع) را با rx و ry جایگزین کنید. اکنون شما دو مقدار متفاوت برای شعاع دارید. در اینجا یک مثال دیگر از MDN آورده شده است:

See the Pen Simple ellipse (MDN) by Geoff Graham (@geoffgraham) on CodePen.

جمع بندی

در مدت زمان کوتاهی موارد زیادی را پوشش دادیم! در حالی که ما از مثال برای نشان دادن روند بهینه سازی SVG ها استفاده کردیم، این ها چیز هایی که امیدوارم از این پست آموخته باشید:

  • به یاد داشته باشید که فشرده سازی با نحوه ترسیم SVG در نرم افزار illustration شروع می شود.
  • برای فشرده سازی SVG از ابزارهای موجود مانند SVOMG استفاده کنید.
  • در صورت لزوم، داده های غیرضروری را به صورت دستی حذف کنید.
  • مسیرهای پیچیده را با اشکال پایه جایگزین کنید.
  • <use> یک روش عالی برای “درون خطی کردن” SVG و همچنین ایجاد کتابخانه آیکون های قابل استفاده مجدد است.

منبع : css-tricks

۰ ۰ vote
Article Rating