0

مقدمه ای بر Scalable Vector Graphics(SVG): آنها چیستند؟ (قسمت دوم)

قسمت اول

 

این المنت ها به عنوان کانتینری برای گرافیک ما عمل می کند که در صفحه وب رندر می شود.

دو ویژگی وجود دارد که باید به این المنت اضافه کنیم. اولین مورد xlmns با مقدار “http://www.w3.org/2000/svg” است.

<svg xmlns="http://www.w3.org/2000/svg">
</svg>

قطعه کد بالا می گوید: “این برچسب و تمام برچسب های اصلی آن از گویش XML استفاده می کنند که در” http://www.w3.org/2000/svg “تعریف شده است. اگر دنبال جزئیات بیشتری هستید می توانید اینجا را بخوانید ، اما  به طور کلی این خاصیتی  است

که شما همیشه باید آن را به بیرونی ترین svg المنت اضافه کنید.

ویژگی دوم viewBox است. ویژگی viewbox دارای چهار عدد است که یک سیستم مختصات ایجاد می کند. شما می توانید این  مورد را به عنوان ایجاد منطقه ای که در آن “ترسیم” گرافیک می کنیم ، تصور کنید.

<svg
 viewBox="0 0 100 100"
 xmlns="http://www.w3.org/2000/svg"
>
</svg>

دو عدد اول  x و y منشا سیستم مختصات را تعریف می کنند. برای مقدمه ، و  همچنین در بیشتر موارد استفاده ، ما فقط می خواهیم با یک سیستم مختصات با مبدا (0،0) کار کنیم .

دو عدد بعدی عرض و ارتفاع سیستم مختصات ما را مشخص می کند. خواهید دید که واحد خاصی  وجود ندارد (مانند 100px 100px). ما می توانیم این ویژگی را با ویژگی های ارتفاع و عرض در CSS خود تعریف کنیم ( یا به عنوان گزینه دیگر ، می توانیم آنها را به

عنوان خاصیت های اضافی روی تگ ، تعریف کنیم):

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #25A9FC;
}svg {
  height: 100px;
  width: 100px;
  border: solid 3px red; // so we can see the area
}
 

 

 

<circle>

اکنون ناحیه خود را داریم که می توانیم علامت گذاری بیشتری را قرار دهیم که نمودار ما را ترسیم می کند.

همانطور که قبلا ذکر شد ، SVG ها گرافیکی هستند که با استفاده از اشکال جداگانه ایجاد شده اند.

شش برچسب وجود دارد که می توانیم برای ایجاد برخی اشکال اساسی استفاده کنیم:

<circle />
<rect />
<ellipse />
<line />
<polyline />
<polygon />

بدیهی است که اشکال پیچیده تر همیشه نمی توانند بدین شکل بصورت خیلی منظم (دقیق) تعریف شوند ، بنابراین شما نیاز به کنترل دقیق تر دارید. در آنجا وارد تگ path می شود ، که می توانید آن را به صورت تعریفی سفارشی و آزاد از شکل در نظر بگیرید.

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

<svg
 viewBox="0 0 100 100"
 xmlns="http://www.w3.org/2000/svg"
>
 <circle>
 </circle>
</svg>

سه ویژگی خاص برای دایره وجود دارد که اندازه و موقعیت را تعیین می کند.

cx و cy مرکز موقعیت x و y دایره را نسبت به ناحیه طراحی ما مشخص میکند:

<svg
  viewBox="0 0 100 100"
  xmlns="http://www.w3.org/2000/svg"
>
  <circle cx="50%" cy="50%">
  </circle>
</svg>
 

با استفاده از 50٪ ، ما می گوییم که می خواهیم مرکز دایره ما دقیقا در مرکز فایل svg سکون داشته باشد.

نسبت به سیستم مختصات ما، ۵۰ px از نقطه افقی سمت چپ از مجموع ۱۰۰ px و ۵۰ px از  نقطه عمودی بالا در کل مجموع ۱۰۰ px در نظر گرفته می‌شود.

ما مجموعه ی موقعیت های  خود را داریم ، اما تا زمانی که اندازه را مشخص نکنیم نمی توانیم دایره خود را ببینیم.

برای ایجاد اندازه برای یک دایره ، شعاعی را که به عنوان  ویژگی r نمایش داده شده است تعریف می کنیم:

<svg
 viewBox="0 0 100 100"
 xmlns="http://www.w3.org/2000/svg"
>
 <circle cx="50%" cy="50%" r=25%>
 </circle>
</svg>

خودشه! ما اولین شکل SVG خود را ایجاد کرده ایم.

اکنون ، برخی از ویژگی های SVG دیگر(این ویژگی ها مختص دایره نیست) وجود دارد که می توانیم برای استیل دهی از  این موارد استفاده کنیم.

به عنوان یک قاعده شخصی ، من دوست دارم ویژگی هایی را که مختص یک برچسب خاص نیستند از طریق قوانین CSS تعریف کنم:

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #25A9FC;
}svg {
  height: 100px;
  width: 100px;
  border: solid 3px red;
}circle {
  fill: white;
}
 

fill رنگ شکل را مشخص می کند. شما می توانید آن را به عنوان “سطلی” برای SVG ها تصور کنید.

 

 

در مرحله بعد ، می توانیم از stroke برای تعیین border استفاده کنیم:

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #25A9FC;
}svg {
height: 100px;
width: 100px;
border: solid 3px red; // so we can see the area
}circle {
fill: #FDC56B;
stroke: #3E829B;
}

درست مانند border-width در CSS ، ما می توانیم از ضریب عرض استفاده کنیم تاخروجی را ضخیم تر و راحت تر ببینیم:

 

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #25A9FC;
}
svg {
height: 100px;
width: 100px;
border: solid 3px red; // so we can see the area
}
circle {
fill: #FDC56B;
stroke: #3E829B;
stroke-width: 5;
}

 

 

در آخر ، ما می توانیم یک عنصر دایره کوچکتر در ناحیه نقاشی خود اضافه کنیم تا توپ خود را کامل کنیم:

<svg
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
>
<circle cx="50%" cy="50%" r=25% />
<circle cx="50%" cy="50%" r=10% />
</svg>

… و در آخر ، ما آن را استیل دهی می کنیم:

 

body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #25A9FC;
}svg {
height: 100px;
width: 100px;
border: solid 3px red; // so we can see the area
}circle {
&:first-child {
fill: #FDC56B;
stroke: #3E829B;
stroke-width: 5;
}

&:last-child {
fill: #D45F5B;
}
}

 

 

 

 

برای پیچیدن ، من border را برمی دارم ، ارتفاع و عرض ناحیه نقاشی خود را افزایش می دهم ، و عرض دایره بیرونی را بالا می آورم.

 

کد نهایی را می توانید در اینجا مشاهده کنید! 🚀

 

نتیجه

ما توضیح داده ایم که گرافیک برداری مقیاس پذیر در مقایسه با گرافیک bitmap چیست و در ایجاد یک گرافیک ساده بی نظیر است.

 

 

 

 

 

 

ارسال دیدگاه

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