گرافیک های بردار مقیاس پذیر(svg) یک قالب تصویر بردار مبتنی بر زبان نشانه گذاری گسترده برای گرافیک دو بعدی با پشتیبانی از تعاملی و متحرک سازی است. مشخصات SVG یک استاندارد باز است که توسط کنسرسیوم وب جهانی از سال 1999 توسعه یافته است.
فایل SVG چیست؟
یک فایل SVG ، مخفف فایل گرافیکی بردار مقیاس پذیر ، یک نوع فایل گرافیکی استاندارد است که برای ارائه تصاویر دو بعدی در اینترنت استفاده می شود.
SVG یک فرمت گرافیکی بردار مبتنی بر زبان نشانه گذاری توسعه پذیر (XML) برای وب و سایر محیط های نرم افزاری (اندروید، آی او اس، ویندوز) است.
اگرچه سخت است اما (XML) از برچسب هایی مانند HTML استفاده می کند. به عنوان مثال ، نمی توانید یک تگ بسته را حذف کنید. زیرا این باعث می شود فایل نامعتبر باشد و SVG ارائه نمی شود.
انعطاف پذیری SVG
کد SVG را می توان از طریق CSS یا JavaScript دستکاری کرد. این به SVG انعطاف پذیری و تطبیق پذیری می دهد که هرگز با فرمت های گرافیکی سنتی PNG ، GIF یا JPG مطابقت ندارد.
SVGیک استاندارد W3C است. به این معنی که می تواند به راحتی با سایر زبانها و فن آوریهای استاندارد باز از جمله JavaScript ، DOM ، CSS و HTML به راحتی کار کند. تا زمانی که W3C استانداردهای صنعت جهانی را تعیین کند، به احتمال زیاد SVG همچنان به صورت استاندارد برای گرافیک برداری در مرورگر باقی می ماند.
تاریخچه:
اگرچه در اواخر دهه 1990 تصور شد، SVG از بسیاری جهات فرمت فایل “جوجه اردک زشت” است که تبدیل به یک قو شد. همه چیز از سال 2017 تغییر کرده و در بیشتر دهه های 2000 نادیده گرفته شده است. همه مرورگرهای وب مدرن SVG را بدون مشکل ارائه می دهند. اکثر برنامه های طراحی بردار گزینه ای برای صادر کردن آن ارائه میدهند. SVG به یک فرمت تصویری پرکاربرد در وب تبدیل شده است.
هرچند فرمت های فایل گرافیکی شطرنجی سنتی مانند JPG و PNG برای عکس ها یا تصاویر بسیار پیچیده مناسب هستند. اما به نظر می رسد SVG فرمت ای است که نیازهای توسعه وب ، پاسخگویی ، تعامل ، برنامه ریزی ، عملکرد و دسترسی را برآورده می کند.
چرا باید از SVG استفاده کنید؟
جذابیت فایل SVG این است که می تواند بسیاری از مشکلات سخت در توسعه وب مدرن را حل کند. بیایید تعدادی از آنها را مرور کنیم:
SVGدر زیر سرپوش خود از اشکال ، اعداد و مختصات به جای شبکه پیکسل برای نمایش گرافیک در مرورگر استفاده می کند. که باعث می شود آن را مستقل از وضوح و بی نهایت مقیاس پذیر کند. اگر به آن فکر کنید، دستورالعمل ایجاد یک دایره یکسان است. چه از قلم استفاده می کنید و چه از هواپیما. فقط مقیاس آن تغییر می کند.
با SVG ، می توانید اشکال ، مسیرها و عناصر متنی مختلف را برای ایجاد انواع تصاویر ترکیب کنید. مطمئن باشید که آنها در هر اندازه ای شفاف و واضح به نظر می رسند.
در مقابل ، فرمت های مبتنی بر شطرنج مانند GIF ، JPG و PNG دارای ابعاد ثابتی هستند که باعث می شود هنگام مقیاس بندی پیکسل شوند. اگرچه تکنیک های مختلف عکس های واکنش گرا برای گرافیک پیکسلی ارزشمند بوده است. اما هرگز نمی توانند به طور واقعی با توانایی SVG در مقیاس گذاری نامحدود رقابت کنند.
قابلیت برنامه ریزی و تعامل
SVG کاملاً قابل ویرایش و اسکریپت است. انواع انیمیشن ها و تعاملات را می توان از طریق CSS و یا جاوا اسکریپت به یک گرافیک داخلی SVG اضافه کرد.
دسترسی
فایل های SVG مبتنی بر متن هستند. بنابراین هنگامی که در یک صفحه وب جاسازی می شوند، می توان آنها را جستجو و نمایه سازی کرد. این باعث می شود آنها برای خوانندگان صفحه ، موتورهای جستجو و سایر دستگاه ها قابل دسترسی باشند.
کارایی
یکی از مهمترین جنبه هایی که بر عملکرد وب تأثیر می گذارد ، حجم فایل های مورد استفاده در یک صفحه وب است. اندازه گرافیک SVG معمولاً در مقایسه با فرمت های فایل bitmap کوچکتر است.
موارد استفاده مشترک SVG و پشتیبانی مرورگر
فایل SVG دارای موارد کاربردی است. بیایید مهمترین آنها را بررسی کنیم.
تصاویر و نمودارهای ساده
هر نقاشی سنتی که خود را وادار به تولید با قلم و مداد می کند باید کاملاً به فرمت SVG ترجمه شود.
لوگوها و نمادها
لوگوها و نمادها باید واضح ( واضح در هر اندازه ) باشند. که آنها را به کاندیداهای ایده آل برای SVG تبدیل می کند. علاوه بر این ، نمادهای SVG در دسترس تر هستند و موقعیت یابی آنها بسیار ساده تر است.
تصاویر متحرک
با استفاده از گرافیک SVG می توانید انیمیشن های جذابی از جمله جلوه های جذاب خط کشی ایجاد کنید. در واقع ، کد SVG می تواند با انیمیشن CSS ، و همچنین جاوا اسکریپت و قابلیت انیمیشن SMIL داخلی خود تعامل داشته باشد.
تعامل نمودارها (infogr)
در فرآیند طراحی وب سایت کاربر پسند، ممکن است با مشکلاتی در خصوص تصاویر ، به ویژه وضوح تصویر مواجه شوید. کیفیت تصویر برای درست نشان دادن مهم است. کمتر مواردی در یک صفحه نسبت به لوگو ، نماد یا عکس مخدوش و با مقیاس ضعیف کمتر حرفه ای به نظر می رسند.
این مشکل فقط با طراحی واکنش گرا تشدید می شود. بازدیدکنندگان محتوای شما را در کامپیوتر و تلفن های هوشمند به طور یکسان مشاهده می کنند. بنابراین، همراه با بقیه محتوای شما ، تصاویر شما باید صرف نظر از دستگاه بهینه شوند.
آیا خوب نیست یک فرمت دیجیتالی وجود داشته باشد که تصاویر را بدون توجه به اندازه آنها عالی جلوه دهد؟
پاسخ:همانطور که معلوم است، وجود دارد. این فرمت SVG نامیده می شود و برای تصاویر غیر عکاسی در وب سایت ها مناسب است.
SVG ها یک ترفند جادویی در طراحی وب سایت هستند. نه تنها گرافیک واضحی را در هر مقیاسی تولید می کنند. بلکه برای موتورهای جستجو ، قابل برنامه ریزی ، اغلب کوچکتر از فرمت های دیگر و دارای قابلیت انیمیشن های پویا بهینه شده اند. چیزهای زیادی برای باز کردن و یادگیری در مورد SVG ها وجود دارد.
Bitmap چیست؟
احتمالاً با فرمت های رایج PNG و JPEG آشنا هستید. این فرمت های گرافیکی شطرنجی هستند. به این معنی که آنها اطلاعات تصویر را در شبکه ای از مربع های رنگی ذخیره می کنند که به آن bitmap گفته می شود. مربع های موجود در این نقشه بیت، ترکیبی از یک تصویر منسجم هستند. مانند پیکسل های روی صفحه کامپیوتر.
گرافیک راستگر برای تصاویر بسیار دقیق مانند: عکس ها ، که در آنها باید رنگ دقیق هر پیکسل مشخص شود ، خوب کار می کند. تصاویر رستری دارای رزولوشن ثابتی هستند. بنابراین افزایش اندازه آنها کیفیت تصویر را پایین می آورد.
قالب های گرافیکی چگونه عمل می کنند؟
قالب های بردار(گرافیکی)مانند: SVG و PDF-متفاوت عمل می کنند. این فرمت ها تصاویر را به صورت مجموعه ای از نقاط و خطوط بین نقاط را ذخیره می کنند. فرمول های ریاضی محل و شکل این نقاط و خطوط را دیکته می کنند. هنگامی که تصویر به بالا یا پایین می رود روابط فضایی خود را حفظ می کنند. فایل های گرافیکی بردار همچنین اطلاعات رنگی را ذخیره می کنند و حتی می توانند متن را نمایش دهند.
نحوه استفاده از فایل SVG (داخل و خارج از وردپرس)
استفاده از SVG ها چندان سخت نیست. افزودن یک فایل SVG به وب سایت شما به آسانی گرفتن کد آن و چسباندن آن در یک سند HTML به هر کجا که می خواهید تصویر باشد.
اگر شما و بازدیدکنندگان سایت خود از مرورگرهایی استفاده می کنید که از فایل های SVG پشتیبانی می کنند (و اکثر آنها این روزها این کار را انجام می دهند) ، آنها می توانند عنصر را مشاهده کنند. البته متحرک سازی SVG ها پیچیده تر است. زیرا نیاز به استفاده از CSS دارد.
اگر از وردپرس استفاده می کنید ، روند تغییر می کند. سیستم مدیریت محتوا (CMS) از SVG ها پشتیبانی نمی کند. اگر می خواهید پشتیبانی SVG را فعال کنید تا بتوانید مستقیماً فایل ها را بارگذاری کنید.
ویرایش یک فایل SVG
البته این تنها یک گزینه است. سایر خدمات مبدل PNG و JPG به SVG شامل Convertio و Img2Go است. شما می خواهید برای یافتن مناسب ترین راه حل برای نیازهای خود تحقیق کنید.
اگر هیچ تجربه ای در زمینه طراحی گرافیک ندارید ، ایجاد لوگوها یا عناصر دیگر برای وب سایت شما یک چالش خواهد بود. در این حالت ، بهترین گزینه این است که تصاویر موجود را گرفته و آنها را به SVG تبدیل کنید.
چه جایی از این نوع تصاویر استفاده می کنیم؟
به عنوان یک قاعده کلی ، فقط استفاده از فرمت SVG برای تصاویر “ساده” منطقی است. یعنی تصاویری با حاشیه های مشخص و خطوط تمیز. هرچه تصویر پیچیده تر باشد ، به احتمال زیاد با یک فایل SVG عظیم مواجه خواهید شد. که وظیفه ویرایش دستی یا متحرک سازی را بر عهده دارد.
اگر نمی خواهید نرم افزاری را بارگیری کنید، می توانید از ابزارهای تبدیل آنلاین نیز استفاده کنید.خدمات زیادی وجود دارد که می توانید به آنها مراجعه کنید.
بسیاری از ابزارهای رایگان وجود دارد که می توانید از آنها برای تبدیل تصاویر از فرمت های دیگر به SVG استفاده کنید.
ویرایشگرهای گرافیکی
وقتی به ویرایشگرهای گرافیکی فکر می کنید ، اولین نامی که به ذهن می آید Photoshop است (یا GIMP ). با این حال ، Photoshop و GIMP فقط برای ویرایش عکس ها و ایجاد تصاویر شطرنجی عالی هستند.
تصاویر ریستر ، مانند PNG یا JPG ، در بسیاری از موارد خوب هستند ، اما اغلب به فرمت مقیاس پذیرتر نیاز دارید.
اینجاست که تصاویر بردار و ویرایشگرهای گرافیکی وارد می شوند. آنها کارهای گرافیکی پیشرفته تری را انجام می دهند که فتوشاپ فقط می تواند رویای آن را داشته باشد.
اکنون نرم افزارهای رایگانی ذکر میکنیم که به شما امکان می دهد تصاویر خود را باز کرده و آنها را با استفاده از ابزارها به عنوان فایل SVG ذخیره کنید.
دراینجا بهترین ویرایشگرهای گرافیکی رایگان برای تبدیل تصاویر بردار بهsvg که باید امتحان کنید آورده شده است.
Vecteezy
Inkscape
Vectr
RollApp
Sketsa
SVG-edit
(Vecteezy)ویرایشگر وکچیزی
Vecteezy یک ویرایشگر بردار ساده و خالق با هدف طراحی مبتدیان است ، اما به اندازه کافی قدرتمند است که متخصصان بتوانند از آن استفاده کنند. دارای تمام ویژگی هایی است که در ویرایشگر SVG انتظار دارید ، و شامل الگوها و تصاویر زیادی برای شروع است.
(Inkscape) ویرایشگر این اسکیپ
Inkscape یک ویرایشگر SVG بسیار محبوب است که استفاده از آن رایگان و در دسترس همه پلتفرم ها است. این ابزار برای تصویرگران و طراحان وب مناسب است همچنین دارای ابزارهای قدرتمندی برای ایجاد و دستکاری اشیا است.
Inkscape به شما امکان می دهد به صورت آزاد ، با اشکال و با متن کار کنید. طیف وسیعی از فرمت های خروجی از جمله PNG ، OpenDocument ، DXF ، PDF ، EPS ، sk1 و موارد دیگر را پشتیبانی می کند.
می توانید از آن برای ایجاد اشیاء بردار ، انجام انواع دستکاری روی آنها (پر کردن ، ضربه زدن ، رندر کردن ، تبدیل ، گروه بندی ، استفاده از لایه ها) ، افزودن متن ، ایجاد تصاویر برداری از نقشه های bitmap و غیره استفاده کنید. برای ویرایش برخی از raster ها(یک تصویر شطرنجی) می توانید از Inkscape فرمت هایی مانند PNG را نیز به دست آورید.
(RollApp)ویرایشگر رول اپ
اگر Inkscape را دوست دارید اما نمی خواهید آن را بر روی رایانه خود نصب کنید ، می توانید RollApp را امتحان کنید. RollApp نسخه آنلاین Inkscape است و تنها چیزی که نیاز دارید یک مرورگر است. این برنامه دارای تمام ویژگی های Inkscape ، به علاوه ادغام با Dropbox ، Google Drive ، One Drive و چند ارائه دهنده ذخیره سازی ابری دیگر است.
(Vectr)ویرایشگر وکتور
Vectr یک ویرایشگر گرافیکی رایگان است که ایجاد گرافیک برداری را آسان می کند. طراحی ساده رابط کاربری آن یک نرم افزار فوق العاده قدرتمند و در عین حال آسان است. می توانید برای تبدیل تصاویر JPG به SVG و نمادهای بردار ساده با اشکال ، مسیرها و ابزارهای متنی متعدد کار کنید. مانند برخی از برنامه های دیگر، امکان امتحان آنلاین به عنوان یک برنامه وب نیز وجود دارد.
ویژگی Vectr
Vectr همه مزایای Inkscape یا RollApp را ندارد. اما ویرایشگر خوبی است که می توانید تقریباً برای هر کار برداری استفاده کنید. این واقعیت است که به اندازه Inkscape ویژگی ندارد. اما در واقع ، فقط داشتن اصول اولیه کار را برای مبتدیان آسان تر می کند. با این وجود ، می توانید از Vectr برای ایجاد تصاویر و اعمال عملیات اصلی استفاده کنید. مانند: افزودن لایه ها ، حاشیه ها ، سایه ها یا متن استفاده کنید.
(Sketsa)ویرایشگر اکسترا
Sketsa SVG Editor یک برنامه طراحی تبدیل تصاویر jpg به svg چند پلتفرمی رایگان است. این شامل ابزارهای متعددی برای ایجاد محتوا است که به شما امکان می دهد اشیاء را به راحتی ترسیم ، دستکاری و ویرایش کنید. همچنین شامل یک ویرایشگر منبع با برجسته سازی است. این به شما امکان می دهد کد اصلی SVG XML را برای حداکثر کنترل مشاهده و ویرایش کنید.
(SVG-edit )ویرایشگرSVG
آیا نمی خواهید مجموعه زیادی از نرم افزارهای دیگر را جمع آوری کنید؟ SVG-edit یک ویرایشگر بردار قوی، مبتنی بر مرورگر است که از قالب منبع باز SVG (گرافیک های بردار مقیاس پذیر) استفاده می کند. این برنامه دارای بسیاری از موارد شگفت انگیز دستکاری تصویر است که انتظار دارید و در هر مرورگر اصلی کار می کند.
نکته آخر:
توصیه می شود مطالب وب یار، در خصوص svg را در مرورگرهای وب خود نشانه گذاری کنید تا در مواقع ضروری برای بهره وری بهتر در محل کار مجدداً از آن استفاده کنید.لطفاً این ابزارها را با دوستان و همکاران خود به اشتراک بگذارید. برای آگاهی از آخرین اخبار و مقالات ما را در اینستاگرام همراهی کنید.
