پباده سازی لوگو در اپلیکیشن illustrator:

کد درج متن روی مسیر ساخت گردیده با SVG:

Mohtava.info

همان طور که در کد بالا بازدید میکنید، این svg از دو بخش ساخته شده میباشد. تگ def و تگ text . خصوصیات مسیر (path) را در تگ defs تعریف و تمجید میکنیم و ویژگی ها متن موردنظر را در تگ text . به تگ path آیدی path1 داده ایم و آنگاه مقدار اتریبیوت textPath بنا شده در تگ text را برابر آیدی path1 قرار داده ایم.

طراحی سایت در مشهد

طریق پباده سازی آیکون و لوگو به وسیله svg:
تا اینجای نوشته‌ی علمی، چگونگی رسم گونه های متفاوت هندسی (خط-دایره-مستطیل و چندضلعی) را بوسیله svg فراگیری داده ایم. اینک وقت آنست که یه خرده موضوع را پیچیده خیس کنیم و با مباحث بحران انگیز مواجه شویم. اما به لطف اپلیکیشن قادر Adobe illustrator آنقدرها هم پیچیده وجود ندارد. بطور کلی فعالیت این اپلیکیشن “پباده سازی وکتورهای گوناگون و قابل scale” است.

پباده سازی لوگو در اپلیکیشن illustrator:
اپلیکیشن ایلاستریتور (illustrator) را گشوده فرمائید و لوگو یا این که آیکون دلخواه خویش را در آن رسم فرمائید. در شرایطی که لوگو بصورت ماهر پباده سازی گردیده باشد احتمالا با illustrator پباده سازی شده‌است. پوشه آن را گشوده نمائید و یا این که در‌صورتی‌که به هر دلیلی به فولدر ایلاستریتور لوگوی کمپانی خویش دسترسی ندارید، یک لوگو از نخست در‌این اپلیکیشن تولید فرمائید. در صورتیکه تا به امروز با اپلیکیشن ادوبی ایلاستریتور عمل نکرده اید، سفارش می‌کنیم تیم مقاله‌ها پباده سازی گرافیک از تارنما تاتس‌پلاس (TutsPlus) را مطالعه نمایید.

زمانی که لوگوی موردنظر خویش را با ایلاستریتور گشوده کردید، به منوی file > save as بروید و مطابق تصویر تحت، آنرا با فرمت .svg ذخیره فرمایید.

روش پباده سازی آیکون و لوگو بوسیله svg

بعداز گزینش فرمت svg با دیالوگ پیکربندی svg مواجه خواهید شد. مانند تصویر تحت، روی دکمه SHOW SVG CODE کلیک نمایید.

روی دکمه SHOW SVG CODE کلیک فرمایید

با اینکار کد SVG در مرورگر گشوده خواهد شد. صرفا کافیست این کد را اسکن کرده و در فولدر HTML تارنما خویش و در محل موردنظر paste فرمائید. به همین راحتی فارغ از حتی یک خط کد تایپ کردن توانستید یک svg پباده سازی گردیده در illustrator را در سایت خویش درج فرمائید.

پباده سازی path به وسیله adobe illustrator:
شما همینطور می‌توانید از ایلاستریتور برای ساخت مسیر (path) به کار گیری فرمائید. بعد از رسم مسیر دلخواه خویش، کافیست اتریبیوت ‘d’ آنرا اسکن فرمایید و در ورقه تارنما خویش درج نمایید (همان گونه که تا قبل از این دراین نوشته‌علمی یادگرفتن داده گردیده)

بعنوان نمونه مسیری که درین نوشته‌علمی نمونه زدیم مخلوق بوسیله اپلیکیشن illustrator پباده سازی کردم و با مراجعه به کد svg آن و برداشتن اتریبیوت d آن، در وبسایت به کار گیری کردم و متن دلخواه را روی آن قرار دادم.

استایل دهی به تگ svg به وسیله css:
شما همینطور می‌توانید تگ svg را به وسیله استایل های css فردی سازی نمایید و شرایط آن را معلوم فرمائید. علاوه بر این شما میتوانید تگ svg را در تگ لینک و پیوند (anchor tag) قرار دهید تا صورت یا این که مسیر پباده سازی گردیده با svg بصورت پیوند درآید. و یا این که حتی می قدرت گونه های svg را بوسیله جی کوئری ویرایش کرد.

با مطالعه نوشته ی علمی { آموزش تکنیک های CSS } می‌توانید علم خویش را در مسئله لهجه نحوه طومار CSS بالا ببرید

فیض گیری (Conclusion):
استعمال از فرمت svg این قابلیت را برای طراحان اینترنت آماده مینماید که انواع scalable ساخت نمایند که در تمام اسکرین ها و دستگاه های جانور در بازار بخوبی اکران می‌یابند و از کیفیت آنان کاسته نخواهد شد. بویژه درین روز ها که اسکرین های رتینا (retina screen) در درحال حاضر بسط میباشند، به کار گیری از پباده سازی svg بسیار کاربردی خواهد بود.