اون عددهای تو path svg چیکار میکنن؟ قدم به قدم

تا حالا فک کردین که اون عددها و حروفی که روی یه path از svg نوشته میشن چیکار میکنن؟ یا تا حالا یه svg ساختین که ببینید چطوری یه path تولید میشه؟ البته کاری با بقیه المان‌ها مثل rect ، line و ... نداریم و بحث‌مون بیشتر روی همین تگ path می‌چرخه، اگه دوست دارین سردربیارین ازش با من همراه باشین.

کد بالا یه svg از پک feather icons هستش، این ایکون یه path داره که روش یه attribute به اسم d خورده که مخفف data هستش. البته اینا توضیح کلی هستن و چیزی که مهمه مقداری هست که روی این attribute قرار گرفته. این مقدار رو اینجا میزارم دقیق‌تر ببینیمش:

M14.3320h-.21a22001-1.76-1.58L9.686l-2.766.4A11001613H3a110010-2h2.34l2.51-5.79a220013.79.38L14.3218l2.76-6.38A110011811h3a1100102h-2.34l-2.515.79A2200114.3320z

چیزی ازش فهمیدین؟ :)) همین کد باعث رندر شدن وکتور پایین میشه، یعنی در کل هرچیزی که وکتور باشه و رستر نباشه معیار ترسیم شدنش محاسبات ریاضیه که حالا توی چند پاراگراف بعدی می‌بینید که چقدر ساده هستن این اعداد و میشه درکشون کرد. (برای تفاوت وکتور و raster یه سرچ کوچولو کنین).

خب هدف اینه که بتونیم متوجه بشیم مقدار define چی میگه بهمون. البته حالا نه در اون حد که خودمون بیاییم دستی همچین چیزی بنویسیم، ولی یه کم متوجه بشیم که شاید بعدا یه سری برنامه‌هایی نوشتیم که یه کار ساده‌ای رو با svg انجام بده برامون. (چون این مقدار رو میشه animate کرد یا حتی با تکنیک morphing که باز می‌تونید یه سرچ کوچولو کنید میشه کارهای جالبی انجام داد).

بزارین یه کم راهنمایی کنم و کد بالا رو توی چند سطر از هم جدا کنم:

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

1. خط اول که با M شروع میشه خلاصه شده moveTo هست، میگه یه قلم بردار و برو به { x: 14.33, y: 20 } چون میخوام از اونجا شروع کنم یه چیزی بکشم. همیشه هم بعدش دو تا مقدار قرار میگیره و توی همه ‌‌svgها هم اول باید نقطه شروع طراحی رو مشخص کنیم. تو svg فعلی‌مون می‌تونین حدس بزنین کجا میشه؟ اون انحنای پایین، توی عکس زیر هم نشونش میدم:

۲. خط دوم دستور h رو داره که یه مقدار میگیره و برای جابجایی position استفاده میشه، میگه از محل فعلی -۰.۲۱ به چپ برو. (زیاد مهم نیست فعلا)

۳. خط سوم (`a 2,2 0 0 1 -1.76,-1.58`) دستور a رو داره که مخفف arc هست و برای کشیدن یه قوس به کار میره، مقادیر این دستور خیلی زیادن ولی باعث کشیده شدن لبه کناری اون بخش پایین میشن، یعنی اینجا:

خلاصه مقادیرش رو هم بخوام بگم، اولین مقادیر یعنی 2,2 مشخص کننده شعاع قوس هستن، مقادیر 0 0 1 میان میگن که خب اگه ما تو یه دایره ۴ تا قوس داریم و داریم به سمت مثبت درجه‌ها حرکت می‌کنیم، بیا یکی مونده به آخر که میشه همونی که نرسیده به ۱۸۰ درجه ساختی رو بردار و مقادیر -1.76,-1.58 این دوتا مقدار قوسی که کشیده شده رو جابجا میکنن به مرکزیتی که برسن توی اون مرکز طرح و بتونن اون گوشه رو بسازن، این گوشه رو میگم:

۴. خط چهارم، `L 9.68,6` میشه گفت ساده‌ست، L مخفف Line هست که میگه یه خط به نقطه { x: 9.68, y: 6 } بکش و این خط رسم میشه:

۵. مقدار خط پنجم(`l -2.76,6.4`) خیلی شبیه به خط چهارمه، ولی چرا اینجا `l` با حروف کوچیک نوشته شده؟ یه نکته‌ای رو اینجا میگم چون یه قانونه کلی هستش.

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

پس اینجا میخواییم یه خطی بکشیم که از نقطه فعلی -2.76 چپ‌تر و 6.4 پایین‌تره. یعنی این خط تولید میشه:

۶. خط ششم، `A 1,1 0 0 1 6,13` یه قوس داریم مثل خط سومه ولی با حرف کوچیک شروع شده پس مختصات قطعی هستن و با نقطه فعلی سنجیده نمیشن. شعاع نصف قوس خط سومه و بقیه مختصات شبیه به همونن.

۷. خط هفتم، `H 3` چون یه خط به شکل افقی داریم و جابجایی عمودی نداریم بجای لاین می‌تونیم بگیم horizontally برو به نقطه ۳. توی نقطه مقابلش V و v رو هم داریم که عمودی یا verticaly کار می‌کنن. ولی این خط از کد باعث ترسیم این بخش میشه:

۸. خط هشتم، `a 1,1 0 0 1 0,-2` یه قوس هست که قبلا توضیح دادیم. این بخش رو می‌کشه:

۹. خط نهم، `h 2.34` مثل خط هفتم ولی به شکل وابسته به نقطه فعلی هستش و این خط رو می‌کشه:

۱۰. خط دهم، `l 2.51,-5.79` یه خط ساده به بخش بالایی.

۱۱ تا ۱۹. این خط‌ها هم شبیه همون بالایی‌ها هستن و توضیحی لازم ندارن فک کنم، فقط وظیفه هر کدوم رو به تصویر نشون میدم:

خب تا اینجا فک کنم با کلی عملگر برای ترسیم توی path آشنا شدین، فقط می‌مونه‌ آخرین خط که z هست و میگه که کارمون تموم شده و شکلی که کشیدیم کامل میشه، حالا میشه توی این شکل رو با fill پر کرد یا با stroke خط دورشو از لحاظ رنگ و قطر کنترل کرد.

نتیجه گیری

من مثال تقریبا سختی رو برای توضیح انتخاب کردم ولی خوبیش اینه که یهو پریدیم توی داستان :))، اشکال خیییلی ساده‌تری رو هم میشه ترسیم کرد.

• مثل یه خط ساده:

M2,2 L8,8

• مثل یه فلش:

M2,8 L5,2 L8,8

و یه سری چیزای دیگه. چند تا عملگرها رو هم نگفتیم مثل q , c , s , t  که اینا هم از همون خانواده arc ها تقریبا حساب میشن ولی با یه سری تفاوت. اگه علاقه مند بودین مطالب خوبی توی نت هست. مثلا این pen خیلی خوب این موارد باقی‌مونده رو پوشش داده. منم یه سری منبع معرفی میکنم که برای نگارش همین متن هم ازشون استفاده کردم.

https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#:~:text=The%20element%20is%20the,created%20as%20s.

https://www.w3.org/TR/SVG/paths.html

https://svg-path-visualizer.netlify.app/

https://css-tricks.com/svg-path-syntax-illustrated-guide/

یه نکته پایانی هم اینکه، چیزی که یاد می‌گیریم مال ما نیست، یاد بدیمش، مخلصیم.

سایر نوشته‌هام