آموزش طراحی وب

نحوه ایجاد یک تصویر SVG واکنش گرا

post-image

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

برای حل این مشکل باید چند نکته کلیدی را هنگام گرفتن خروجی در برنامه  Illustrator رعایت کنید و سپس از طریق دستوراتی که در ادامه توضیح خواهم داد می توانید مقیاس اصلی تصاویر را به صورت خودکار تغییر دهید.

نحوه گرفتن خروجی در  Illustrator

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

مرحله اول ) ابتدا یک سند در اندازه ۶۰×۶۰ ایجاد کنید، یا اگر طرح خود را از برنامه فتوشاپ به Illustrator منتقل می کنید بهتر است آنرا به یک سند دیگر در اندازه ۶۰×۶۰ پیکسل قرار دهید.

مرحله اول

نکته : فرقی نمی کند که اندازه طرح شما چند پیکسل است شما باید در نهایت طرح خود را در مقیاس های معمول برای یک ایکون (۶۰×۶۰ یا ۳۴×۳۴) ذخیره کنید.

مرحله دوم ) نام طرح را روی ArtBoard بنویسید (این نام برای نام فایل خروجی در نظر گرفته می شود) و مطمئن شوید که طول و عرض ArtBoard برابر با اندازه سند است.

مرحله دوم

مرحله سوم ) از منوی file گزینه SaveAs را انتخاب و فرمت را روی SVG قرار دهید. سپس مطمئن شوید که تیک گزینه Use Artboards فعال شده باشد

AI-step-3

مرحله چهارم ) تنظیمات مربوط به SVG را طبق تصویر زیر انجام دهید.

مرحله چهارم

نحوه ایجاد یک SVG واکنش گرا

حال که زمینه را برای ایجاد یک SVG رسپانسیو آماده کردیم از طریق یکی از روش های زیر فایل SVG را به صفحه HTML اضافه می کنیم.

رسپانسیو کردن از طریق تگ img

این ساده ترین حالت ممکن برای ایجاد یک SVG رسپانسیو است که تقریبا در همه جا کاربرد دارد، اما زمانی نیاز دارید فایل SVG از طریق تگ object به صفحه اضافه کنید رسپانسیو کرن آن کمی دشوار تر می شود.

رسپانسیو کردن از طریق تگ Object

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

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


inside-svg

پس از پاک کردن نواحی قرمز رنگ شرایط ایده آل برای رسپانسیو کردن فایل فراهم می شود. اما این بار هنگام مشاهده تصویر مقداری فضای خالی دیده می شود که ممکن است فکر کنید که مقصر آن ViewBox است؛ اما نیست. برای حل آن ویژگی (attribute) زیر را به تگ svg اضافه کنید. این ویژگی موجب می شود طرح در بالا ترین قسمت تگ دربرگیرنده خود قرار بگیرد. (در این مثال منظور تگ div)

در قدم بعدی برای تغییر اندازه تصویر من از ترفند قراردادن یک المنت absolute درون یک المنت releative استفاده می کنم بنابراین باید به صورت زیر تگ object رو درون یک تگ div قرار دهید.

و این هم کد css مربوط به کلاس های svg-container و svg-content

به خاطر داشته باشید که در این مثال من قصد دارم اندازه تصویر تمام صفحه را دربر بگیرد برای همین width را برابر با ۱۰۰% گرفته ام همچنین padding-bottom بیانگر طول تصویر است برای به دست اوردن یک ضریب ۱:۱ در این مثال مقدار padding-bottom باید برابر با مقدار width باشد. اما اگر ارتفاع تصویر بیشتر از عرض آن بود (مثلا ضریب ۱:۲) در این مثال padding-bottom باید برابر با ۵۰% شود. به طور کلی برای تغییر اندازه تصویر می توانید width و padding-bottom را برحسب درصد مقدار دهی کنید کنید. فقط به خاطر داشته باشید که در این روش همه چیز حتی نوشته های درون فایل SVG تغییر اندازه پیدا می کنند.

تهیه شده در مدرسه مجازی ایرانیان

محمد هادی اعظمی

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

دیدگاه ۴

آیا سوالی دارید؟

پنل کاربران

بستن
*
*

نظرسنجی

به کدام دسته موضوعی علاقه مند هستید؟

آخرین پرسش و پاسخ ها

اموزش تصادفی

خبرهای باحال دریافت کن

خبرهای باحال دریافت کن

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

ثبت نام انجام شد ، لطفا ایمیلی که براتون ارسال میشه رو تایید کنین