Your browser does not support JavaScript!
خدمات طراحی گرافیک
طراحی پوستر
طراحی اینفوگرافیک
طراحی بنر سایت
آشنایی با فرمت SVG برای طراحان گرافیک

 SVG که مخفف Scalable Vector Graphics به معنای گرافیک برداری مقیاس پذیر می باشد، که یک فرمت برداری برای تصویر های گرافیکی در XML به حساب می آید و برای استفاده در کارهای انیمیشنی و تعاملی مناسب می باشد. این فرمت توسط تمامی مرورگر های اینترنت جدید و مهم قابل پشتیبانی است، همچنین قابلیت فشرده شدن، مقیاس پذیری و  می باشد. این فرمت در تمامی دستگاه هایی که قابلیت اجرای آن را دارند زیبا و با کیفیت به نظر می رسند. ویژگی مفید دیگری که این فرمت داشته و طراحان را مجاب به استفاده از خود می کند این است که تمامی ابزار های مدرن طراحی قابل به کار گرفته شدن در آن و سپس اجرا شدن می باشند. 

svg چیست

این نوع از فرمت برای طراحان از اهمیت خاصی برخوردار است، چرا که این امکان را برای ما فراهم می نماید تا فایل های گرافیکی با حجم کم اما در عین حال با کیفیت بسیار خوبی داشته باشیم. بنابراین، این فرمت در عین حال که تصویر تمیز و با کیفیت ارائه می دهد که حتی با زوم کردن بر روی آن کیفیت تصویر پایین نمی آید، از طرف دیگر سرعت لود شدن بسیار کوتاه تری نسبت به سایر فرمت ها نظیر PNG و  JPG را دارا می باشد. بنابراین، تمامی این جنبه های مثبتی که استفاده از این نوع فرمت برای طراحان به همراه دارد سبب شده تا فرمتی ایده آل به شمار آید.

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

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

راهی که ما گرافیک را از آن طریق می‌سازیم

گرافیک SVG

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

نامگذاری لایه

اغلب ویرایش گرها نامی که شما برای لایه ها استفاده می کنند را حفظ می نمایند و از آنها به عنوان آیدی های کد های SVG استفاده می کنند. این امر ممکن است باعث بروز برخی مشکلات گردد، چرا که در زبان برنامه نویسی اچ تی ام ال هر آیدی باید منحصر به فرد بوده تا اشتباهی صورت نگیرد. داشتن یک ساختار مشخص برای solid layer نه تنها بهترین راه برای نزدیک شدن به طرح های ما است، بلکه در حفظ زمان ما نیز بسیار کمک کننده خواهد بود. 

استایل‌ها و افکت‌ها

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

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

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

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

گرافیک SVG

راهی که ویرایشگر خروجی گرافیکی را تولید می‌کند

زمانی که ما طرح خود را به پایان رسانیده و همه چیز را برای گرفتن نتیجه نهایی مهیا می سازیم، زمان این فرا رسیده است که خروجی کار خود را به فرمت SVG صادر نماییم. در انجام این کار شما متوجه خواهید شد که کد های زیادی وجود دارند که به فایل ما افزوده شده اند، که تمامی آنها ضروری نمی باشند و شکل شما به همان شیوه و بدون آنها نیز نمایش داده خواهند شد. بنابراین، یکی از کار هایی که باید صورت بگیرد این است که کد های موجود در خروجی ها بررسی شوند. برای انجام این کار ابزار ها و پلاگین هایی همانند پلاگین SVGO Compressor و یا ابزار آنلاین SVGOMG وجود دارند که به طور خود به خود این وظیفه را به عهده می گیرند.