SVG Viewport و ViewBox (برای مبتدیان کامل)

در این آموزش سریع SVG viewport و viewBox، ما دقیقاً کدام ویوپورت و viewBox در SVG برای وب هستند.

یاد خواهید گرفت:

• تفاوت بین viewport و viewBox
• جنبه های SVG های خود را که می توانید با هر کدام کنترل کنید
• هر کدام چگونه اعمال می شوند

شروع کنیم!

Viewport یا ViewBox؟

SVG Viewport

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

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

به عنوان مثال، شما ممکن است شکلی در گرافیک خود داشته باشید 100px توسط 100px، اما اگر نمای SVG را روی آن تنظیم کنید 50px توسط 50px شما فقط بخشی از آن شکل را خواهید دید. اندازه Viewport با افزودن تنظیم می شود width و height صفات به svg عنصر، مانند:

در اولین SVG ما کل را می بینیم 100px توسط 100px دایره، اما در SVG دوم زمانی که اندازه ویوپورت خود را روی آن تنظیم می کنیم 50px توسط 50px ما فقط یک چهارم دایره را می بینیم.

SVG viewBox

در viewBox می توان آن را به اندازه دید در نظر گرفت اما با دو ویژگی اضافی: می تواند “پن” و می تواند “زوم” کند. با تکیه بر قیاس “نگاه کردن از طریق شیشه”، اگر نمای دید مانند یک پنجره باشد، viewBox مانند تلسکوپ است

پارامترهای ViewBox

بیایید در مورد بزرگنمایی SVG صحبت کنیم. ما کنترل می کنیم viewBox با اضافه کردن آن به عنوان یک ویژگی به svg عنصر، با مقداری متشکل از چهار عدد با فاصله:

viewBox = <min-x> <min-y> <width> <height>

دو عدد اول موقعیت را مشخص می کنند viewBox، که ما آن را به عنوان “پنینگ” در نظر خواهیم گرفت. دو عدد آخر ابعاد آن را مشخص می کند viewBox، که ما آن را به عنوان “زوم” در نظر خواهیم گرفت.

توجه داشته باشید: به همان خوبی svg عنصر، viewBox ویژگی همچنین می تواند بر روی عناصر استفاده شود symbol، marker، pattern و view.

SVG Zoom

ما با نگاه کردن به “زوم” شروع می کنیم، که می توانیم با دو مورد آخر انجام دهیم viewBox مولفه های: width و height به ترتیب. ما دو پارامتر اول را رها می کنیم 0 0 در حال حاضر

اگر این دو پارامتر آخر دارای ابعاد یکسانی با viewport باشند، هیچ بزرگنمایی یا کوچک‌نمایی وجود ندارد بنابراین چیزی تغییر نمی‌کند. به عنوان مثال به SVG شماره 3 نگاه کنید:

اما اگر آن دو عدد را بزرگتر از ابعاد نمای درگاه کنیم، عملاً کوچک‌نمایی می‌کنیم، و اگر کوچک‌تر کنیم، بزرگ‌نمایی می‌کنیم.

در SVG شماره 4 در مثال بالا ما مقدار را تنظیم کرده ایم viewBox width و height به 100، که دو برابر اندازه دید ما است. این «کوچک‌نمایی» می‌کند و محتوا را دو برابر نشان می‌دهد، در نتیجه دوباره کل دایره را نشان می‌دهد.

در SVG پنجم ما viewBox روی a تنظیم شده است width و height از 25، که نصف اندازه نمای ماست. این SVG viewBox بزرگ‌نمایی می‌کند و نیمی از محتوا را نشان می‌دهد.

پانینگ

دو مورد اول viewBox پارامترها به شما این امکان را می‌دهند که با تنظیم جایی که در گوشه سمت چپ بالای صفحه قرار دارد، “پان” کنید viewBox باید باشد. عدد اول موقعیت افقی را کنترل می کند و عدد دوم موقعیت عمودی را کنترل می کند.

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

