اشکال پایه در SVG

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

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

مستطیل

با استفاده از عنصر <rect> می توان یک مستطیل را بوجود آورد.


<svg>
  <rect width="200" height="100" fill="#BBC42A" />
</svg>

همانطور که در بالا نمایش داده شده است ویژگی های width و height عرض و ارتفاع مستطیل را مشخص می کنند و همینطور می توان با استفاده از ویژگی fill رنگ داخلی شکل را مشخص کرد.

از ویژگی های x و y نیز می توان برای حرکت مستطیل در راستای محورهای افقی و عمودی در سیستم مختصات SVG استفاده کرد:


<svg>
  <rect x="20" y="20" width="200" height="100" />
</svg>

همچنین می توانیم از طریق ویژگی های rx و ry گوشه های مستطیل را خمیده کنیم:


<svg>
  <rect width="200" height="100" rx="5" ry="10" />
</svg>

rx وظیفه خمیده کردن سمت افقی یک گوشه را دارد و ry تعیین کننده مقداری است که یک گوشه در سمت عمودی خمیده می شود.

دایره

با استفاده از عنصر <circle> می توان دایره رسم کرد:


<svg>
  <circle cx="75" cy="75" r="75" fill="#ED6E46" />
</svg>

یک دایره با استفاده از تعیین یک نقطه مرکزی و یک شعاع شکل می گیرد که نقطه مرکزی را ویژگی های cx و cy نسبت به سیستم مختصات SVG تعیین می کنند و r مشخص کننده اندازه شعاع دایره می باشد.

بیضی

با استفاده از عنصر <ellipse> و تعیین نقطه مرکزی آن و تعیین دو شعاع بیضی می توان بصورت زیر یک بیضی را رسم کرد:


<svg>
  <ellipse cx="100" cy="100" rx="100" ry="50" fill="#7AA20D" />
</svg>

نقطه مرکزی بیضی توسط ویژگی های cx و cy تعیین و شعاع افقی و عمودی آن به ترتیب توسط rx و ry مشخص می شود.

پاره خط

با استفاده از عنصر <line> و تعیین نقطه اول و آخر خط می توان یک پاره خط را رسم کرد:


<svg>
  <line x1="5" y1="5" x2="100" y2="100" stroke="#765373" stroke-width="8"/>
</svg>

نقطه شروع خط توسط ویژگی های x1 و y1 تعیین می شود و نقطه آخر خط را ویژگی های x2 و y2 مشخص می کنند.

بر خلاف اشکال دیگر که اگر برای آنها رنگی هم تعیین نکنیم بصورت پیشفرض رنگ داخلی آنها مشکی و آن شکل قابل مشاهده خواهد بود، عنصر خط تا زمانی که از طریق stroke رنگی برای آن تعیین نشود قابل دیدن نمی باشد. همچنین می توان از طریق stroke-width ضخامت خط را تعیین کنیم.

چندخطی

عنصر <polyline> مانند عنصر <line> برای رسم خط مورد استفاده قرار می گیرد اما بر خلاف این عنصر می توان از <polyline> برای رسم چندین خط استفاده کرد.


<svg>
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" fill="white" stroke="#BBC42A" stroke-width="6" />
</svg>

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

همچنین توجه داشته باشید که می توان از طریق fill سطح فضاهای بین چندخطی را رنگ زد.

مثال دیگری را در زیر مشاهده می کنید:


<svg>
  <polyline points="0,0 50,0 150,100 250,100 300,150" fill="rgb(249,249,249)" stroke-width="1" stroke="rgb(0,0,0)"/>
</svg>

 
چندخطی در svg
 

چندضلعی

با استفاده از عنصر <polygon> می توان یک چندضلعی یا به بیان دیگری خطوطی به هم پیوسته که در نهایت یک شکل بسته را تشکیل می دهند، بوجود آورد.


<svg>
  <polygon points="50,5 100,5 125,30 125,80 100,105 50,105 25,80 25,30" fill="#ED6E46" />
</svg>

تعیین نقاط مختلف یک چندضلعی شبیه به ساخت یک polyline می باشد و از طریق ویژگی points انجام می شود:

بوسیله این ویژگی می توان اشکال زیادی را بوجود آورد مثال های زیر را با هم بررسی می کنیم:


<svg>
  <polygon points="50 15, 100 100, 0 100" fill="#e43" />
</svg>  


<svg>
  <polygon points="26,86 11.2,40.4 50,12.2 88.8,40.4 74,86 " fill="hsl(56,80%,50%)"/>
</svg>  


<svg>
  <polygon points="50,9 60.5,39.5 92.7,40.1 67,59.5 76.4,90.3 50,71.9 23.6,90.3 32.9,59.5 7.2,40.1 39.4,39.5" fill="hsl(106,80%,50%)"/>
</svg>  


<svg>
  <polygon points="30.1,84.5 10.2,50 30.1,15.5 69.9,15.5 89.8,50 69.9,84.5" fill="hsl(156,80%,50%)"/>
</svg>  


