اگرچه در اواخر دهه 1990 تصور شد ، SVG از بسیاری جهات قالب فایل “جوجه اردک زشت” است که برای تبدیل شدن به یک قو بزرگ شده است. از سال 2017 تمام مرورگرهای وب مدرن بدون مشکلات جدی SVG را ارائه می دهند و از اکثر برنامه های ترسیم بردار گزینه صادرات SVG را ارائه می دهند ، که بدون شک به یک قالب گرافیکی بسیار پرکاربرد تبدیل شده است. وب.

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

سربرگ SVG 101

این راهنما در آگوست 2020 به روز شد.

بنابراین ، SVG چیست و چرا باید از آن استفاده کنید؟

SVG یک است eXtensible Markup Language (XML)قالب گرافیکی بردار مبتنی بر وب و سایر محیط ها. XML از برچسب هایی مانند HTML استفاده می کند ، اگرچه سخت تر است. به عنوان مثال نمی توانید یک برچسب بسته را حذف کنید زیرا این باعث نامعتبر بودن پرونده و ارائه SVG نمی شود.

برای اینکه طعم کد SVG را بدست آورید ، نحوه ترسیم یک دایره سفید با حاشیه سیاه در اینجا آورده شده است:

<circle cx="100" cy="100" r="50" stroke-width="4" stroke="#000" fill="#fff" />

همانطور که مشاهده می کنید ، اسناد SVG در زیر کادر چیزی بیش از فایل های متنی ساده نیستند که خطوط ، منحنی ها ، اشکال ، رنگ ها و متن ها را توصیف می کنند. از آنجا که قابل خواندن توسط انسان است ، به راحتی قابل درک و تغییر است ، وقتی که در یک سند HTML قرار دارد درون خطی SVG، کد SVG از طریق CSS یا JavaScript قابل دستکاری است. این به SVG انعطاف پذیری و انعطاف پذیری می بخشد که هرگز با قالب های گرافیکی PNG ، GIF یا JPG قابل مقایسه نیست.

SVG یک است استاندارد W3C، به این معنی که می تواند به راحتی با سایر زبان ها و فن آوری های استاندارد استاندارد از جمله JavaScript ، DOM ، CSS و HTML همکاری کند. تا زمانی که W3C استانداردهای جهانی صنعت را تعیین می کند ، به احتمال زیاد SVG به عنوان استاندارد واقعی برای گرافیک برداری در مرورگر ادامه خواهد داشت.

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

مقیاس پذیری و پاسخگویی

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

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

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

قابلیت برنامه ریزی و تعامل

SVG کاملاً قابل ویرایش و قابل نوشتن است. انواع انیمیشن ها و تعاملات را می توان از طریق CSS و / یا JavaScript به یک گرافیک SVG درون خطی اضافه کرد.

دسترسی

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

کارایی

یکی از مهمترین جنبه های موثر بر عملکرد وب ، اندازه پرونده های استفاده شده در یک صفحه وب است. اندازه گرافیک های SVG معمولاً در مقایسه با فرمت های فایل bitmap کمتر است.

موارد استفاده مشترک و پشتیبانی از مرورگر

SVG بهمن موارد استفاده عملی دارد. بیایید مهمترین آنها را بررسی کنیم.

تصاویر و نمودارهای ساده

هر نقاشی سنتی که تولید آن با استفاده از قلم و مداد باشد ، باید کاملاً به فرمت SVG ترجمه شود.

آرم ها و نمادها

آرم ها و نمادها باید در هر اندازه ای شفاف و واضح باشند – به اندازه یک دکمه یا یک بیلبورد – که آنها را به عنوان کاندیداهای ایده آل برای SVG تبدیل می کند. علاوه بر این ، نمادهای SVG در دسترس تر هستند و موقعیت آنها بسیار آسان تر است.

تصاوير متحرك

شما می توانید ایجاد کنید جذاب تصاوير متحرك، از جمله باحال است جلوه های رسم خط با استفاده از گرافیک SVG. در واقع ، کد SVG می تواند با انیمیشن CSS و همچنین جاوا اسکریپت و قابلیت انیمیشن داخلی SMIL تعامل داشته باشد.

تعامل (نمودارها ، نمودارها ، اینفوگرافی ها ، نقشه ها)

SVG می تواند برای ترسیم داده ها و به روزرسانی آنها به صورت پویا براساس اقدامات کاربر یا سایر رویدادها استفاده شود. دیدن اینفوگرافیک SVG تعاملی و SVG Interactive Roadtrip Map.

جلوه های ویژه

بسیاری از جلوه های زنده را می توان با استفاده از SVG بدست آورد ، از جمله شکل گیری شکل یا جلوه های مختلف متفاوت.

ایجاد رابط ها و برنامه ها

SVG شما را قادر می سازد تا بسازید رابط های پیچیده که می توانید با HTML5 ، برنامه های تحت وب و برنامه های اینترنتی غنی (RIA) ادغام شوید.

همانطور که مشاهده می کنید ، SVG تقریباً در همه جا و در شرایط بی شماری مورد استفاده قرار می گیرد. خبر خوب در مورد همه اینها این است که پشتیبانی مرورگر از SVG بسیار عالی است ، زیرا می توانید خودتان در این مورد بررسی کنید caniuse.com.

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