در این مثال به نحوه عملکرد این پانینگ نگاهی بیندازید. برای یادآوری، SVG شماره 3 دارای یک 50 توسط 50 نمای، viewBox اضافه شده است اما بدون حرکت یا بزرگنمایی. شماره 6 یکسان است، اما به سمت راست و پایین حرکت می کند:

پانینگ و بزرگنمایی با هم

البته می‌توانید با استفاده از هر چهار پارامتر به طور همزمان، هم حرکت و هم بزرگنمایی را همزمان انجام دهید، به عنوان مثال:

هنگام استفاده از ViewBox، Viewport خود را تنظیم کنید

هر زمان که از viewBox ویژگی، به یاد داشته باشید که ابعاد ویوپورت خود را نیز تنظیم کنید. اگر این کار را نکنید، آنها به طور پیش فرض 100٪ خواهند بود و احتمالاً یک گرافیک بزرگ خواهید داشت:

SVG ViewBox به طور خلاصه توضیح داده شده است

بیایید همه چیز را به چند نکته خلاصه کنیم:

• ویوپورت مانند پنجره ای است که برای دیدن محتوای یک SVG از آن نگاه می کنید.
• در viewBox شبیه درگاه دید است، اما می‌توانید مانند تلسکوپ از آن برای «پان کردن» و «زوم» استفاده کنید.
• کنترل نمای از طریق width و height پارامترهای روی svg عنصر
• با افزودن ویژگی، viewBox را کنترل کنید viewBox به svg عنصر همچنین می توان از آن بر روی عناصر استفاده کرد symbol، marker، pattern و view.
• در viewBox مقدار ویژگی از چهار پارامتر جدا شده از فاصله تشکیل شده است.
• دو مورد اول viewBox پارامترهای “panning” و دو پارامتر آخر “zooming” را کنترل می کنند.
• پارامتر اول را به “pan” سمت راست افزایش دهید، آن را به “pan” سمت چپ کاهش دهید.
• پارامتر دوم را به “pan” به پایین افزایش دهید، آن را به “pan” به بالا کاهش دهید.
• را بسازید viewBox ابعاد، یعنی دو پارامتر آخر، بزرگتر از نما برای “کوچک کردن”، و کوچکتر برای “بزرگنمایی” است.

امیدوارم که به روشن شدن آب های گاهی تار SVG کمک کند viewport و viewBox. ایجاد SVG مبارک!

کجا می توان نمادهای برتر SVG را در سال 2022 پیدا کرد

شما اصول اولیه Viewport SVG و ViewBox SVG را می دانید. ما توضیح دادیم که ViewBox چیست و چگونه زوم SVG و سایر پارامترها را تنظیم کنیم.

حالا، آیا شما تعجب می کنید که از کجا می توانید تهیه کنید آیکون های SVG حرفه ای برای استفاده در پروژه های خود؟ Envato Elements را بررسی کنید.

این بازار مبتنی بر اشتراک بارگیری نامحدود نمادهای SVG را در اختیار شما قرار می دهد. اگر برنامه نویس، طراح وب یا هنرمند دیجیتال هستید، این یک پیشنهاد عالی است. شما دسترسی نامحدودی به قالب های وب، تم های وردپرس، قالب های CMS، عکس استوک و موارد دیگر خواهید داشت!

درباره SVG و طراحی وب بیشتر بیاموزید

ما توضیحات SVG viewBox را انجام داده ایم، همه چیز در مورد پارامترهای بزرگنمایی SVG viewBox و موارد دیگر. اگر می‌خواهید درباره SVG برای طراحی وب اطلاعات بیشتری کسب کنید، این منابع عالی هستند.

یادداشت تحریریه: این پست با مشارکت های به روز شده است ماریا ویلانووا. ماریا یک کارمند نویسنده با Envato Tuts+ است.