<svg>
  <polygon points="34.2,87.4 12.3,65.5 12.3,34.5 34.2,12.6 65.2,12.6 87.1,34.5 87.1,65.5 65.2,87.4"  fill="hsl(216,80%,50%)"/>
</svg>  

14 دیدگاه برای “اشکال پایه در SVG

  1. آخه من همین مطلب رو تو چندین سایت دیگه خوندم اصلأ تو مغزم نمیرفت نمی‌دونم چرا ولی یه جوری دیگه با مطالب شما عادت کردم حتی اگه در حالت راه رفتن و بدون تمرکز هم بخونم (که اکثراً اینجوری هم هست?) دیگه تو مغزم حک میشه.

  2. آقای سیدی سلام میخواستم ببینم هیچ جوره نمیتونم با شما در مورد یک مطلبی توی تلگرام صحبت کنم؟ یک روشی رو توی ریسپانسیو پیدا کردم که نمیدونم آیا این کار درست هست یا نه
    البته از جایی پیدا نکردم خودم یک جورایی درستش کردم
    توی این روش دیگه حتی میشه برای مانیتورهای 16 کا هم فقط با یک خط کد بهینه کرد نه اینکه کاربر مجبور به زوم کردن بشه
    یک جورایی شما فقط دو تا بریک دارید دیگه بقیش فقط با یکی یا دو سه خط کد نویسی هست
    میخواستم با شما در میون بزارم اما اینجا نمیشه در موردش صحبت کرد ممنون میشم اگه وقتتون رو در اختیارم بزارید قول میدم کوتاه صحبت کنم

  3. خب چند تا سوال در مورد اس وی جی
    1- این درسته که میگن بهتره از path استفاده کرد چون قابلیت این رو داره که توی جی اس براش بشه کد نوشت؟
    2-حتما آقای سیدی یک مطلب در مورد ساخت پکیج آیکون با اس وی جی رو بزارید
    3-من داشتم مطلبی رو میخوندم از خانوم سارا سوئدی( اگه اشتباه نکنم) میگفت همیشه preserveaspectratio رو توی xMinYMin meet بزارید
    خب ولی من توی ابعاد دهی همیشهnone میزارم ولی height نمیدم به اس وی جی به نظرتون کارم اشتباهه؟
    4- راهی نیست که بشه در حالت آفلاین هم از روش external svg هم استفاده کرد؟ منظورم این روشه

    همون آدرسی که قبل از آی دی مینویسید که یک فایل اس وی جی خارجی رو لینک کنید و بگید از اینجا بگیره چون من هر کاری کردم توی حالت آفلاین کار نکرد
    5-شما در مورد تغییر viewbox اس وی جی ها صحبت کردید و تغییراتش مگه زمانی هم هست که ما viewbox خودمون رو بخواهیم تغغییر بدیم دیدم که viewport رو تغییر بدن اما ندیدم کسی مثلا توی viewbox دستکاری کنه من همیشه viewboxم برابر با محتوای درونش هست

    تو رو خدا ببخشید که زیاد سوال پرسیدم و پیشاپیش ممنون بابت جواب هاتون ♥

    1. با path دستتون بیشتر بازه برای کشیدن طرح های مختلف و شکلی که با path درست بشه رو راحت تر میشه گسترش و تغییرش داد طبیعتا. در مورد جاوااسکریپت هم نه شما می تونید نقاط polygon رو هم با js تغییر بدید.

      کارتون اشتباه نیست ولی ببینید توی پروژهای بزرگ فقط شما نیستید که کد میزنید و احتمال داره کسی ارتفاع بزاره از روی ناآگاهی و گذاشتن meet حاشیه امنی درست میکنه برای قصه واکنشگرا بودن Svg. ولی همه چی نسبی. نسبت به موقعیت و پروژه تصمیم گیری باید بشه.

      در مورد بحث آفلاین کردن اون اطلاعی ندارم.

      چون احتمالا شما همیشه طرح رو خودتون می سازید و مراقب اندازه های viewbox هستید. ولی وقتی از طرح های آماده استفاده میشه خیلی مواقع به درستی طرح ساخته نمیشه و نیاز به تغییرات viewbox هستش. اونم فراوون. این یه بحث هستش.

      همینطور با تغییر viewbox خیلی کارای جالبی میشه کرد. میشه انیمیشن های قشنگی ساخت. یا مثلا یک نقشه رو در نظر بگیرید که بخواین روی یک قسمتش زوم کنید. این کار رو میشه با تغییر viewbox انجام داد.

      موفق باشید

  4. کارت خیلی درسته دمت گرم .
    راستی این رو خودت می نویسی یا از مرجع انگلیسی ترجمه می کنی؟
    میشه چند تا مرجع انگلیسی که آموزش های اینجوری میزارن به من هم معرفی کنی؟

    1. ممنون. “این” به چی بر میگرده؟ به این پست؟ به بحث svg؟ به این سایت؟

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

      موفق باشید.

سوال داری؟ برو به پنل پرسش و پاسخ

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *